html5-javascript-scheduler-disable-cells-time-slots.png

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:

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

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

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:

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;

ASP.NET WebForms

Available since 2018.1.3642.

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

ASP.NET MVC

Available since 2018.3.5951.

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