Event End Date/Time

By default, the JavaScript Scheduler component works with exact time points for both the event start and end. A one-day event looks like this:

• start: "2027-01-01T00:00:00"

• end: "2027-01-02T00:00:00"

The same logic is used for time range selecting.

You can switch the Scheduler to treat the end date as date-only value using the eventEndSpec property. With this value set to "Date", the end date will be interpreted as "the end of the specified day":

• start: "2027-01-01T00:00:00"

• end: "2027-01-01T00:00:00"

JavaScript

Example:

const scheduler = new DayPilot.Scheduler("scheduler", {
  eventEndSpec: "Date",
  // ...
});
scheduler.init();

const resources = [ { name: "Resource 1", id: "R1" } ];
const events = [ { text: "One-Day Event", id: "1", start: "2027-01-01", end: "2027-01-01", resource: "R1"} ];
scheduler.update({resources, events});

See also:

• DayPilot.Scheduler.eventEndSpec property

API: eventEndSpec.

The framework examples explicitly use eventEndSpec: "DateTime". Their reservation occupies November 3, 4 and 5 and ends at midnight at the start of November 6.

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: "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: "Three days", resource: "A", start: "2026-11-03", end: "2026-11-06"}],
    eventEndSpec: "DateTime"
  };

}

React

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

export default function SchedulerExample() {

  return <div>

    <DayPilotScheduler
      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: "Three days", resource: "A", start: "2026-11-03", end: "2026-11-06"}]}
      eventEndSpec={"DateTime"}
    />
  </div>;
}

Vue

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

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: "Three days", resource: "A", start: "2026-11-03", end: "2026-11-06"}];
const eventEndSpec = "DateTime";

</script>

<template>
  <div>

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

<DayPilot:DayPilotScheduler
  ...
  EventEndSpec="Date"
/>