We Keep Coding

How add events in fullcalendar without wait for database adding

I figured out how to add en event quickly in fullcalendar, The idea is add to calendar, display and after save to database, without wait for database, but then events recently added gets duplicate when going back a week and comeback.
The code for add the event to calendar is this:
// First add the event to calendar, displaying almost instantly.
var idTemp = Math.floor(Math.random() * 100000) + 1;
var event = {
id: idTemp,
title: TextoEvento,
start: CalendarInfoSelect.start,
end: CalendarInfoSelect.end,
allDay: false,
tituloOriginal: TextoEvento,
backgroundColor: colorEvento,
textColor: colorEventoTexto
};
calendar.addEvent(event );
// Then, add to database:
$.ajax({
cache: false,
url: '#Url.Action("EventAddedTareaReciente", "CH")',
type: "POST",
dataType: 'json',
data: {
id: Idbd,
idAct: IdAct,
idProy: IdProy,
idProd: IdProd,
newStart: CalendarInfoSelect.startStr,
newEnd: CalendarInfoSelect.endStr,
ini: CalendarInfoSelect.start.toISOString(),
fin: CalendarInfoSelect.end.toISOString()
},
success: function (data) {
if (data.Id > 0) {
event = calendar.getEventById(idTemp);
// Here set id with database's one
event.setProp('id', data.Id);
}
else {
event = calendar.getEventById(idTemp);
event.remove();
}
},
error: function (xhr) {
event = calendar.getEventById(idTemp);
event.remove();
}
});
There is no error here it's works fine.
But when the user click to got one week back and comeback to the original week the event gets duplicate.
If the user add several event this ways this events gets duplicate in calendar.But they are not duplicate in database when refresh browser (F5) the display it's perfectly fine.
It's like the events add this way get sticky in memory.
Any help, ideas? I can't find a solution. Maybe there is another way to do that.
I use FullCalendar Core Package v4.3.1
Thanks

As per https://fullcalendar.io/docs/v4/Calendar-addEvent, if you specify an event source for the event to belong to (logically, it should be the same source you fetch your events from when receiving them from the database), then when the source is re-fetched (e.g. such as when the calendar date changes) it will clear the locally-added event from the calendar.
If you didn't define a specific event source when setting up the calendar, now would be a good time to modify your options slightly to support this - see https://fullcalendar.io/docs/v4/eventSources and https://fullcalendar.io/docs/v4/event-source-object
Example:
Event source is defined in the calendar configuration:
eventSources: [{
id: 1,
url: '/events'
}]
Event manually added to the calendar is associated with the event source:
calendar.addEvent(event, 1);

Using FullCalendar, how to add information to EventObject when eventReceive?

I've started discovering and using FullCalendar but I'm stuck with it.
What I want to do is a ResourceTimeline in Month view, with external event dragging (a left panel).
The subject later would be to have a modal when you drop an event, in order to choose if you want the event to be from 8am to 12pm, or afternoon from 12pm to 6pm.
So first, I'd like to do a simple eventReceive without modal, to see if I can update the event when it's dropped.
But it seems I can't, what do I do wrong ?
From what I can understand, it looks like when you drop an event in month view, the event in the param sent to eventReceive is modified.
eventReceive(info) {
info.event.start = moment(info.event.start).add(8, 'hours').format('YYYY-MM-DD hh:mm:ss');
// var c = confirm('OK = morning, Cancel = aprem');
// if (c) {
// console.log("morning !")
// } else {
// console.log("afternoon !")
// }
}
Events are very basic because I wanted to complete them whenever I drop them into the calendar
new Draggable(listofEvents, {
itemSelector: '.draggable',
eventData(event) {
return {
title: event.innerText,
activite: event.dataset.activite,
allDayDefault: false,
}
},
})
I even tried to force allDayDefault to false but it doesn't change a thing...
Here is the codepen of the project in its current state : https://codepen.io/nurovek/pen/zYYWGyX?editors=1000
Sorry if my post lacks information, I'm not used to ask questions on SO. If it's lacking, I'll try to be more explicit if you ask me, of course !

As per the documentation, an event's public properties (such as "start", "end", title" etc) are read-only. Therefore to alter a property after the event is created you must run one of the "set" methods.
So your idea will work if you use the setDates method:
eventReceive(info) {
info.event.setDates(moment(info.event.start).add(8, 'hours').toDate(), info.event.end, { "allDay": false } )
console.log(info.event);
}
Demo: https://codepen.io/ADyson82/pen/dyymawy?editors=1000
P.S. You might notice I also made a few other little changes to your CodePen, mainly to correct all the links to CSS and JS files, since it was generating all sorts of console errors. These errors were because links were wrong or simply referred to something non-existent, and for some reason you were also using files from two different versions of fullCalendar (4.3.0 and 4.3.1), which is never a good idea if you want to ensure full compatibility.

