The background cell appearance can be customized using BeforeCellRender event handler. 

JavaScript

See also DayPilot.Scheduler.onBeforeCellRender.

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

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