html5-scheduler-cell-customization.png

The appearance of the JavaScript Scheduler grid cells can be customized using onBeforeCellRender event handler. 

JavaScript Scheduler

The onBeforeCellRender event is called before a cell is rendered for the first time. You can use the event handler to customize the cell appearance (background color, HTML, ...) and behavior (add active areas, set disabled status, ...).

Cell Rendering

Cells are only rendered for the current viewport. Additional cells will be rendered as the user scrolls to new areas.

Rendered cells remain in the DOM, until the DOM cache is full. The DOM cache is enabled by default (cellSweeping property) and the cache size is set to 1000 cells (cellSweepingCacheSize).

All cells in a row are re-rendered when any event in that row gets changed (added, removed, updated).

Scrolling Performance

The onBeforeCellRender event is called many times during scrolling and it is very sensitive to ineffective code. See more in Scrolling Performance.

There is a configurable delay before the cells are rendered during scrolling (scrollDelayCells). By default, the cells are rendered synchronously (the default value is 0). This provides great real-time feedback during scrolling but it may slow down the scrolling if the onBeforeCellRender code is heavy.

Properties Caching

The cell properties you set using onBeforeCellRender are cached until the next update() call. Please note that this cache holds the onBeforeCellRender results (it means onBeforeCellRender will not be called again for this cell) and it is different from the DOM cache mentioned above in the "Cell Rendering" section.

If the cell status depends on the events (e.g. when displaying resource utilization) you will need to turn the caching off using beforeCellRenderCaching. This will make sure that onBeforeCellRender will be called every time the cell is rendered.

See also the JavaScript Scheduler: Displaying Group Availability tutorial for an example.

Demo

See Also

Examples

Adding a custom CSS class to Monday cells:

html5-scheduler-grid-cell-customization.png

dp.onBeforeCellRender = function(args) {
  if (args.cell.start.getDayOfWeek() === 1) {
    args.cell.cssClass = "monday";
  }
};

Highlighting Saturday:

html5-scheduler-grid-cell-highlighting-saturday.png

dp.onBeforeCellRender = function(args) {
  if (args.cell.start.getDayOfWeek() === 6) {
    args.cell.backColor = "#dddddd";
  }
};

Highlighting today:

html5-scheduler-highlighting-today.png

dp.onBeforeCellRender = function(args) {
  if (args.cell.start <= DayPilot.Date.today() && DayPilot.Date.today() < args.cell.end) {
      args.cell.backColor = "#ffcccc";
  }
};

Custom business hours for a resource (resource "C", from 10 am to 3 pm):

html5-scheduler-custom-business-hours.png

dp.onBeforeCellRender = function(args) {
  if (args.cell.resource === "C") {
    var hour = args.cell.start.getHours();
    if (10 <= hour && hour < 15) {
      args.cell.business = true;
    }
    else {
      args.cell.business = false;
    }
  }
};

Tutorials

Angular Scheduler

In the Angular Scheduler component, you can define your own onBeforeCellRender event handler using the config object:

import {Component, ViewChild} 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.backColor = "#f0f0f0";
      }
    },

    // ...

  };

  // ...

}

Angular Tutorials

ASP.NET WebForms

Properties supported in BeforeCellRender:

  • e.BackgroundImage
  • e.BackgroundRepeat
  • e.BackgroundColor
  • e.IsBusiness
  • e.CssClass
  • e.Html

1. Changing IsBusiness Status

You can change the IsBusiness status using e.IsBusiness property. The cells will automatically use the color specified for business cell (BackColor) or non-business cells (NonBusinessBackColor).

Example

protected void DayPilotScheduler1_BeforeCellRender(object sender, DayPilot.Web.Ui.Events.BeforeCellRenderEventArgs e)
{
  if (e.Start.Hour == 13)
  {
    e.IsBusiness = false;
  }
}

2. Changing the Color

You can also change the cell color directly using e.BackgroundColor.

Example

protected void DayPilotScheduler1_BeforeCellRender(object sender, DayPilot.Web.Ui.Events.BeforeCellRenderEventArgs e)
{
  if (e.ResourceId == "A")
  {
    e.BackgroundColor = "red";
  }
}

ASP.NET MVC

protected override void  OnBeforeCellRender(BeforeCellRenderArgs e)
{

  // highlight parent resource cells
  if (Resources.FindById(e.ResourceId).Children.Count > 0)
  {
    e.BackgroundColor = "white";
  }

  // highlight first day of month
  if (e.Start.Day == 1)
  {
      e.CssClass = "red";
  }
}