3 scheduler views with interaction

[Teo]

Hi,

I am trying to rebuild a planning interface which is made of 3 vertically stacked schedule views that are in timeline view, the first is 2 weeks before today, current week and the next week, the second scheduler shows 3-7 weeks after the current and the third 8-12 weeks. That interface is made with Dx scheduler and supports drag and drop between the schedulers. 

Putting 3 schedulers on top of eachother is not hard but I wonder: is there a way to have the 3 views allow drag and drop between them and is there a piece of code to view?

Thanks in advance for any help!

[Vengatesh Maniraj]

Hi Teo,

Yes. You can drag and drop between 3 schedulers by making use of the appointmentDragArea property, dragStart, and dragStop events.

Please refer to the below sample.

https://jsplayground.syncfusion.com/hn1a42fu

Kindly refer to the above sample and get back to us if you need any further assistance.

Regards,

Vengatesh

[Teo]

Hi Vengatesch,

Thank you for your time and reply.

That works okay so thank you for pointing me in the right direction!

There is another thing though: In the original scheduler (the one I'm copying) 5 weeks are visible and the scheduler shows 2 rows in the header: the first month and year, the second is the date. I have found the https://www.syncfusion.com/kb/9723/how-to-show-week-number-and-month-name-for-custom-view-range ticket.

 That works fine with one scheduler. However: I have copied the functions and changed the function name and corrected the name of the scheduler instance. But only the selected scheduler gets a nice header.

Is there a way to paint the header for all 3 instances?

Thanks in advance for helping.

[Vengatesh Maniraj]

Hi Teo,

You are most welcome and thank you for the update!!!

We have checked the requirement and we would suggest getting the scheduler instances like below to achieve your requirement.

    function onCreate(args) {

      console.log(this.element[0].id); // this.element[0].id will return the current scheduler instances.

      var obj = $(this.element[0].id).data("ejSchedule");      

      // You can do your modified functionality here based on your requirement.

    }

Kindly try the above solution and if you still face the problem, please share with us the code snippet of the modified function to check and provide the prompt solution earlier.

Regards,

Vengatesh