Impossible to select all_day_slots with fullcalendar

Question

I am using fullcalendar to create a calendar where my user can indicate his disponibilities. I have set up the calendar so there are allDaySlots available. They appear correctly on the calendar, but I can't select them. Is there anything special to specify in the select callback?

Is it also possible to set up fullcalendar so that when the user selects the allDaySlot, the whole row concerning that day appears as selected?

$(document).ready(function() {

  // page is now ready, initialize the calendar...
  var array_dispo = [];


  $('#calendar').fullCalendar({
    defaultView:  'agendaWeek',
    lang:         "fr",
    header:       false,
    timezone:     'local',
    minTime:      "08:00:00",
    columnFormat: 'dddd',
    selectHelper: true,
    selectable:   true,
    allDaySlot: true,

    select: function(start, end, allDay) {

      var eventData = {
        // allDay: allDay,
        start: start,
        end: end,
        block:  true,
        editable: true,
        backgroundColor: "#469278"
      };

      var mEnd = $.fullCalendar.moment(end);
      var mStart = $.fullCalendar.moment(start);
      if (mEnd.isAfter(mStart, 'day')) {
          $('#calendar').fullCalendar('unselect');
      } else {
      $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
      console.log(eventData);
       var array_all_events = [];
       var all_events = $('#calendar').fullCalendar('clientEvents');
       $.each(all_events, function(index, value) {
           var day         = moment(value.start["_d"]).format('dddd');
           var start_time  = moment(value.start["_d"]).format("HH:mm");
           var end_time    = moment(value.end["_d"]).format("HH:mm");
           var slot        = {
              day: day,
              start_time: start_time,
              end_time: end_time,
            };
          array_all_events.push(slot);
          $("#dispo_array").val(JSON.stringify(array_all_events));
      });
      $('#calendar').fullCalendar('unselect');
    }
    },

    eventClick: function(event, element) {
      if(confirm('Voulez-vous supprimer cette dispo?')) {

        $('#calendar').fullCalendar('removeEvents', event._id);
        var array_all_events = [];
        var all_events = $('#calendar').fullCalendar('clientEvents');
        // console.log(all_events);
        $.each(all_events, function(index, value) {
          // console.log(value.start["_d"]);
          // console.log(index);
           var day         = moment(value.start["_d"]).format('dddd');
           var start_time  = moment(value.start["_d"]).format("HH:mm");
           var end_time    = moment(value.end["_d"]).format("HH:mm");
             // var id          = value.unique_id["_i"];
             var slot        = {
                day: day,
                start_time: start_time,
                end_time: end_time,
              };
            array_all_events.push(slot);
            console.log(array_all_events.length);
            if (array_all_events.length == 0) {
              $("#dispo_array").val("");
            }
            else {
              $("#dispo_array").val(JSON.stringify(array_all_events));
            }
        });



      }
    },
    eventDragStop: function( event, jsEvent, ui, view ) {
      // console.log(event);
      var all_events = $('#calendar').fullCalendar('clientEvents');

    },

    selectOverlap: function(event) {
      return ! event.block;
    }
  });
});

Answer 1

I've made a jsfiddle here

This snippet here:

...
 var mEnd = $.fullCalendar.moment(end);
      var mStart = $.fullCalendar.moment(start);
      if (mEnd.isAfter(mStart, 'day')) {
          $('#calendar').fullCalendar('unselect');
      } else {

...

is causing an immediate unselect on all-day events since the condition mEnd > mStart is always true for those.

if you change to

...

      var mEnd = $.fullCalendar.moment(end);
      var mStart = $.fullCalendar.moment(start);

      // just uncommented this:
      /*if (mEnd.isAfter(mStart, 'day')) {
          $('#calendar').fullCalendar('unselect');
      } else*/ 

      {
      $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
...

the all-day events get rendered properly. title is mandatory, so I added this.

Another approach would be to set the default event duration to 0 but I haven't tested that, see here http://fullcalendar.io/docs/event_data/defaultAllDayEventDuration/

EDIT

have a look at this fiddle: http://jsfiddle.net/xaLzo7g6/3/

Multiple things:

• moment events are mutable, thus need cloning befor modifying them
• timezone was set to "local" while moment is UTC, This resulted in a 2-hour shift in to the next day on all events. Setting that to "UTC" fixed the overlap in to the next day
• the logic of unselecting was removed entirely, since its unnecessary

from my perspective it now behaves as wanted: clicking on an allday slot or selecting any time frame always "selects" the entire day and blocks it