fullcalendar: is there a way to call dayRender only after i load my events via events function

i'm using fullcalendar in a web application i"m building.
i load my events with events function and ajax.
here is my code:
var ajaxData;
var eventsJsonArray;
var json_backgrundColor;
var json_iconstring;
//alert('Hello! 1!');
$(document).ready(function () {
$('#calendar').fullCalendar({
header: {
left: 'prev',
center: 'title',
right: 'next,month,agendaWeek,agendaDay'
},
//custom events function to be called every time the view changes
events: function (start, end, timezone, callback) {
var mStart = start.format('M')
var yStart = start.format('YYYY')
$.ajax({
url: '$getMonthDataUrl',
type: 'GET',
data: {
startDate: start.format(),
endDate: end.format()
},
error: function () {
alert('there was an error while fetching events!');
},
success: function (data) {
alert('nice!!');
ajaxData = data;
json_iconstring = ajaxData['iconString'];
json_backgrundColor = ajaxData['Calendar_cell_background_color'];
eventsJsonArray = ajaxData['all_Events_For_The_Month'];
callback(eventsJsonArray); //pass the event data to fullCalendar via the supplied callback function
}
});
},
fixedWeekCount: false,
showNonCurrentDates: false,
dayRender: function (date, cell, view) {
console.log(json_backgrundColor);//this brings eror because json_backgrundColor is undefined
var cellDate = date.format('D');
if (date.format('M') == view.start.format('M')) //cheacking is this day is part of the currrent month (and not prev/next month)
{
alert(cellDate);
cell.css('background-color', json_backgrundColor[cellDate]);//this brings eror because json_backgrundColor is undefined
}
},
})
});
when i load my events via ajax i'm also getting the information about which background color each cell should get. i can only get this info via the events ajax request.
the problem is that when the dayRender is running, i still don't have the background color data. (json_backgrundColor is undefined).
is there a way that dayRender will run after the events calendar will stop running? or any other code that will fix my problem.
many thanks!!

