Cell Customization

You can customize the cell properties in the JavaScript Calendar component using the onBeforeCellRender event handler.

• Business status

• Background color

• Text/HTML

• CSS class

• Active areas

See also highlighting today.

JavaScript

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