Cell Customization

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

Use onBeforeCellRender event to customize the cell properties.

Applying a custom CSS class to lunch break cells:

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:

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

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

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

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