{
  timeHeaders: [
    {
      groupBy: "Month",
    },
    {
      groupBy: "Day",
      format: "d",
    },
  ],
  scale: "Day",
  days: DayPilot.Date.today().daysInMonth(),
  startDate: DayPilot.Date.today().firstDayOfMonth(),
  timeRangeSelectedHandling: "Enabled",
  onTimeRangeSelected: async (args) => {
    const scheduler = args.control;
    const modal = await DayPilot.Modal.prompt("Create a new event:", "Event 1");
    scheduler.clearSelection();
    if (modal.canceled) { return; }
    scheduler.events.add({
      start: args.start,
      end: args.end,
      id: DayPilot.guid(),
      resource: args.resource,
      text: modal.result
    });
  },
  eventMoveHandling: "Update",
  onEventMoved: (args) => {
    console.log("Event moved: " + args.e.text());
  },
  eventResizeHandling: "Update",
  onEventResized: (args) => {
    console.log("Event resized: " + args.e.text());
  },
  eventDeleteHandling: "Update",
  onEventDeleted: (args) => {
    console.log("Event deleted: " + args.e.text());
  },
  eventClickHandling: "Disabled",
  eventHoverHandling: "Bubble",
  bubble: new DayPilot.Bubble({
    onLoad: (args) => {
      // if the event object doesn't specify "bubbleHtml" property
      // this onLoad handler will be called to provide the bubble HTML
      args.html = "Event details";
    }
  }),
  treeEnabled: true,
}

[
  {
    "name": "Group 1",
    "id": "G1",
    "expanded": true,
    "children": [
      {
        "name": "Resource 1",
        "id": "R1"
      },
      {
        "name": "Resource 2",
        "id": "R2"
      }
    ]
  },
  {
    "name": "Group 2",
    "id": "G2",
    "expanded": true,
    "children": [
      {
        "name": "Resource 3",
        "id": "R3"
      },
      {
        "name": "Resource 4",
        "id": "R4"
      }
    ]
  }
]

[
  {
    "id": 1,
    "resource": "R1",
    "start": "2025-06-04T00:00:00",
    "end": "2025-06-08T00:00:00",
    "text": "Event 1"
  },
  {
    "id": 2,
    "resource": "R1",
    "start": "2025-06-12T00:00:00",
    "end": "2025-06-16T00:00:00",
    "text": "Event 2"
  }
]