html5 javascript scheduler milestones

The Scheduler component can display milestones. Milestones are special events displayed at a specific point in time. They have no duration and the position is centered around the start time.

JavaScript Scheduler

To define a milestone in the JavaScript Scheduler, add an event with type property set to "Milestone".

  • Milestones are marked with *_task_milestone CSS class (e.g. scheduler_default_task_milestone for the default theme).
  • Event resizing is disabled for milestones.
  • The text property is ignored for milestones. You can display custom text next to the milestone icon using htmlRight or htmlLeft properties.

Example = [
    start:  "2022-01-02T00:00:00",
    resource: "A",
    id: 1,
    type: "Milestone",
    htmlRight: "Milestone 1"
  // ...

React Scheduler

In the React Scheduler component, you can display a milestone in the Scheduler grid by adding an event with type: "Milestone".

import React, {Component} from 'react';
import {DayPilot, DayPilotScheduler} from "daypilot-pro-react";
import "./Scheduler.css";

export class Scheduler extends Component {

  constructor(props) {

    this.state = {
      timeHeaders: [{"groupBy":"Month"},{"groupBy":"Day","format":"d"}],
      scale: "Day",
      days: 365,
      startDate: "2022-01-01",
      timeRangeSelectedHandling: "Enabled",
      eventHtmlRightMargin: 0,
      onBeforeEventRender: args => {
        if ( === "Milestone") {
 = DayPilot.Util.escapeHtml(;
      treeEnabled: true,
      // ...

  componentDidMount() {

    // load resource and event data
      resources: [
        {name: "Task A", id: "A"},
        {name: "Task B", id: "B"},
        {name: "Task C", id: "C"},
        {name: "Task D", id: "D"},
      events: [
          id: 1,
          start: "2022-01-02T00:00:00",
          resource: "A",
          type: "Milestone",
          text: "M1"


  render() {
    return (
          ref={component => {
            this.scheduler = component && component.control;


react milestone scheduler component