2

I'm trying to build a calendar for an apartment with Fullcalendar showing occupied dates through background event so that the full day in month view has color. The issue is with the first day of the occupied period. Since checkin is 3pm, the user should be able to select it since checkout will be 10am. Since I flag selectOverlap: false to avoid customer selects the other booked periods, I don't know how to allow just the first day of the background event to be selectable. Any idea?

Here below my code

$(function() {

$('#calendar').fullCalendar({
  themeSystem: 'jquery-ui',
  plugins: ['interaction', 'dayGrid', 'timeGrid' ],
  locale: 'it',
  selectable: true,
  selectOverlap: false,
  eventStartEditable: true,
  longPressDelay: 10,
  aspectRatio: 1,

  header: {
    left: 'prev',
    center: 'title',
    right: 'next'
  },
  defaultDate: '2020-04-01', //new Date().toISOString().slice(0,10),
      events: [
        {"start":"2020-01-01","end":"2020-03-31","rendering":"background", "title": "CLOSED", "className": "event-full"},
        {"start":"2020-05-31","end":"2020-06-07","rendering":"background", "title": "FULL",   "className": "event-full"},
        {"start":"2020-06-27","end":"2020-07-11","rendering":"background", "title": "FULL",   "className": "event-full"},
        {"start":"2020-07-13","end":"2020-07-21","rendering":"background", "title": "FULL",   "className": "event-full"},
        {"start":"2020-07-25","end":"2020-08-08","rendering":"background", "title": "FULL",   "className": "event-full"},
        {"start":"2020-08-09","end":"2020-08-28","rendering":"background", "title": "FULL",   "className": "event-full"},
        {"start":"2020-11-01","end":"2021-03-31","rendering":"background", "title": "CLOSED", "className": "event-full"}
        ],

select: function(startDate, endDate) {

    if (endDate.diff(startDate, 'days') < 4) {
        alert('Minimum night is 4');
    } else {
        document.getElementById('checkIn').value = startDate.format();
        document.getElementById('checkOut').value = endDate.add(-1,'day').format();
    }
},

eventRender: function (event, element) {
            if (event.rendering == 'background') {
                element.append(event.title);
            }
} //eventRender
});
});
ADyson
  • 57,178
  • 14
  • 51
  • 63
Stefano Sada
  • 21
  • 1
  • Side note: From the syntax, you appear to be using fullCalendar version 3. If so, then the line `plugins: ['interaction', 'dayGrid', 'timeGrid' ],` is not useful, because plugins were not introduced until version 4. – ADyson Jan 22 '20 at 08:34
  • Anyway to solve your problem I think you'll need to have some kind of custom overlap rule using a function (as mentioned in https://fullcalendar.io/docs/v3/selectOverlap) so you can add some extra logic to deal with the situation you've mentioned. – ADyson Jan 22 '20 at 08:35

0 Answers0