Overview

  • You can mark selected days of the JavaScript monthly calendar as disabled.

  • Disabled days will not allow any drag and drop operations (creation of new events, moving existing events, etc.).

  • Requires DayPilot Pro for JavaScript 2022.2.5287 or higher.

  • Includes a trial version of DayPilot Pro for JavaScript (see License below).

License

Licensed for testing and evaluation purposes. Please see the license agreement included in the sample project. You can use the source code of the tutorial if you are a licensed user of DayPilot Pro for JavaScript.

Mark Days as Disabled to Prevent Drag and Drop

The monthly calendar component lets you customize the appearance of the day cells. You can also mark the cells as disabled which will prevent drag and drop operations.

It doesn’t affect loading existing events from the data source - events that overlap the disabled days will be loaded and displayed normally.

This feature can be useful in different scenarios:

  • you can disable days in the past and only allow adding events/tasks to future days

  • you can disable weekends (you can also hide weekends as an alternative)

  • you can disable custom days (e.g. holidays or days when maintenance takes place)

The sample opens in the current month. Use the checkboxes above the calendar to enable each rule separately or combine them. The holiday and maintenance dates are illustrative October 2026 dates; replace them with dates from your own data source. Events created in this client-side example stay in memory until the page reloads.

The app object stores the checkbox flags and date arrays. Each checkbox change calls dp.update() to apply the current rules without clearing existing events. The excerpts below show the relevant branch of the shared onBeforeCellRender handler.

How to Disable Days in the Past?

javascript monthly calendar disabled past

You can mark the days as disabled using the onBeforeCellRender event handler. This event handler is called once for every day cell displayed by the monthly calendar and you can use it to change the cell properties, including the disabled status.

In addition to marking the day as disabled, we will also add an active area at the bottom of the day cell (gray bar) to provide a visual hint to the users. 

const dp = new DayPilot.Month("dp", {
  // ...
  onBeforeCellRender: args => {
    // ...
    if (app.disablePast) {
      const disabled = args.cell.start < DayPilot.Date.today();
      if (disabled) {
        args.cell.properties.disabled = true;
        args.cell.properties.areas = [
          {
            left: 0,
            right: 0,
            bottom: 0,
            height: 5,
            backColor: "#aaaaaa"
          },
        ];
      }
    }
    // ...
  }
});

The comparison uses DayPilot.Date.today(), so today itself remains available. In the example shown, today is October 7, 2026, so dates through October 6 are disabled. The disabled status of a day cell will prevent all drag and drop operations, including event creation, moving and resizing. The target shadow overlapping a disabled day will be displayed in red:

javascript monthly calendar forbidden selection

How to Disable Weekends?

javascript monthly calendar disabled weekends

This example uses the onBeforeCellRender event handler to disable weekends.

It also adds a blue bar and an “X” icon to the bottom of the weekend cells. 

const dp = new DayPilot.Month("dp", {
  // ...
  onBeforeCellRender: args => {
    // ...
    if (app.disableWeekends) {
      const dayOfWeek = args.cell.start.getDayOfWeek();
      const disabled = dayOfWeek === 0 || dayOfWeek === 6;
      if (disabled) {
        args.cell.properties.disabled = true;
        args.cell.properties.areas = [
          {
            left: 3,
            width: 15,
            bottom: 5,
            height: 20,
            fontColor: "#3c78d8",
            text: "✖",
          },
          {
            left: 0,
            right: 0,
            bottom: 0,
            height: 5,
            backColor: "#3c78d8"
          },
        ];

      }
    }
    // ...
  }
});

How to Disable Holidays?

javascript monthly calendar disabled holidays

To disable holidays specified in an array (app.holidays) use the onBeforeCellRender event handler to check if the cell date (args.cell.start) is in the list of holidays. You can also display the holiday name in the calendar day cell.

This example adds a yellow bar and the holiday name to the bottom of the calendar cell. Sample holiday is an illustrative date, not a built-in holiday calendar: 

const app = {
  // ...
  holidays: [
    {date: "2026-10-01", name: "Sample holiday"}
  ],
  // ...
};

// ...

const dp = new DayPilot.Month("dp", {
  // ...
  onBeforeCellRender: args => {
    // ...
    if (app.disableHolidays) {
      const disabled = app.holidays.find(item => new DayPilot.Date(item.date) === args.cell.start);
      if (disabled) {
        args.cell.properties.disabled = true;
        args.cell.properties.areas = [
          {
            left: 3,
            width: 15,
            bottom: 5,
            height: 20,
            fontColor: "#f1c232",
            text: "✖",
          },
          {
            left: 0,
            right: 0,
            bottom: 5,
            height: 20,
            text: disabled.name,
            horizontalAlignment: "center"
          },
          {
            left: 0,
            right: 0,
            bottom: 0,
            height: 5,
            backColor: "#f1c232"
          },
        ];
      }
    }
    // ...
  }
});

How to Disable Maintenance Days?

javascript monthly calendar disabled maintenance

To display the maintenance days and disable them for events, check the day cell overlap with the predefined maintenance dates.

The maintenance days are defined in app.maintenance as an array of items with start and end date: 

const app = {
  // ...
  maintenance: [
    {start: "2026-10-05", end: "2026-10-06"}
  ],
  // ...
};

This example checks the maintenance dates and highlights the matching days in the calendar.

When checking the overlap with the maintenance days, we use DayPilot.Util.overlaps() to compare the two date ranges. The cell range ends at midnight on the following day. The maintenance dates in this example use an inclusive end date, so we add one day to that value to include the whole final maintenance day. Without addDays(1), October 6 would remain available. 

const dp = new DayPilot.Month("dp", {
  // ...
  onBeforeCellRender: args => {
    // ...
    if (app.disableMaintenance) {
      const disabled = app.maintenance.find(item => DayPilot.Util.overlaps(args.cell.start, args.cell.end, new DayPilot.Date(item.start), new DayPilot.Date(item.end).addDays(1)));
      if (disabled) {
        args.cell.properties.disabled = true;
        args.cell.properties.areas = [
          {
            left: 3,
            width: 15,
            bottom: 5,
            height: 20,
            fontColor: "#cc4125",
            text: "✖",
          },
          {
            left: 0,
            right: 0,
            bottom: 5,
            height: 20,
            text: "Maintenance",
            horizontalAlignment: "center"
          },
          {
            left: 0,
            right: 0,
            bottom: 0,
            height: 5,
            backColor: "#cc4125"
          },
        ];
      }
    }
    // ...
  }
});

When multiple rules match a day, it remains disabled. The handler checks past days, weekends, holidays and maintenance in that order. Each matching rule replaces the active areas, so the last matching rule determines the visible label and bar.