Continuous Events

Events that start or end in hidden areas are marked with *_event_continueleft and *_event_continueright classes.

This lets you display the events start/end with different styling to make it clear that the event continues in the hidden area.

Example from scheduler_white theme:

.scheduler_white_event_continueright .scheduler_white_event_inner {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-right-style: dotted;
}
.scheduler_white_event_continueleft .scheduler_white_event_inner 
{
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-left-style: dotted;
}

See Also

• http://kb.daypilot.org/62119/list-of-css-classes-used-in-cssonly-mode-scheduler/

API: events.list, resources.

The example task extends beyond both ends of November, exposing the continuation classes at its clipped edges. For the default theme used below, change the CSS prefix in the earlier rule from scheduler_white to scheduler_default.

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

Angular

Put the continuation rules in the application's global stylesheet so they reach the Scheduler-generated elements.

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: "Long project", resource: "A", start: "2026-10-20", end: "2026-12-10"}]
  };

}

React

Load the continuation CSS with the application's other global styles; the event dates are supplied through the events prop.

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: "Long project", resource: "A", start: "2026-10-20", end: "2026-12-10"}]}
    />
  </div>;
}

Vue

Use an unscoped stylesheet for the continuation classes. The example's events collection is bound directly to the Scheduler.

<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: "Long project", resource: "A", start: "2026-10-20", end: "2026-12-10"}];

</script>

<template>
  <div>

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

ASP.NET MVC

• http://mvc.daypilot.org/demo/Scheduler/CssContinue