Event Customization - JavaScript Scheduler

The appearance and behavior of the event boxes can be customized. This includes properties such as:

• HTML
• CSS class
• dimensions
• background color
• duration bar color
• duration bar background
• event actions (moving, resizing, clicking, etc.)
• event bubble (hover detail box)
• event active areas

You can use the customization options to apply the business logic:

• Use different colors for event types
• Disabling drag and drop operations if the user doesn't have sufficient permissions
• Highlighting events in a conflicting state
• Add custom action icons

Read more about event customization [doc.daypilot.org].

Examples

Event properties in the JSON data source:

dp.events.list = [
  {
    start: "2013-03-02T12:00:00",
    end: "2013-03-05T12:00:00",
    id: 1,
    resource: "A",
    text: "Event 1",
    moveDisabled: true,
    clickDisabled: true,
    bubbleHtml: "Moving of this event is disabled",
    barColor = "#9a0";
    barBackColor = "#ac0";
    areas = [{html:"Disabled", right: 2, bottom: 2}];
  },
  {
    start: "2013-03-01T00:00:00",
    end: "2013-03-06T00:00:00",
    id: 2,
    resource: "B",
    text: "Event 1"
  }
];

Event properties customized in the application using onBeforeEventRender event:

dp.events.list = [
  {
    start: "2013-03-02T12:00:00",
    end: "2013-03-05T12:00:00",
    id: 1,
    resource: "A",
    text: "Event 1",
    type: "disabled"
  },
  {
    start: "2013-03-01T00:00:00",
    end: "2013-03-06T00:00:00",
    id: 2,
    resource: "B",
    text: "Event 1"
  }
];

dp.onBeforeEventRender = function(args) {
  if (args.e.type === "disabled") {
    //args.e.cssClass = "disabled";
    args.e.barColor = "#9a0";
    args.e.barBackColor = "#ac0";
    args.e.moveDisabled = true;
    args.e.bubbleHtml = "Moving of this event is disabled.";
    args.e.areas = [{html:"Disabled", right: 2, bottom: 2}];
  }
};