Highlighting Current Time

JavaScript

Builds 1748 and later support partial .update(). You can use it to add a sliding separator:

let slidingTimeout;
function showCurrentTime() {
  clearInterval(slidingTimeout);
  const update = () => {
    const separators = [];
    separators.push({location: DayPilot.Date.now(), color: "red", currentTime: true});
    dp.update({separators});
  };
  update();
  slidingTimeout = setInterval(update, 60000);
}
function hideCurrentTime() {
  clearInterval(slidingTimeout);
  dp.update({separators: []});
}

If there are other (static) separators in use you can mark the current-time indicator with a special property (the example below uses "currentTime" property) and copy the static separators during update:

let slidingTimeout;
function showCurrentTime() {
  clearInterval(slidingTimeout);
  const update = () => {
    const separators = dp.separators.filter(separator => !separator.currentTime);
    separators.push({location: DayPilot.Date.now(), color: "red", currentTime: true});
    dp.update({separators});
  };
  update();
  slidingTimeout = setInterval(update, 60000);
}
function hideCurrentTime() {
  clearInterval(slidingTimeout);
  dp.update({separators: dp.separators.filter(separator => !separator.currentTime)});
}

API: separators.

The examples display the current time immediately and refresh the separator every minute. Each update replaces the separator collection; use the earlier preservation approach if the schedule also contains static separators.

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

Angular

Start the timer in ngAfterViewInit(), once the @ViewChild Scheduler control is available. Store its handle and clear it in ngOnDestroy().

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

@Component({
  selector: "app-scheduler-example",
  standalone: true,
  imports: [DayPilotModule],
  template: `
    
    <daypilot-scheduler [config]="config" #scheduler></daypilot-scheduler>
  `
})
export class SchedulerExampleComponent implements AfterViewInit, OnDestroy {
  @ViewChild("scheduler") scheduler!: DayPilotSchedulerComponent;
  config: DayPilot.SchedulerConfig = {
    startDate: DayPilot.Date.today(),
    days: 1,
    scale: "Hour",
    timeHeaders: [{groupBy: "Day"}, {groupBy: "Hour"}],
    resources: [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}],
    events: [],
    separators: [{location: DayPilot.Date.now(), color: "#dc2626", width: 2}]
  };

  private timer?: ReturnType<typeof setInterval>;
  ngAfterViewInit() {
    const dp = this.scheduler.control;
    this.timer = setInterval(() => dp.update({separators: [{location: DayPilot.Date.now(), color: "#dc2626", width: 2}]}), 60000);
  }
  ngOnDestroy() { clearInterval(this.timer); }
}

React

Use controlRef to retain the Scheduler API and create the interval inside useEffect. Return clearInterval cleanup so disposing the effect stops further updates.

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

export default function SchedulerExample() {
  const scheduler = useRef(null);
  useEffect(() => {
    const timer = setInterval(() => scheduler.current?.update({separators: [{location: DayPilot.Date.now(), color: "#dc2626", width: 2}]}), 60000);
    return () => clearInterval(timer);
  }, []);

  return <div>

    <DayPilotScheduler
      controlRef={control => { scheduler.current = control; }}
      startDate={DayPilot.Date.today()}
      days={1}
      scale={"Hour"}
      timeHeaders={[{groupBy: "Day"}, {groupBy: "Hour"}]}
      resources={[{id: "A", name: "Room A"}, {id: "B", name: "Room B"}]}
      events={[]}
      separators={[{location: DayPilot.Date.now(), color: "#dc2626", width: 2}]}
    />
  </div>;
}

Vue

Access the Scheduler through a template ref, start the interval in onMounted() and clear it in onUnmounted().

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

const scheduler = ref(null);
const startDate = DayPilot.Date.today();
const days = 1;
const scale = "Hour";
const timeHeaders = [{groupBy: "Day"}, {groupBy: "Hour"}];
const resources = [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}];
const events = [];
const separators = [{location: DayPilot.Date.now(), color: "#dc2626", width: 2}];

let timer;
onMounted(() => { timer = setInterval(() => scheduler.value.control.update({separators: [{location: DayPilot.Date.now(), color: "#dc2626", width: 2}]}), 60000); });
onUnmounted(() => clearInterval(timer));
</script>

<template>
  <div>

    <DayPilotScheduler ref="scheduler"
      :startDate="startDate"
      :days="days"
      :scale="scale"
      :timeHeaders="timeHeaders"
      :resources="resources"
      :events="events"
      :separators="separators"
    />
  </div>
</template>