It should Not allow to Select Date if Event Already exists in Full calendar

Question

As you can see in the screen shot iam able to select a date which as an event already how to give an alert or disable the date with existing event.

Here i am Attaching the jquery source iam using i used select function to select the event please help me with this.

I have a requirement where i should be able to book only one event at a time and if the event is already created it should not allow another event to be created for the same day.

First: I have to disable the selection Second: I have to display an alert "Booked for the day"

/* initialize the calendar
         -----------------------------------------------------------------*/
        //Date for the calendar events (dummy data)
        var date = new Date()
        var d    = date.getDate(),
            m    = date.getMonth(),
            y    = date.getFullYear()
        $('#calendar').fullCalendar({
          header    : {
            left  : 'prev,next today',
            center: 'title',
            right : 'month,agendaWeek,agendaDay'
          },
          buttonText: {
            today: 'today',
            month: 'month',
            week : 'week',
            day  : 'day'
          },
          selectable: true,
            select: function(start, end, jsEvent, view) {
                if(start.isBefore(moment())) {
                    $('#calendar').fullCalendar('unselect');
                    return false;
                }
                 // start contains the date you have selected
                 // end contains the end date. 
                 // Caution: the end date is exclusive (new since v2).
                 $(".fc-state-highlight").removeClass("fc-state-highlight");
                 $("td[data-date="+start.format('YYYY-MM-DD')+"]").addClass("fc-state-highlight");
                 var allDay = !start.hasTime() && !end.hasTime();
                 //console.log(view);
                 alert(["Event Start date: " + moment(start).format(),
                        "Event End date: " + moment(end).format(),
                        "AllDay: " + allDay].join("\n"));
            },
          //Random default events
          events    : [
            {
              title          : 'All Day Event',
              start          : new Date(y, m, 1),
              backgroundColor: '#f56954', //red
              borderColor    : '#f56954' //red
            },
            {
              title          : 'Long Event',
              start          : new Date(y, m, d - 5),
              end            : new Date(y, m, d - 2),
              backgroundColor: '#f39c12', //yellow
              borderColor    : '#f39c12' //yellow
            },
            {
              title          : 'Meeting',
              start          : new Date(y, m, d, 10, 30),
              allDay         : true,
              backgroundColor: '#0073b7', //Blue
              borderColor    : '#0073b7' //Blue
            },
            {
              title          : 'Lunch',
              start          : new Date(y, m, d, 12, 0),
              end            : new Date(y, m, d, 14, 0),
              allDay         : false,
              backgroundColor: '#00c0ef', //Info (aqua)
              borderColor    : '#00c0ef' //Info (aqua)
            },
            {
              title          : 'Birthday Party',
              start          : new Date(y, m, d + 1, 19, 0),
              end            : new Date(y, m, d + 1, 22, 30),
              allDay         : false,
              backgroundColor: '#00a65a', //Success (green)
              borderColor    : '#00a65a' //Success (green)
            },
            {
              title          : 'Click for Google',
              start          : new Date(y, m, 28),
              end            : new Date(y, m, 29),
              url            : 'http://google.com/',
              backgroundColor: '#3c8dbc', //Primary (light-blue)
              borderColor    : '#3c8dbc' //Primary (light-blue)
            },
            {
            title: 'normal_event',
            start: "2018-02-05T12:00:00-00:00",
            end: "2018-02-05T13:00:00-00:00",
            id: 5,
            color: "#006633",
            editable: false,
            allDay: false
            }
          ],
          editable  : false,
          droppable : true, // this allows things to be dropped onto the calendar !!!
          drop      : function (date, allDay) { // this function is called when something is dropped

            // retrieve the dropped element's stored Event Object
            var originalEventObject = $(this).data('eventObject')

            // we need to copy it, so that multiple events don't have a reference to the same object
            var copiedEventObject = $.extend({}, originalEventObject)

            // assign it the date that was reported
            copiedEventObject.start           = date
            copiedEventObject.allDay          = allDay
            copiedEventObject.backgroundColor = $(this).css('background-color')
            copiedEventObject.borderColor     = $(this).css('border-color')

            // render the event on the calendar
            // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
            $('#calendar').fullCalendar('renderEvent', copiedEventObject, true)

            // is the "remove after drop" checkbox checked?
            if ($('#drop-remove').is(':checked')) {
              // if so, remove the element from the "Draggable Events" list
              $(this).remove()
            }

          },
          //Read Events
            header: {
                left: '',
                center: 'prev title next',
                right: ''
            },
            eventClick:  function(event, jsEvent, view) {
                //set the values and open the modal
                //console.log(event);
                //$("#eventInfo").html(event.description);
                //$("#eventLink").attr('href', event.url);
                //$("#eventContent").dialog({ modal: true, title: event.title });
            },
        })

        /* ADDING EVENTS */
        var currColor = '#3c8dbc' //Red by default
        //Color chooser button
        var colorChooser = $('#color-chooser-btn')
        $('#color-chooser > li > a').click(function (e) {
          e.preventDefault()
          //Save color
          currColor = $(this).css('color')
          //Add color effect to button
          $('#add-new-event').css({ 'background-color': currColor, 'border-color': currColor })
        })
        $('#add-new-event').click(function (e) {
          e.preventDefault()
          //Get value and make sure it is not null
          var val = $('#new-event').val()
          if (val.length == 0) {
            return
          }

          //Create events
          var event = $('<div />')
          event.css({
            'background-color': currColor,
            'border-color'    : currColor,
            'color'           : '#fff'
          }).addClass('external-event')
          event.html(val)
          $('#external-events').prepend(event)

          //Add draggable funtionality
          init_events(event)

          //Remove event from text input
          $('#new-event').val('')
        })
    });

Answer 1

To stop users selecting days on the calendar where an event already exists, you can handle the "selectAllow" callback, which provides a way to control what selections a user can make. Within that, you can get the current events which occur on that day via the "clientEvents" method, and then compare the start and end dates with that of the selection:

selectAllow: function(selectInfo) {
  //since we're only interested in whole days, set all times to the start/end of their respective day
  selectInfo.start.startOf("day");
  selectInfo.end.startOf("day");

  var evts = $("#calendar").fullCalendar("clientEvents", function(evt) {
    var st = evt.start.clone().startOf("day");
    if (evt.end) { var ed = evt.end.clone().startOf("day"); }
    else { ed = st; }

    //return true if the event overlaps with the selection
    return (selectInfo.start.isSameOrBefore(ed) && selectInfo.end.isSameOrAfter(st));
  });

  //return true if there are no events overlapping that day
  return evts.length == 0;
},

See http://jsfiddle.net/sbxpv25p/181/ for a working demo

See https://fullcalendar.io/docs/selection/selectAllow/ for more info about this callback, and https://fullcalendar.io/docs/event_data/clientEvents/ to read about the clientEvents method