Displaying overlapping events as a cascade

[Konstantin]

Hello,

I would like to know if it is feasible to customize how overlapping events are laid out in the Scheduler. In particular, if timing of two events overlaps, I would like to display the event boxes as overlapping, not side-by-side.

One example of this layout strategy is implemented in the Bryntum Scheduler. Here is a link to an example that illustrates the different layout options: https://www.bryntum.com/examples/scheduler/vertical/

I understand that this is not an outright option in Syncfusion Scheduler, but is something like this possible to implement? Any tips on how to go about that?

Any feedback would be greatly appreciated.

Thanks!

[Konstantin]

To get more technical, is there a sane way to override/reimplement this method?

[Vengatesh Maniraj]

Hi Konstantin, 

Syncfusion Greetings. 

Based on your requirement we have prepared the below sample by using the dataBound event like the below. 

<template> 

  <div> 

    <div class="col-md-12 control-section"> 

      <div class="content-wrapper"> 

        <ejs-schedule 

          id="Schedule" 

          ref="ScheduleObj" 

          height="650px" 

          :selectedDate="selectedDate" 

          :eventSettings="eventSettings" 

          :dataBound="onDataBound" 

        ></ejs-schedule> 

      </div> 

    </div> 

  </div> 

</template> 

onDataBound: function() { 

      let scheduleObj = this.$refs.ScheduleObj; 

      debugger; 

      if (["Week", "WorkWeek"].indexOf(scheduleObj.ej2Instances.currentView) > -1) { 

        let appointments = scheduleObj.ej2Instances.element.querySelectorAll('.e-appointment'); 

        for(let i= 0; i < appointments.length; i++) { 

            appointments[i].style.width = "100%"; 

            appointments[i].style.left = "0%"; 

        } 

      } 

    } 

Sample link: https://codesandbox.io/s/vue-schedule-overlatping-appointments-6u4fu 

Kindly try the above sample and revert us for any further assistance on this. 

API link(dataBound event): https://ej2.syncfusion.com/vue/documentation/api/schedule/#databound 

Regards, 

Vengatesh 

[Konstantin]

Amazing, thank you! I wouldn’t have thought of this approach.

What would be the easiest way to access corresponding event/appointment data within the dataBound handler to identify start/end time overlaps?

Thanks!

[Vengatesh Maniraj]

Hi Konstantin, 

 

Thanks for the update. 

 

We could access the corresponding event’s start/end overlaps by making use of isSlotAvailable method like below code. Based on that we have prepared the below sample, 

onDataBound: function() { 

      let scheduleObj = this.$refs.ScheduleObj; 

      if (["Week", "WorkWeek"].indexOf(scheduleObj.ej2Instances.currentView) > -1) { 

        let appointments = scheduleObj.ej2Instances.element.querySelectorAll(".e-appointment"); 

        for (let i = 0; i < appointments.length; i++) { 

          let eventData = scheduleObj.getEventDetails(appointments[i]); 

          if (!scheduleObj.isSlotAvailable(eventData)) { 

            console.log("Slot is not available for the below Appointment"); 

            console.log(eventData); 

          } 

          appointments[i].style.width = "100%"; 

          appointments[i].style.left = "0%"; 

        } 

      } 

    } 

Sample: https://codesandbox.io/s/vue-schedule-overlatping-appointments-skqnd 

Kindly try the above sample and revert us for further assistance on this. 

API link (getEventDetails)             : https://ej2.syncfusion.com/vue/documentation/api/schedule/#geteventdetails 

API link (isSlotAvailable)                : https://ej2.syncfusion.com/vue/documentation/api/schedule/#isslotavailable 

Regards, 

Vengatesh 

[Konstantin]

Thanks you!

[Vengatesh Maniraj]

Hi Konstantin,  

  

You are most welcome😊 

Regards, 

Vengatesh 

[Michael Hebert]

Can the same overlapping of events be done in the Timeline views with resources?

Thanks!

[Satheesh Kumar Balasubramanian]

Hi Michael,

Yes, you can achieve overlapping of events in the TimeLine views with resources using below code snippets.

https://codesandbox.io/s/vue-schedule-overlatping-appointments-forked-6szs78?file=/src/App.vue

App.vue

    onDataBound: function () {

      let scheduleObj = this.$refs.ScheduleObj;

      if (["TimelineDay"].indexOf(scheduleObj.ej2Instances.currentView) > -1) {

        let appointments = scheduleObj.ej2Instances.element.querySelectorAll(

          ".e-appointment"

        );

        for (let i = 0; i < appointments.length; i++) {

          let eventData = scheduleObj.getEventDetails(appointments[i]);

          if (!scheduleObj.isSlotAvailable(eventData)) {

            console.log("Slot is not available for the below Appointment");

            console.log(eventData);

          }

          let dataGroupIndex = scheduleObj.getIndexFromResourceId(

            eventData.OwnerId

          );

          let offSetTop = scheduleObj.$el.querySelector(

            '[data-group-index="' + dataGroupIndex + '"]'

          ).offsetTop;

          let top = offSetTop + 2;

          appointments[i].style.top = top.toString() + "px";

        }

      }

    },

Regards,

Satheesh Kumar B