One event for one day in the full calendar view of the month

Question

I use the fullCalendar library to add events. The default view is month , and I am loading data from database . In addition, no matter which user chooses, it is stored in the database. I have two problems here. First, when the page loads, the library adds two lines for the same event on the same day. Secondly, I want to limit the user to adding a single event in one day. Therefore, not a single day will have several events. I used the following code to load data, and the click event is present.

 $('#calendar').fullCalendar({ header: { left : 'prev,next', center : 'title', }, defaultView: 'month', defaultDate: today, selectable: true, navLinks: true, // can click day/week names to navigate views selectHelper: true,/*Load all the events from the database on page load*/ events: { //Don't have to make an ajax call because full calendar will make the call //Error and success functions are available. //On success we will populate the data which is the temp Availability. url: loadDataUrl, error: function(error) { console.log("error == "+JSON.stringify(error)); }, success: function(data){ var title = 'Availability'; var eventData; for(var j=0;j<data.length;j++) { // $('#calendar').fullCalendar( 'removeEvent', data[j]._id); var startDate = data[j].date; if (title) { eventData = { title: title, start: startDate }; $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true } $('#calendar').fullCalendar('unselect'); } } }, select: function(start, end,jsEvent,view) { var check = moment(start, 'DD.MM.YYYY').format('YYYY-MM-DD'); var today = moment(new Date(), 'DD.MM.YYYY').format('YYYY-MM-DD'); if(check < today) { // Previous Day. show message if you want otherwise do nothing. // So it will be unselectable alert("cant select previous dates!"); $('#calendar').fullCalendar('unselect'); } else { var title = 'Availability'; var eventData; if (title) { eventData = { title: title, start: start }; $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true sendData(start); } $('#calendar').fullCalendar('unselect'); } } }); 

Please help me solve this problem, because I cannot understand where I am going wrong. If you check the image, create two rows . But I have no idea how this happens. Also, this only happens when I try to load dynamic data. It works great with static data.

this is a jsfiddle link

http://jsfiddle.net/1fda25g1/10/

Answer 1

Well, finally, I got the answer to my question. I had to call the fullCalendar function in the ajax success function. I mentioned this below:

  var eventArr = []; var eventData1 ; $.ajax({ url: loadDataUrl, datatype: 'json', type: 'GET', success: function(data) { eventArr = data; eventData1 = eventArr; console.log("event data == == "+eventData1); //Full calendar library. $('#calendar').fullCalendar({ header: { left : 'prev,next', center : 'title', }, defaultView: 'month', defaultDate: today, selectable: true, selectOverlap : false, navLinks: true, // can click day/week names to navigate views selectHelper: true, events: eventData1, //This will load the events select: function(start, end,jsEvent,view) { console.log("View == = = ="+view); var check = moment(start, 'DD.MM.YYYY').format('YYYY-MM-DD'); var today = moment(new Date(), 'DD.MM.YYYY').format('YYYY-MM-DD'); alert('Current view: ' + view.name); if(check < today) { // Previous Day. show message if you want otherwise do nothing. // So it will be unselectable alert("cant select previous dates!"); $('#calendar').fullCalendar('unselect'); } else { var title = 'Availability'; var eventData; if (title) { eventData = { title: title, start: start }; $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true sendData(start); } $('#calendar').fullCalendar('unselect'); } }, eventClick: function(calEvent, jsEvent, view) { /** * calEvent is the event object, so you can access it properties */ if(confirm("Are you sure you want to delete the event " + calEvent.title + " ?")) { // deleteTempAvailability(calEvent.start._d,calEvent.end._d); deleteTempAvailability(calEvent.start._d); // delete in frontend $('#calendar').fullCalendar('removeEvents', calEvent._id); } }, editable: false, eventLimit: true, // allow "more" link when too many events }); }, failure: function(err) { alert("error == "+err); } }); 

And so that the user can add only one event per day. All I did was set from selectOverlap to false .