CODEWITHSUNDEEP
javascriptjqueryfullcalendar
David Geismar
David Geismar

Reputation: 3422

Fullcalendar, preventing user from selecting multiple day event

In my fullcalendar http://fullcalendar.io/ I want to prevent a user to be able to create an event on multiple days

$('#calendar').fullCalendar({
    defaultView:  'agendaWeek',
    lang:         "fr",
    header:       false,
    timezone:     'local',
    minTime:      "08:00:00",
    columnFormat: 'dddd',
    selectHelper: true,
    selectable:   true,
    select: function(start, end, id, allDay) {
      var eventData = {
        start: start,
        end: end,
        id: 1,
        block:  true,
        editable: true,
        backgroundColor: "#469278"
      };

      // console.log(moment(eventData.start["_d"]).format("dddd"));
      // console.log(moment(eventData.end["_d"]).format("dddd"));


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

      // console.log(eventData);
      if (moment(eventData.start["_d"]).format("dddd") != moment(eventData.end["_d"]).format("dddd")) {
        $('#calendar').fullCalendar('unselect');
      };
      var day         = moment(eventData.start["_d"]).format("dddd");
      var start_time  = moment(eventData.start["_d"]).format("HH:mm");
      var end_time    = moment(eventData.end["_d"]).format("HH:mm");
      var id          = moment(eventData.end["_id"]);

      var slot        = {
        day: day,
        start_time: start_time,
        end_time: end_time
      };
      array_dispo.push(slot);

      $("#dispo_array").val(JSON.stringify(array_dispo));
      $('#calendar').fullCalendar('unselect');
    },
  });
});

When a user is selecting a start date that is different from the end date of his event I thus tried to use the unselect method from the doc http://fullcalendar.io/docs/selection/unselect_method/ like this :

  if (moment(eventData.start["_d"]).format("dddd") != moment(eventData.end["_d"]).format("dddd")) {
            $('#calendar').fullCalendar('unselect');
          };

But unfortunately this code doesnt automatically deselects the current selection...

Upvotes: 3

Views: 6241

Answers (4)

sajibriddho
sajibriddho

Reputation: 11

To prevent users from selecting multiple days at a time

selectAllow: function(selectedEvent) {
      let startDate = selectedEvent.start;
      let endDate = selectedEvent.end;
      endDate.setSeconds(endDate.getSeconds() - 1);
      if (startDate.getDate() === endDate.getDate()) {
        return true;
      } else {
        return false;
      }
    }

Upvotes: 1

Ahmad Zahabi
Ahmad Zahabi

Reputation: 1268

You can do it using this way:

eventResize: function(eventResizeInfo) {
  console.log('eventResize is called');
  var event = eventResizeInfo.event;
  if (event.start.getDay() !== event.end.getDay()) {
    eventResizeInfo.revert();
  }
},

Upvotes: 1

Gerner
Gerner

Reputation: 1

Simply add the following option to your calendar:

selectAllow: (selectInfo) => { return selectInfo.start.getDay() === selectInfo.end.getDay() },

Upvotes: -1

Slyvain
Slyvain

Reputation: 1732

You can do a check in your select method and then decide whether you want to render the event or not.

I also use Moment.js to calculate dates and durations, this library is included with FullCalendar (http://fullcalendar.io/docs/utilities/Moment/)

So I played around and came up with this:

select: function (start, end) {
    var mEnd = $.fullCalendar.moment(end);
    var mStart = $.fullCalendar.moment(start);

    if (mEnd.isAfter(mStart, 'day')) {
        $('#calendar').fullCalendar('unselect');
    } else {
        $('#calendar').fullCalendar('renderEvent', {
            start: mStart,
            end: mEnd,
            allDay: false
        },
        true // stick the event
        );
        $('#calendar').fullCalendar('unselect');
    }
}

Here is the jsfiddle if you want to see it in action: here

Upvotes: 7

Related Questions