Highlighting Today

You can use BeforeCellRender event to highlight the current day. See also cell customization.

JavaScript

dp.onBeforeCellRender = function(args) {
  if (args.cell.start <= DayPilot.Date.today() && DayPilot.Date.today() < args.cell.end) {
      args.cell.backColor = "#ffcccc";
  }
};

API: onBeforeCellRender.

The examples find today's cell using an interval comparison: start <= today && end > today. Comparing date object identity would not establish that a cell contains today.

The framework examples use DayPilot Pro. For installation, see the Angular, React or Vue Scheduler guide.

Angular

import {Component} from "@angular/core";
import {DayPilot, DayPilotModule} from "daypilot-pro-angular";

@Component({
  selector: "app-scheduler-example",
  standalone: true,
  imports: [DayPilotModule],
  template: `
    
    <daypilot-scheduler [config]="config"></daypilot-scheduler>
  `
})
export class SchedulerExampleComponent {
  config: DayPilot.SchedulerConfig = {
    startDate: DayPilot.Date.today().firstDayOfMonth(),
    days: DayPilot.Date.today().daysInMonth(),
    scale: "Day",
    timeHeaders: [{groupBy: "Month"}, {groupBy: "Day", format: "d"}],
    resources: [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}],
    events: [],
    onBeforeCellRender: args => { const today = DayPilot.Date.today(); if (args.cell.start <= today && args.cell.end > today) { args.cell.properties.backColor = "#fff2cc"; } }
  };

}

React

import React from "react";
import {DayPilot, DayPilotScheduler} from "daypilot-pro-react";

export default function SchedulerExample() {

  return <div>

    <DayPilotScheduler
      startDate={DayPilot.Date.today().firstDayOfMonth()}
      days={DayPilot.Date.today().daysInMonth()}
      scale={"Day"}
      timeHeaders={[{groupBy: "Month"}, {groupBy: "Day", format: "d"}]}
      resources={[{id: "A", name: "Room A"}, {id: "B", name: "Room B"}]}
      events={[]}
      onBeforeCellRender={args => { const today = DayPilot.Date.today(); if (args.cell.start <= today && args.cell.end > today) { args.cell.properties.backColor = "#fff2cc"; } }}
    />
  </div>;
}

Vue

<script setup>
import {DayPilot, DayPilotScheduler} from "daypilot-pro-vue";

const startDate = DayPilot.Date.today().firstDayOfMonth();
const days = DayPilot.Date.today().daysInMonth();
const scale = "Day";
const timeHeaders = [{groupBy: "Month"}, {groupBy: "Day", format: "d"}];
const resources = [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}];
const events = [];
const onBeforeCellRender = args => { const today = DayPilot.Date.today(); if (args.cell.start <= today && args.cell.end > today) { args.cell.properties.backColor = "#fff2cc"; } };

</script>

<template>
  <div>

    <DayPilotScheduler
      :startDate="startDate"
      :days="days"
      :scale="scale"
      :timeHeaders="timeHeaders"
      :resources="resources"
      :events="events"
      :onBeforeCellRender="onBeforeCellRender"
    />
  </div>
</template>

protected void DayPilotScheduler1_BeforeCellRender(object sender, DayPilot.Web.Ui.Events.BeforeCellRenderEventArgs e)
{
  if (e.Start.Date == DateTime.Today)
  {
    e.BackgroundColor = "silver";
  }
}

protected override void OnBeforeCellRender(BeforeCellRenderArgs e)
{
  if (e.Start.Date == DateTime.Today)
  {
    e.BackgroundColor = "silver";
  }
}