How to get the event div position in daypilot

Asked by uzzal
16 days ago.

I am using daypilot calendar scheduler. I want, when i click an event a pop up box come near of it left align. For this i need its div position on the browser. How can i get it?. The things i want is concept of google calendar. I want to implement their viewing, editing and deleting event features. this is my event click function inside calendar object. I tried the method we use in java script, but it is not working. I tried writing html in modal. its also not work as i trying to do.

onEventClick: async function (args) {

    const eventData = args.e.data;
    console.log(eventData);
}

how-to modal

Answer posted by Dan Letecky [DayPilot]
16 days ago.

You can mark the event div with a custom attribute using the onAfterEventRender event handler:

onAfterEventRender: args => {
  args.div.dataset.eventId = args.e.data.id;
}

Than you can get the event position using getBoundingClientRect() in the onEventClick handler:

onEventClick: args => {
  const id = args.e.data.id;
  const eventDiv = document.querySelector(`div[data-event-id="${id}"]`);
  const rect = eventDiv?.getBoundingClientRect();
  // ...
}

How to get the event div position in daypilot

Products

Learn

Get Support

DayPilot Pro