限制全日历事件的创建

Question

I've checked you can constrain some events to be dragged in a period, or to avoid to move to other periods, but I'm looking a feature to block creation of events just in the business hours defined.

Is it possible to use the "selectable: true" (to be able to create events with clicking in some time and drag to the end, as Google Calendar), but limit to some time spaces ?

Answer 1

If you have a defined set of time when events will always be restricted to (without variations over time) then you can use a combination of the businessHours and selectConstraint settings to enforce this:

businessHours: {
  // days of week. an array of zero-based day of week integers (0=Sunday)
  daysOfWeek: [1, 2, 3, 4], // Monday - Thursday
  startTime: '10:00', // a start time (10am in this example)
  endTime: '18:00', // an end time (6pm in this example)
},
selectConstraint: "businessHours"

In the above example, "businessHours" will grey-out all the areas of the calendar outside the times defined (in this case Monday to Thursday from 10am to 6pm each day). Setting "selectConstraint" to "businessHours" means that users cannot select to create new events which fall outside the same time range.

Demo: https://codepen.io/ADyson82/pen/aboqPoo