javascript scheduler event types

You can define your own event types and customize the event depending on the type.

The Scheduler doesn't define any built-in types but you can add custom property with the event type value and change the event appearance accordingly.

JavaScript

Example

In this example, the event type is stored in tags.type property:

dp.events.list = [
  {
    id: 1,
    text: "Event 1",
    start: "2022-03-05T00:00:00",
    end: "2022-03-09T00:00:00",
    resource: "R2",
    tags: {
      type: "standard"
    }
  },
  {
    id: 2,
    text: "Event 2",
    start: "2022-03-07T00:00:00",
    end: "2022-03-15T00:00:00",
    resource: "R4",
    tags: {
      type: "important"
    }
  },
];

Event customization:

const dp = new DayPilot.Scheduler("dp", {

  // ...

  onBeforeEventRender: args => {
    const type = args.data.tags && args.data.tags.type;
    switch (type) {
      case "standard":
        args.data.barColor = "#38761d";
        break;
      case "important":
        args.data.barColor = "#cc0000";
        break;
    }
  },

  // ...

});

Tutorial