XSS Protection

JavaScript

Since version 2020.4.4701, the Scheduler includes built-in cross-site scripting (XSS) protection.

The XSS protection is enabled by default (xssProtection property is set to "Enabled").

When enabled, the text strings specified using the API (i.e. supplied by the developer/user and not auto-generated) are HTML-encoded.

Even with XSS protection enabled, you can still define your own HTML - just use *html* instead of *text* (or similar) properties.

Protected Strings

• event text (events.list[].text)

• event version text (events.list[].versions[].text)

• resource name (resources[].name)

• resource column names (rowHeaderColumns[].text)

• resource column values (resources[] properties specified using rowHeaderColumns[].display)

• upper-left corner text (cornerText)

• message text (message(text) method)

• loading label text (loadingLabelText)

• row name provided by the user during inline row editing

• row name provided by the user when creating a new row

• event text provided by the user during inline event editing

Property aliases (such as rowHeaderColumns[].text and rowHeaderColumns[].title) are escaped as well.

Always Protected

The following strings are always escaped, regardless of the xssProtection value:

• DayPilot.Area.text (see DayPilot.Area properties)

• Event text set using DayPilot.Event.text() method

On-Output XSS Protection

All escaping takes place during rendering. The strings provided by the user using interactive controls (e.g. inline editing) are passed to the event handlers in raw form.

Raw HTML

All API elements that include "html" in their name (e.g. cornerHtml, events.list[].html, onBeforeEventRender/args.data.html) are applied without escaping. 

API: onBeforeEventRender.

The event label in these examples contains literal <b> markup. The rendering callback escapes it before adding a trusted Reservation prefix to args.data.html. HTML supplied through this DayPilot property does not pass through Angular, React or Vue template escaping.

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: "<b>Room inspection</b>", resource: "A", start: "2026-11-03", end: "2026-11-06"}],
    onBeforeEventRender: args => { args.data.html = "<strong>Reservation:</strong> " + DayPilot.Util.escapeHtml(args.data.text); }
  };

}

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: "<b>Room inspection</b>", resource: "A", start: "2026-11-03", end: "2026-11-06"}]}
      onBeforeEventRender={args => { args.data.html = "<strong>Reservation:</strong> " + DayPilot.Util.escapeHtml(args.data.text); }}
    />
  </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: "<b>Room inspection</b>", resource: "A", start: "2026-11-03", end: "2026-11-06"}];
const onBeforeEventRender = args => { args.data.html = "<strong>Reservation:</strong> " + DayPilot.Util.escapeHtml(args.data.text); };

</script>

<template>
  <div>

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