Single event for single day in fullcalendar month view

Question

I am using the fullCalendar library to add events. The default view is month and I'm loading data from database. Also, whatever the user selects is stored in the database. I have two problems here. Firstly, when the page loads, the library is adding two rows for the same event on the same day. Secondly, I want to limit the user to add a single event for one day. Hence, no day will have multiple events. I have used the following code to load the data and also 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's 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');

                                }               
        }       });

Kindly help me out with this issue as i am not able to figure out where I am going wrong. If you check the picture, there are two rows that are created. But I have no clue how that is happening. Also, this happens only when I am trying to load dynamic data. It works fine with static data.

this is the JSFiddle link

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

Answer 1

Okay I finally got the answer to my question. I had to call the fullCalendar function in the success function of ajax. I've 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's 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 to ensure that the user can add only a single event per day. All I did was set the selectOverlap to false.