javascript monthly calendar disabled cells

You can disable selected days in the monthly calendar component.

  • The calendar will not allow drag and drop operations (event movingresizingcreation) for the disabled cells.
  • The forbidden target will be marked using a red color (see also Styling below).
  • The event handler (e.g. onEventMove, onEventResize, onTimeRangeSelect) will not be fired.
  • The appearance of disabled cells is not changed. You may want to apply custom background color (args.cell.properties.backColor property) in onBeforeCellRender to provide a visual hint.
  • It doesn't affect existing events - they will be loaded and displayed normally.

You can disable custom cells using onBeforeCellRender event handler (see also event customization).

Available since version 2022.2.5287.

Styles

The target position shadow will be marked with month_default_shadow_forbidden CSS class if it overlaps with a disabled cell. The default style (the built-in theme) adds a red background:

.month_default_shadow_forbidden .month_default_shadow_inner {
  background-color: #cc4125;
}

JavaScript Monthly Calendar

How to disable weekends in the monthly calendar:

dp.onBeforeCellRender = function(args) {
  var dayOfWeek = args.cell.start.getDayOfWeek();
  if (dayOfWeek === 0 || dayOfWeek === 6) {
      args.cell.properties.disabled = true;
  }
};

How to disabled past days in the monthly calendar:

dp.onBeforeCellRender = function(args) {
  if (args.cell.start < DayPilot.Date.today()) {
      args.cell.properties.disabled = true;
  }
};

Tutorials