Automatic Event Refresh (AutoRefresh)

DayPilot Scheduler allows automatic event reloading (in specified intervals).

AutoRefresh is disabled by default. You can enable it using AutoRefreshEnabled property.

If enabled, AutoRefresh will fire Command event on the server side with the value of AutoRefreshCommand as the command name.

Configuration properties:

• AutoRefreshEnabled (bool)

• AutoRefreshInterval (int) - number of seconds between automatic reloads

• AutoRefreshMaxCount (int) - maximum number of automatic reloads

• AutoRefreshCommand (string) - a command value that will be passed to Command event when requesting a reload

AutoRefresh is paused automatically during drag and drop operations (event moving, resizing, time range selecting, row moving, etc.).

JavaScript

If enabled using autoRefreshEnabled property, it will fire onAutoRefresh event in the specified intervals.

dp.autoRefreshInterval = 10; 
dp.autoRefreshMaxCount = 10;
dp.autoRefreshEnabled = true;

dp.onAutoRefresh = function(args) { 
  dp.events.load("/getEvents");
};

Use .autoRefreshPause() and .autoRefreshStart() to pause and resume the autorefresh during long UI interactions, such as a modal dialog (available since build 8.1.1760).

See also .events.load() method.

API: autoRefreshEnabled, autoRefreshInterval, autoRefreshMaxCount.

The examples reload events every 30 seconds for up to 120 refreshes. The application endpoint must return a JSON event array; its error callback reports a failed reload.

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

Angular

The onAutoRefresh config callback calls events.load() through the @ViewChild Scheduler control.

import {Component, ViewChild} 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 {
  @ViewChild("scheduler") scheduler!: DayPilotSchedulerComponent;
  config: DayPilot.SchedulerConfig = {
    startDate: "2026-11-01",
    days: 30,
    scale: "Day",
    timeHeaders: [{groupBy: "Month"}, {groupBy: "Day", format: "d"}],
    resources: [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}],
    events: [{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}],
    autoRefreshEnabled: true,
    autoRefreshInterval: 30,
    autoRefreshMaxCount: 120,
    onAutoRefresh: args => { this.scheduler.control.events.load("/api/events?start=2026-11-01&end=2026-12-01", () => {}, () => { DayPilot.Modal.alert("Could not reload reservations."); }); }
  };

}

React

Retain the Scheduler API using controlRef and use that ref in the onAutoRefresh function prop.

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

export default function SchedulerExample() {
  const scheduler = useRef(null);

  return <div>

    <DayPilotScheduler
      controlRef={control => { scheduler.current = control; }}
      startDate={"2026-11-01"}
      days={30}
      scale={"Day"}
      timeHeaders={[{groupBy: "Month"}, {groupBy: "Day", format: "d"}]}
      resources={[{id: "A", name: "Room A"}, {id: "B", name: "Room B"}]}
      events={[{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}]}
      autoRefreshEnabled={true}
      autoRefreshInterval={30}
      autoRefreshMaxCount={120}
      onAutoRefresh={args => { scheduler.current.events.load("/api/events?start=2026-11-01&end=2026-12-01", () => {}, () => { DayPilot.Modal.alert("Could not reload reservations."); }); }}
    />
  </div>;
}

Vue

Bind :onAutoRefresh to the script function, which reloads events through scheduler.value.control.

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

const scheduler = ref(null);
const startDate = "2026-11-01";
const days = 30;
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 = [{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}];
const autoRefreshEnabled = true;
const autoRefreshInterval = 30;
const autoRefreshMaxCount = 120;
const onAutoRefresh = args => { scheduler.value.control.events.load("/api/events?start=2026-11-01&end=2026-12-01", () => {}, () => { DayPilot.Modal.alert("Could not reload reservations."); }); };

</script>

<template>
  <div>

    <DayPilotScheduler ref="scheduler"
      :startDate="startDate"
      :days="days"
      :scale="scale"
      :timeHeaders="timeHeaders"
      :resources="resources"
      :events="events"
      :autoRefreshEnabled="autoRefreshEnabled"
      :autoRefreshInterval="autoRefreshInterval"
      :autoRefreshMaxCount="autoRefreshMaxCount"
      :onAutoRefresh="onAutoRefresh"
    />
  </div>
</template>

<DayPilot:DayPilotScheduler 
  ID="DayPilotScheduler1" 
  runat="server" 
  ...
  OnCommand="DayPilotScheduler1_Command" 
  AutoRefreshEnabled="true"
  AutoRefreshInterval="10"
  AutoRefreshMaxCount="12"
  />

protected void DayPilotScheduler1_Command(object sender, DayPilot.Web.Ui.Events.CommandEventArgs e)
{
  switch (e.Command)
  {
      case "refresh":
          setDataSourceAndBind();
          DayPilotScheduler1.DataBind();
          DayPilotScheduler1.UpdateWithMessage("Events refreshed automatically");
          break;
      default:
          throw new Exception("Unknown command.");

  }
}

@Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig()
{
  BackendUrl = ResolveUrl("~/Scheduler/Backend"),
  ...
  AutoRefreshEnabled = true,
  AutoRefreshInterval = 10,
  AutoRefreshMaxCount = 5
})

protected override void OnCommand(CommandArgs e)
{
  switch (e.Command)
  {
      case "refresh":
          UpdateWithMessage("Refreshed");
          break;
  }
}

protected override void OnFinish()
{
  // only load the data if an update was requested by an Update() call
  if (UpdateType == CallBackUpdateType.None)
  {
      return;
  }

  DateTime start = StartDate;
  DateTime end = StartDate.AddDays(Days + 1);

  Events = new EventManager(Controller).FilteredData(start, end).AsEnumerable();  // your method for loading events

  DataStartField = "start";
  DataEndField = "end";
  DataTextField = "text";
  DataIdField = "id";
  DataResourceField = "resource";
}