I’m a beginner with FullCalendar, I need to develop a calendar with schedular view with vertical ressources. My problem is when I want to insert ressources objects in my calendar, FullCalendar display only 14 ressources while I have 15 ressources. All the time my calendar forget one ressource. See my code to insert ressources : //Fetch all users from database function fetchAllUsers() { schedulerService.fetchAllUsers() .then( function(d) { self.users = d; for(var i = 0; i […]
Category: fullcalendar
Fullcalendar, i would like to Create an event every 12 weeks on a Friday, until a specific date
I develop an application with an API in CakePhp 3 and the front in AngularJS. I integrate Fullcalendar and I would like to Create, for example : an event every 12 weeks on a Friday, until a specific date like google calendar. here is the code for get event : calendarService.getTurnsInfo() .then(function(response) { if (response.data.errors) $scope.errors.event = response.data.errors; else { $scope.events.data = response.data.event; console.log($scope.events.data); angular.forEach($scope.events.data, function (value, key){ console.log(value); console.log(value.turn_schedules[0].start_at); $scope.event.push( { title: value.name, start: […]
md-dialog does not render on the current calendar
how to md-dialog does not render on the current calendar I am using fullcalendar to display a series of records within a calendar. It is working beautifully. I am now attempting to add the ability to click a day to add a new event. I have added the dayClick code below: $(“#calendar”).fullCalendar({ … dayClick: function (date, jsEvent, view) { $scope.AddDailyRecord(date); }, … }); The function AddDailyRecord is below: $scope.AddDailyRecord = function (date) { if (date) […]
Angularjs call Jquery plugin
I am running the fullCalendar jquery plugin. Besides that I am running angularjs. Now I need to call the refetchResources function on that jquery plugin from angular. I tried to use: angular.element(document.querySelector((‘#calendar’)).fullCalendar(‘refetchEvents’); But it does not seem to work. Unfortunately I can not initiate the calendar from inside angular with using a directive. Any suggestions how to accomplish that? Source: AngularJS
google calendar authentication integrated with full calendar
I have been using the gcal sample with full calendar, but the since the api is visible anybody who gets to access my code can get my cal api, how do i authenticate it so none of them able to get my calendar credentials. Source: AngularJS
how to show agendaday with rowspan dynamically
I can’t get any CSS that change the specific column header with title when event loader: function initCalendar(myresources) { $(‘#day-calendar’).fullCalendar({ defaultView: ‘agendaDay’, // defaultDate: ‘2017-12-28’, defaultDate: $scope.setDate, aspectRatio: 1.8, editable: true, selectable: true, eventLimit: true, slotEventOverlap: true, minTime: $scope.lessonStartTime, maxTime: $scope.lessonEndTime, contentHeight: ‘auto’, slotLabelInterval: $scope.lessonTimeInterval, slotLabelFormat: “HH:mm:A”, header: { left: ”, center: ‘Time’, right: ” }, views: { agendaDay: { groupByDateAndResource: true, } }, selectable: true, selectHelper: true, resourceLabelText: “Venue”, allDaySlot: false, resources: myresources, events: […]
How to update event source object to particular event source in full calendar dynamically
Hello I have loaded one calendar using below code. dataFactory.httpRequest(‘getCalanderTaskData’,’GET’).then(function(data) { $scope.taskCalanderDailyTask = data.dailyTask; $scope.taskCalanderDueTask = data.dueTask; $scope.fullCalendarEventSources = { dailyTask : { events:$scope.taskCalanderDailyTask, textColor : ‘#000’, backgroundColor: ‘#FFD000’, }, dueTask : { events:$scope.taskCalanderDueTask, textColor : ‘#fff’, backgroundColor: ‘#da1445’, } }; $(‘#fullcalendar’).fullCalendar({ eventClick: function(calEvent, jsEvent, view) { }, eventMouseover: function(calEvent, jsEvent, view) { var tooltip = ‘<div class=”tooltipevent” style=”color:#fff;width:100px;height:50px;background:#125688;position:absolute;z-index:10001;”>’ + calEvent.title + ‘</div>’; var $tooltip = $(tooltip).appendTo(‘body’); $(this).mouseover(function(e) { $(this).css(‘z-index’, 10000); $tooltip.fadeIn(‘500′); $tooltip.fadeTo(’10’, 1.9); }).mousemove(function(e) […]
angular.js ui-calendar: using prev/next methods with external buttons
I’m using ui-calendar directive. I want to use external buttons for prev and next buttons like this: $(‘#my-prev-button’).click(function() { $(‘#calendar’).fullCalendar(‘prev’); }); $(‘#my-next-button’).click(function() { $(‘#calendar’).fullCalendar(‘next’); }); I expect these buttons to navigate one month up or down, but when I click on they, multiple clicks are thrown, resulting in moving two months (sometimes more) away instead of one. To make work this code I placed it inside the viewRender function, which I suspect is the cause […]
How to pass startDate and event inside updateEvent of fullcalendar?
I am trying to pass event name and startDate inside updateEvent() to update current event. Is it correct? $(‘#fullCalendar’).fullCalendar(‘updateEvent’,Diwali,2017-10-23); I referred from here https://fullcalendar.io/docs/event_data/updateEvent/ Source: AngularJS
update values in jquery based on angular change
In my application I have used calendar widget using fullcalender.js, $(document).ready(function() { $(‘#profile-calendar’).fullCalendar({ events: $scope.calendarEvent }); }); what I wanted to do is, I need to give different values to the event attribute based a angular event. the below code snippet is what I have used to update the $scope.calendarEvent attribute. $scope.$on(‘profile_selection’,function(event, args){ $scope.calendarEvent = $rootScope.calendarEvent; $scope.$apply(); }); But this is not working as I expected, the calendar is showing the initial value given to […]
Recent Comments