Disabled Cells

You can disable selected cells using the following mechanisms:

• All cells in a row can be disabled using cellsDisabled property of the resource data object (see resources array).
• Individual cells can be disabled using onBeforeCellRender event handler

The following actions will be forbidden for the disabled cells:

• time range selection (including multi-selection)
• drop during event moving (including multi-move)
• drop during event resizing (including multi-resize)

When the shadow overlaps a disabled cell during drag and drop, it is marked with *_shadow_overlap CSS class which displays the shadow in red color (it is displayed as semi-transparent because the shadow uses opacity: 0.5; style):

.scheduler_default_shadow_overlap .scheduler_default_shadow_inner { 
  background-color: red;
}

Users will be able to continue the drag and drop operation but when they finish it at a forbidden position the final event handler (e.g. onTimeRangeSelected) will not be fired and the shadow will be cleared.

Disabling the cell doesn't automatically change the cell background color. You can use args.cell.properties.backColor in onBeforeCellRender to assign a custom background color.

Parent rows can be also disabled using a different mechanism that prevents the shadow at all (see also Parent Resources).

You can override the forbidden time range selection using args.ignoreDisabledCells in onTimeRangeSelecting event handler. This can be useful if you want to let users define the disabled ranges using drag and drop, as demonstrated in the Angular Scheduler: How to Disable Time Slots tutorial.

JavaScript

The JavaScript Scheduler supports disabled cells/time slots since version 2018.1.3180.

dp.onBeforeCellRender = function(args) {
  if (args.cell.start < new DayPilot.Date("2021-02-27") || args.cell.resource === "D") {
      args.cell.properties.disabled = true;
      args.cell.properties.backColor = "#ccc";
  }
};

JavaScript Tutorials

• JavaScript Scheduler: Displaying Holidays

How to disable a custom time range that doesn't fit the standard slots/cells:

• JavaScript Scheduler: Disabling Custom Date/Time Ranges

Angular

The Angular Scheduler component lets you disable time slots using onBeforeCellRender event handler. The following example disables cells in the past:

import {Component, ViewChild, AfterViewInit} from '@angular/core';
import {DayPilot, DayPilotSchedulerComponent} from 'daypilot-pro-angular';

@Component({
  selector: 'scheduler-component',
  template: `<daypilot-scheduler [config]="config" #scheduler></daypilot-scheduler>`,
  styles: [``]
})
export class SchedulerComponent {

  @ViewChild('scheduler')
  scheduler!: DayPilotSchedulerComponent;

  config: DayPilot.SchedulerConfig = {
    onBeforeCellRender: args => {
      if (args.cell.start < DayPilot.Date.today()) {
        args.cell.disabled = true;
        args.cell.backColor = "#dddddd";
      }
    },
    // ...
  };

}

Angular Tutorials

How to disable time slots in Angular Scheduler and let users change the disabled status using drag and drop:

• Angular Scheduler: How to Disable Time Slots

React

The following example disables the previous week in the React Scheduler:

import React, {Component} from 'react';
import {DayPilot, DayPilotScheduler} from "daypilot-pro-react";

class Scheduler extends Component {

  constructor(props) {
    super(props);

    this.state = {
      onBeforeCellRender: args => {
        const previousWeekStart = DayPilot.Date.today().firstDayOfWeek().addDays(-7);
        const previousWeekEnd = previousWeekStart.addDays(7);

        if (DayPilot.Util.overlaps(args.cell.start, args.cell.end, previousWeekStart, previousWeekEnd)) {
          args.cell.properties.disabled = true;
          args.cell.properties.backColor = "#eeeeee";
        }
      },
      // ...

    };
  }

  render() {
    var {...config} = this.state;
    return (
      <div>
        <DayPilotScheduler
          {...config}
          ref={component => {
            this.scheduler = component && component.control;
          }}
        />
      </div>
    );
  }
}

export default Scheduler;

Tutorials

• React JSX Components in Scheduler Grid Cells

protected void DayPilotScheduler1_BeforeCellRender(object sender, DayPilot.Web.Ui.Events.BeforeCellRenderEventArgs e)
{
  if (e.Start < DateTime.Today)
  {
      e.Disabled = true;
      e.BackgroundColor = "#ccc";
  }
}

protected override void  OnBeforeCellRender(BeforeCellRenderArgs e)
{
  if (e.Start < DateTime.Today)
  {
    e.Disabled = true;
    e.BackgroundColor = "#ccc";
  }
}