Swap DayScale / TimeScale in Scheduler component

[Vinh Phan]

Hello,

is it possible to swap the Day- /TimeScale in the Scheduler component, i.e. the TimeScale will be horizontal and DateScale will be vertical. It is like another view in which the appointments for a date are now arranged horizontally instead of vertically.

Also, is it possible to multi-select and multi-drag-drop appointments, and "zoom" into the timeslot by mousewheel, i.e. the  TimeScale will be displayed more fine granular (zoom down to 5 minute interval).

My customer absolutely wants those features.

[Ravikumar Venkatesan]

Hi Vinh, 

Greetings from Syncfusion support. 

Q1: Swap Timescale and Date header 

We have checked the possibility, but regret to let you know this is not feasible with our scheduler's current architecture. 

Q2: Multi select and Multi drag and drop appointments 

We have already logged the multiple drag and drop of appointments as feature request. You can find the details in the below feedback link. 

Feedback: https://www.syncfusion.com/feedback/5147/drag-multiple-events-on-the-scheduler-at-the-same-time 

Q3: We have created a sample for zoom the timescale slot count when perform mouse scroll like the below. 

  constructor() { 

    super(...arguments); 

    window.addEventListener("wheel", event => { 

      const delta = Math.sign(event.deltaY); 

      if (delta > 0 && this.scheduleObj.timeScale.slotCount > 1) { 

        this.scheduleObj.timeScale.slotCount -= 1; 

      } else if (delta < 0 && this.scheduleObj.timeScale.slotCount <= 11) { 

        this.scheduleObj.timeScale.slotCount += 1; 

      } 

    }); 

  } 

Sample: https://stackblitz.com/edit/react-scheduler-mouse-wheel-zoom-in-and-zoom-out-gprdcc?file=index.js 

Kindly try the above sample and get in touch with us If you would need any further assistance. 

Regards, 

Ravikumar Venkatesan 

[Vinh Phan]

Hello Ravikumar,

thank you for the clarification. I have some thoughts on the previous questions:

Q1: Swapping Time/Date scale:

This feature would be quite similar to the Timeline Week view.  In this view, the Time Scale is already horizontal, but also is the Date Scale, which is positioned above the Time Scale. Is there really no solution to move this Date Scale to vertically to the left?

Q2: It'd be nice if we can customize the behavior of the Multi Drag-drop, i.e the dropped events will be either moved/cloned. Is there a roadmap for this feature?

Q3: Thanks for the code snippet. Very helpful

Q4: Is there a way to implement a status indicator, which indicates  the filling degree of a day, i.e. how busy that day is, if a date is filled with events (not necessarily all 24 hours, but only the custom-defined working hours e.g. from 08AM - 05PM) with no more free slot left, then the status indicator would show 100% with the color green, otherwise would show the according percentage with another color (yellow for example).

Q5: Is it possible for events to overlap? If yes then is there a way to implement an alert for overlapping events into the Filling status indicator in Q4) , for example by showing it with a Red color?

Thanks a lot

[Ravikumar Venkatesan]

Hi Vinh, 

Thanks for the update. 

Q1: Yes, Currently there is no possibilities to move the date header to vertical alignment. 

Q2: Currently we don’t have any roadmap for Multi select and Multi drag and drop appointments feature. 

Q3: You are most welcome 😊. 

Q4 & Q5: We have checked the possibility at our source end, but regret to let you know this is not feasible with our Scheduler. 

Contact us if you need further assistance. 

Regards, 

Ravikumar Venkatesan 

[Vinh Phan]

Hello Ravikumar,

Thank you for the prompt reply.

Regarding Q1, is it at least possible to implement a new View for the scheduler? Because for the axis-swapping it would be equal to a new View.

Regarding Q2, is there an example implementation / code snippe for the Multi-drag drop that i can refer to?

Thank you again for your support!

[Vengatesh Maniraj]

Hello Ravikumar,

Thank you for the prompt reply.

Regarding Q1, is it at least possible to implement a new View for the scheduler? Because for the axis-swapping it would be equal to a new View.

Regarding Q2, is there an example implementation / code snippe for the Multi-drag drop that i can refer to?

Thank you again for your support!

Hi Vinh,

 

Thanks for the update.

 

Q1: There are more complexity on rendering the date header in the left side navigation of Scheduler.

1. Couldn't manage multiple resources with grouping
2. Couldn't manage the spanned events
3. Couldn't perform the resize and drag action for events

 

So, currently, this is not feasible with our scheduler.

 

Q2: We regret to let you know that we could not achieve this behavior by a workaround. So we will let you know once this feature has implemented.

 

Regards,

Vengatesh