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

• JavaScript Scheduler Cell Customization Demo

See Also

• DayPilot.Scheduler.onBeforeCellRender

• DayPilot.Scheduler.beforeCellRenderCaching

Examples

Adding a custom CSS class to Monday cells:

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

Highlighting Saturday:

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

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):

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

• JavaScript Scheduler: Displaying Group Availability

• JavaScript Scheduler: Disabling Custom Date/Time Ranges

• JavaScript Scheduler: Alternate Column Colors

• JavaScript Scheduler: Highlighting Holidays

• Tutorial: ASP.NET Core Hotel Room Booking App

• How to Add Excel-Like Notes to JavaScript Scheduler Grid Cells

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

• Angular Scheduler: Highlighting Holidays

• Angular Scheduler: Resource Utilization Chart

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;

React Tutorials

• React JSX Components in Scheduler Grid Cells

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

• Vue Scheduler: How to Display Holidays

• Vue Scheduler: Availability/Utilization Histogram

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

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

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