html5 scheduler cell customization

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

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

Highlighting Saturday:

html5 scheduler grid cell highlighting saturday

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

Highlighting today:

html5 scheduler highlighting today

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

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

React Scheduler

Use the onBeforeCellRender attribute of the <DayPilotScheduler> React Scheduler component to customize the grid cells:

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

class Scheduler extends Component {

  constructor(props) {
    super(props);
  }

  // ...
  
  onBeforeCellRender(args) {
    if (args.cell.start < DayPilot.Date.today()) {
      args.cell.backColor = "#dd7e6b";
    }  
  }

  render() {
    var {...config} = this.state;
    return (
        <DayPilotScheduler
          onBeforeCellRender={args => this.onBeforeCellRender(args)}
        />
    );
  }
}

export default Scheduler;

Vue Scheduler

In the Vue Scheduler component, use the onBeforeEventRender property of the config object to specify the event handler:

<template>
  <DayPilotScheduler id="dp" :config="config" ref="scheduler" />
</template>

<script>
import {DayPilot, DayPilotScheduler} from 'daypilot-pro-vue'

export default {
  name: 'Scheduler',
  data: function() {
    return {
      config: {
        onBeforeCellRender: args => {
          if (args.cell.start === DayPilot.Date.today()) {
            args.cell.backColor = "#b6d7a8";
          }
        }
      },
    }
  },
  components: {
    DayPilotScheduler
  },
  
  // ...
}
</script>

Vue Scheduler 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";
  }
}