Features

  • Use event versions feature to display custom text above events in the JavaScript Scheduler

  • Requires DayPilot Pro for JavaScript 2020.1.4183 or later

  • Includes a trial version of DayPilot Pro for JavaScript (see License below)

License

Licensed for testing and evaluation purposes. Please see the license agreement included in the sample project. You can use the source code of the tutorial if you are a licensed user of DayPilot Pro for JavaScript.

Live Demo

JavaScript Scheduler Setup

javascript scheduler setup

The easiest way to start a new project with JavaScript Scheduler component is to use the online UI Builder tools. It will let you customize the properties with a live preview and generate a new project with all the required boilerplate.

Enable Event Versions in the Scheduler

The next step is to add eventVersionsEnabled: true to the Scheduler configuration in order to enable event versions. Event versions are normally used to display a previous version (or versions) of the event so the users can see the difference between the original plan and the current project status.

The versions are displayed in a reserved space above (or below) events. That allows us to use them to display additional information related to the event, without affecting other events or the drag and drop functionality. 

const dp = new DayPilot.Scheduler("dp", {
  // ...
  eventVersionsEnabled: true,
});

Add a Sample Event to the Scheduler

javascript scheduler text above sample event

Let's add a sample event to the Scheduler: 

      const events = [
        {
          id: 1,
          start: this.monthStart.addDays(5),
          end: this.monthStart.addDays(9),
          text: "Event 1",
          resource: "R1",
        },
      ];

This event will be displayed in the "Resource 1" row in a standard way.

The sample uses the current month so the event stays visible when you open the project.

Define an Event Version

javascript scheduler event version above event

In order to display an event version, we need to add a versions property to the event data object. You can add it directly to the source data (events.list) but the data is usually loaded from the server and it's much easier to add the version on the client side using onBeforeEventRender event handler. 

    onBeforeEventRender: (args) => {
      const version = {
        start: args.data.start,
        end: args.data.end,
      };

      args.data.versions = [version];
    },

We define just two properties, start and end. They have the same values as the original event to ensure that the version will be displayed at the same horizontal position.

Add Text to the Version Box

javascript scheduler event version with text above

Now we can add the text property to display an actual content. The following example uses a formatted start date. 

    onBeforeEventRender: (args) => {
      const version = {
        start: args.data.start,
        end: args.data.end,
      };

      args.data.versions = [version];
      version.text = args.data.start.toString("MMMM d, yyyy");
    },

Version Box Styling

javascript scheduler text above event

The previous examples displayed the event version using the default theme which uses a striped background. We want to use a simple transparent background to hide the actual box and leave just the plain text.

Overriding the default style: 

    onBeforeEventRender: (args) => {
      const version = {
        start: args.data.start,
        end: args.data.end,
      };

      args.data.versions = [version];
      version.text = args.data.start.toString("MMMM d, yyyy");
      Object.assign(version, {
        backColor: "transparent",
        borderColor: "transparent",
        barHidden: true,
      });
    },

This uses the built-in version properties (backColor, borderColor, barHidden), so the styling remains part of the Scheduler model and is respected during image export.

It's also possible to adjust the appearance by overriding the CSS theme: 

<style>
  .scheduler_default_event_version.scheduler_default_event .scheduler_default_event_inner {
    background: transparent;
    border: 0px none;
  }
  .scheduler_default_event_version.scheduler_default_event .scheduler_default_event_bar {
    display: none;
  }
</style>

Full Source Code 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>JavaScript Scheduler: Displaying Text above Events</title>

  <style type="text/css">
    p, body, td, input, select, button { font-family: -apple-system,system-ui,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; font-size: 14px; }
    body { padding: 0px; margin: 0px; background-color: #ffffff; }
    a { color: #1155a3; }
    .space { margin: 10px 0px 10px 0px; }
    .header { background: #003267; background: linear-gradient(to right, #011329 0%,#00639e 44%,#011329 100%); padding:20px 10px; color: white; box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.75); }
    .header a { color: white; }
    .header h1 a { text-decoration: none; }
    .header h1 { padding: 0px; margin: 0px; }
    .main { padding: 10px; margin-top: 10px; }
    .generated { color: #999; }
    .generated a { color: #999; }
  </style>

  <!-- DayPilot library -->
  <script src="js/daypilot/daypilot-all.min.js"></script>
</head>
<body>
<div class="header">
  <h1><a href='https://code.daypilot.org/21607/javascript-scheduler-displaying-text-above-events'>JavaScript Scheduler: Displaying Text above Events</a></h1>
  <div><a href="https://javascript.daypilot.org/">DayPilot for JavaScript</a> - HTML5 Calendar/Scheduling Components for JavaScript/Angular/React/Vue</div>
</div>

<div class="main">
  <div id="dp"></div>
  <div class="generated">Generated using <a href="https://builder.daypilot.org/">DayPilot UI Builder</a>.</div>
</div>

<script>
  const app = {
    monthStart: DayPilot.Date.today().firstDayOfMonth(),
    init() {
      const resources = [
        { name: "Resource 1", id: "R1" },
        { name: "Resource 2", id: "R2" },
        { name: "Resource 3", id: "R3" },
        { name: "Resource 4", id: "R4" },
        { name: "Resource 5", id: "R5" },
        { name: "Resource 6", id: "R6" },
        { name: "Resource 7", id: "R7" },
        { name: "Resource 8", id: "R8" },
        { name: "Resource 9", id: "R9" },
      ];

      const events = [
        {
          id: 1,
          start: this.monthStart.addDays(5),
          end: this.monthStart.addDays(9),
          text: "Event 1",
          resource: "R1",
        },
      ];

      dp.update({
        resources,
        events,
      });
    },
  };

  const dp = new DayPilot.Scheduler("dp", {
    scale: "Day",
    days: app.monthStart.daysInMonth(),
    startDate: app.monthStart,
    rowHeaderWidth: 100,
    timeHeaders: [
      { groupBy: "Month" },
      { groupBy: "Day", format: "d" },
    ],
    treeEnabled: true,
    eventVersionsEnabled: true,
    onBeforeEventRender: (args) => {
      const version = {
        start: args.data.start,
        end: args.data.end,
      };

      args.data.versions = [version];
      version.text = args.data.start.toString("MMMM d, yyyy");
      Object.assign(version, {
        backColor: "transparent",
        borderColor: "transparent",
        barHidden: true,
      });
    },
  });
  dp.init();

  app.init();
</script>

</body>
</html>

History

  • April 14, 2026: Refreshed the sample to the current JavaScript builder template, updated the code to modern JavaScript, and switched the example event to current-month dates so the sample stays visible when opened later.