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

dp.events.list = [
  {
    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) {
    super(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 (args.data.type === "Milestone") {
          args.data.htmlRight = DayPilot.Util.escapeHtml(args.data.text);
        }
      },
      treeEnabled: true,
      // ...
    };
  }

  componentDidMount() {

    // load resource and event data
    this.setState({
      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 (
      <div>
        <DayPilotScheduler
          {...this.state}
          ref={component => {
            this.scheduler = component && component.control;
          }}
        />
      </div>
    );
  }
}

Tutorial

react milestone scheduler component