businessHours select constraint on month view

user_14997888 0
Viewed 299

I got a problem when using FullCalendar v5. I'm trying to have a month view that had some businessHours (from monday to friday). The problem is caused by hours, on the documentation it's specified that by default the hours is from 9am to 5pm.

The calendar don't select any case due to these hours and I don't know how to make a full day ( I have try to set 00:00 to 23:59 but don't work too).

  var calendar = new FullCalendar.Calendar(calendarEl, {
    timeZone: 'UTC',
    initialView: 'dayGridMonth',
    events: 'https://fullcalendar.io/demo-events.json',
    editable: true,
    selectConstraint: 'businessHours',
    selectable: true,
    businessHours: {
      daysOfWeek: [ 1, 2, 3, 4, 5 ],
    },
  });

Live codepen: https://codepen.io/AlexisRiot/pen/ZEeJxwL

UPDATE:

I'm just trying to make a constraint on certain events (on employee permission for example). I have try to add an id ('permission') to the event, and set the option selectConstraint: 'permission'. The event should not overlap with any existing event in the "permission" group.

fullcalendar-5 fullcalendar javascript
1 Answers

If you want events not to overlap with the "permission" events, selectConstraint is the wrong option. That will restrict you to selecting only times which fall within those events - the opposite of what you want. (It also works on the event's groupId property, not its id.)

The option you need is selectOverlap. This allows you to specify a callback function which runs whenever a selection starts to overlap an event (while the user is dragging). In the callback can check the properties of the event which is being overlapped, and return true or false to specify whether the overlap should be allowed. So in your case you can simply check the groupId to determine the outcome:

selectOverlap: function (event) {
  return event.groupId != 'permission'; //allow overlap if event is not in the "permission" group
}

Live demo: https://codepen.io/ADyson82/pen/bGqoWLa

user_59470430
Related