Your problem is that the "dayRender" callback runs after the view is changed (changing the date using prev/next counts as changing the view, for this purpose), but before the events for the new view have been downloaded and rendered. That's why your json_backgrundColor array is undefined.
Since you mentioned that the colour to be used depends on the exact nature of the events currently scheduled for that specific day, we need to find something that we can run after all the events, and this colour data, have been downloaded.
Inspecting the HTML, we can see that the table cells used to draw each day all have the CSS class "fc-day" applied. They also have a data-date property containing the day that they relate to. Finally, days that are disabled (outside the main month, due to you setting showNonCurrentDates:false) have an extra class of "fc-disabled-day" applied. We can use these pieces of information to identify the cells we want to change, without having to use the dayRender callback.
The eventAfterAllRender callback runs once when all the events have been rendered. Therefore this seems like a good place to alter the background colours of the cells:
eventAfterAllRender(function(view) {
//loop through each non-disabled day cell
$('.fc-day:not(.fc-disabled-day)').each(function(index, element) {
//set the background colour of the cell from the json_backgroundColor arrray, based on the day number taken from the cell's "data-date" attribute.
$(this).css('background-color', json_backgroundColor[moment($(this).data("date")).format("D")]);
});
}
Note that I have renamed json_backgrundColor to json_backgroundColor to correct the spelling error.
N.B. This is brittle in the sense that it relies on the class names that fullCalendar uses internally to represent the day cells. If fullCalendar decides to do this differently in a future release, it will break (whereas if we were able to use the fullCalendar API via the designated callbacks, they would likely maintain consistency despite internal changes, or at least document any change). But it's pretty key to the Month view, so realistically it's not likely to change any time soon - you would just have to remember to test it if you update your fullCalendar version.

if anyone still wondering you can use dateSet option like
datesSet: event => {
var from = moment(event.start).format('YYYY-MM-DD');
var to = moment(event.end).format('YYYY-MM-DD');
dateStatus = getEachDateStatus(from, to);
//{'2022-11-10' : 'fullbooked', '2022-11-09' : 'halfBooked'};
Object.keys(dateStatus).forEach(key => {
$('td[data-date="'+key+'"]').addClass(dateStatus[key]);
});
},

Instead of relying on dayRender, you should create background color events based on your ajax:
events = [
...
{ date: date
color: ...
rendering: 'background'
className: 'my-class'
}]
You can transform events using css any way you like, with or without the rendering: 'background' option.

angular-ui ui-calendar not updating on changes to Event Source Object / ng-model

I'm adding fullcalendar.js to an angular app using angular-ui / ui-calendar.
(angularjs 1.3.10, fullcalendar 2.2.6, ui-calendar 0.9.0-beta.1, jQuery 2.1.3, moment 2.9.0 & angular-moment 0.9.0)
In the calendar I'm using the dayClick as a datepicker type function to:
- write the selected date to scope (for other uses in the app)
- update the Event Source Object events array with the selected date
- display the selected date (ie newly updated event) on the calendar
I have no problems completing the 1st two tasks, but the 3rd is not updating automatically.
From the documentation:
An Event Sources objects needs to be created to pass into ng-model.
This object's values will be watched for changes. If a change occurs, then that specific calendar will call the appropriate fullCalendar method.
However it doesn't seem to be updating the calendar this automatically...
Is this a bug in ui-calendar or am I missing something ?
Interestingly if I have the calendar in an ng-if tab, and toggle between the tabs, the calendar updates correctly (after the toggle).
See this jsfiddle and:
- run, then select a date (notice the events array is updated correctly)
- toggle Tab 2 then back to Tab 1 - notice the date now displays correctly...
html looks like:
<div ui-calendar="uiConfig.calendar" ng-model="calendarDate" calendar="myCalendar1"></div>
Controller code looks like
myApp.controller('MainCtrl', function($scope, $filter, moment, uiCalendarConfig){
$scope.calendarDate = [
{
events: [
{
title: 'From',
start: '2015-01-31',
allDay: true,
rendering: 'background',
backgroundColor: '#f26522',
},
],
}
];
$scope.setCalDate = function(date, jsEvent, view) {
var dateFrom = moment(date).format('YYYY-MM-DD'); // set dateFrom based on user click on calendar
$scope.calendarDate[0].events[0].start = dateFrom; // update Calendar event dateFrom
$scope.dateFrom = $filter('date')(dateFrom, 'yyyy-MM-dd');; // update $scope.dateFrom
};
$scope.uiConfig = {
calendarFrom : {
editable : false,
aspectRatio: 2,
header : {
left : 'title',
center : '',
right : 'today prev,next'
},
dayClick : $scope.setCalDate,
background: '#f26522',
},
};
});
PS had a look at this question (which is similar) but was asked quite a few versions ago - plus the suggested solution calendar.fullCalendar('refetchEvents'); doesn't work since the calendar object is not defined - unsure what calendar.fullCalendar would be for my code...

That seems to be a problem with ui-calendar. I haven't been able to solve it so far. However, as a workaround, instead of updating the current event, you can create a new one: just replace $scope.calendarDate[0].events[0].start = dateFrom; by $scope.calendarDate[0].events.push({title: 'From', start: selectedDate, allDay: true, rendering: 'background', backgroundColor: '#f26522'});: http://jsfiddle.net/gidoca/kwsrnopz/.
On a side note, to access the calendar object to call the fullCalendar function, you would use $scope.myCalendar1 - ui-calendar adds it the the scope with a variable of the name given as the calendar attribute in the HTML.

I had the same issues but sorted out by two different ways.
When dynamically loaded the content through $http use uiCalendarConfig addEventSource
uiCalendarConfig.calendars['mycalendar'].fullCalendar('addEventSource', $scope.events);
Incase if calendar toggles visibility and hidden on load use refetchEvents
$timeout(function(){
uiCalendarConfig.calendars['mycalendar'].fullCalendar('refetchEvents');
})
$timeout holds the calendar to compile within the scope

Sugarcrm date picker disable dates before current date

Has any one managed to disable dates on sugars date picker before the current date?
I am calling it in a custom programmed module like so:
<script id="script" type="text/javascript">
YAHOO.util.Event.onDOMReady(function()
{
var now = new Date();
Calendar.setup ({
inputField : "date",
ifFormat : cal_date_format,
daFormat : "%m/%d/%Y %I:%M%P",
button : "date_start_trigger",
singleClick : true,
step : 1,
weekNumbers: false,
startWeekday: 0
});
});

There is no upgrade safe way to do this.
But have solved it by adding a parameter in include/javascript/calendar.js
Search for line calendar.cfg.setProperty("selected" just after that line add following code
if(typeof(params.customMinDate) != 'undefined')
calendar.cfg.setProperty("minDate", params.customMinDate);
And then in your calendar setup array, you should add following param,
customMinDate : new Date(),
And that should now disable all dates in past. But this works on for the calendar pops up on text field, and not when you click on calendar image.
If you find its solution, do share here, which will help others and me too.
I hope SugarCRM will overcome this limitation and make it more flexible in future releases.