Cell properties can be customized using BeforeCellRender event handler.

  • IsBusiness status
  • Background color
  • HTML
  • CSS class

Background image and background image repeat rule can be changed for the legacy CssOnly = false mode.

See also highlighting today.

JavaScript

Applying a custom CSS class to lunch break cells:

html5-event-calendar-grid-cell-lunch-time-css.png

dp.onBeforeCellRender = function(args) {
  if (args.cell.start.getHours() >= 13 && args.cell.start.getHours() < 14) {
    args.cell.cssClass = "lunch_time_cell";
  }
};

Removing the intra-hour cell separator lines using custom CSS class:

html5-event-calendar-grid-cell-css.png

<style>
  .intrahour .calendar_default_cell_inner {
      border-bottom: 1px solid transparent;
  }
</style>

...

<div id="dp"></div>

... 

<script>

  var dp = new DayPilot.Scheduler("dp");
  // ...
  dp.onBeforeCellRender = function(args) {
    if (args.cell.end.getMinutes() > 0)
    {
      args.cell.cssClass = "intrahour";
    }
  };

  dp.init();

</script>

ASP.NET WebForms

protected void DayPilotCalendar1_BeforeCellRender(object sender, BeforeCellRenderEventArgs e)
{
  if (e.Start.Hour >= 13 && e.Start.Hour < 14) {
    e.CssClass = "lunch_time_cell";
  }
}

Customizing the color of intra-hour cell border:

protected void DayPilotCalendar1_BeforeCellRender(object sender, BeforeCellRenderEventArgs e)
{
  if (e.End.Minute > 0)
  {
      e.CssClass = "intrahour";
  }
}

ASP.NET MVC

protected override void OnBeforeCellRender(BeforeCellRenderArgs e)
{
  if (e.Start.Hour >= 13 && e.Start.Hour < 14) {
    e.CssClass = "lunch_time_cell";
  }
}