Customization of the Scheduler and its header in TimelineDay view

Question

Dear Support,

is it possible to accomplish following tasks with the Blazor Scheduler Control?

- I have one resource for each employee

the resources panel of the left side should not be shown - Can I disable it by property or have I do this by CSS?

- I have multiple "Timespans" in the header (they should work as work shifts later)

there can be 3 work shifts with 8 hours each, but there also can be 4 with 6 hours each or also with a not equal number of hours (example: 6/8/4)
How can I design this generic? The column span should work and is it also possible to draw a thicker line, lets say, after every 8 hours, like in the picture below, to signalize the user that the work shift ends here?

In the following a little visualization

Further questions:

- I use your drag and drop example and edited it for my purposes.

Is there a way to show a preview of the full appointment while holding the mouse over the scheduler?
While holding the mouse over the scheduler is there a way to "grey out" or something on the resources where the appointment should not be dropped?

If some documentations are available, that will be great. I unfortunately found nothing for this problems.

Alagumeena Kalaiselvan · Answer

Hi Denny,

Thanks for contacting Syncfusion support.

Q1: How to disable the resource panel of the left side

You can disable the left side resource panel of the scheduler by using Scheduler resource without grouping but currently we are facing an issue that case which can be resolved in our upcoming patch release. By alternate, you can achieve this scenario by CSS. Refer the below code for that.

<style>

.e-schedule .e-outer-table > tbody > tr > td:first-child {

display: none !important;

}

</style>

Q2: How to design the Scheduler Timeline day view which have multiple Timespans with 3 work shifts ( each have 8 hours)

Currently the scenario it is not feasible with Scheduler. Also, we have support to set the required time slot duration for Time interval alone. Refer the below UG link for that UG Link: https://blazor.syncfusion.com/documentation/scheduler/timescale/

By alternate, we suggest you to use our Gantt chart component to achieve your case. Please refer the below details for that with below UG link.

UG Link: https://blazor.syncfusion.com/documentation/gantt-chart/getting-started/

S.No

Query

Comments

1

the resources panel of the left side should not be shown - Can I disable it by property or have I do this by CSS?

Yes, it is possible to hide the TreeGrid part, by using the property

SplitterSettings.View property.

</SfGantt>

2

there can be 3 work shifts with 8 hours each, but there also can be 4 with 6 hours each or also with a not equal number of hours (example: 6/8/4)

We have achieved shifts with 8 hours by setting TopTier.Count as 8. But the shift hours will be common. We cannot assign different hours for each shift.

//...

</GanttTimelineSettings>

</SfGantt>

3

How can I design this generic? The column span should work and is it also possible to draw a thicker line, lets say, after every 8 hours, like in the picture below, to signalize the user that the work shift ends here?

By over-riding the CSS we can render thicker lines at particular intervals. Please find the below code example.

<style>

.e-line-container-cell:nth-child(9n) {

border-right-width: 5px !important;

}

</style>

4

Is there a way to show a preview of the full appointment while holding the mouse over the scheduler?

Yes, it is possible to show the details while hovering on the taskbar using tooltip. For this we need to enable ShowTooltip.

//…

</SfGantt>

5

While holding the mouse over the scheduler is there a way to "grey out" or something on the resources where the appointment should not be dropped?

From your query, we understand that, you want to select a taskbar as target and perform drag action vertically. Is this your requirement? If not please elaborate your query, so that it will be very helpful, to check from our end and provide you a proper solution.

We have prepared a sample based on your requirement using Gantt which can be get by the below sample link

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TestSample1163518078

Kindly try with above sample and get back to us whether it meets your requirement.

Regards

Alagumeena.K

ZMI Dev · Answer

Thanks for your very good tipps and resolutions.

"By alternate, we suggest you to use our Gantt chart component to achieve your case."

Can I also achieve an external drag and drop action in the Gantt Control like in the Scheduler (e.g.: https://blazor.syncfusion.com/demos/scheduler/external-drag-and-drop/)?
I found no examples and options fo that.

"From your query, we understand that, you want to select a taskbar as target and perform drag action vertically. Is this your requirement? If not please elaborate your query, so that it will be very helpful, to check from our end and provide you a proper solution."

For clarification until now we use the scheduler control. We can't see that the Gantt Control fullfills all our requirements. We want to perform an external drag and drop like in the upper link. Every external element has a one to one relation to the resource in the scheduler. So, when the user drags the appointment from external over the scheduler, the scheduler should grey out on all resources which are not familiar with the dragged one. With that the user sees better where he should drop his appointment.

Alagumeena Kalaiselvan · Answer

Hi Denny, 

Query 3: Can I also achieve an external drag and drop action in the Gantt Control like in the Scheduler?  
Currently, your requirement is not feasible with Gantt component and we already considered this as improvement and logged the feature request for this. Pease find the below feedback link.  
Feedback link: https://www.syncfusion.com/feedback/12836/provide-drag-and-drop-support   
We will include this support completely, by Volume 2, 2020 main release which is expected to be rolled out on June 29, 2020. 
Query 4: when the user drags the appointment from external over the scheduler it should grey out on all resources. 
 
The reported scenario is not feasible with Blazor Scheduler now. The requirement may feasible with DOM manipulation in JavaScript functions using JSInterop. But it is not a proper recommended way as per Blazor standard. 

Regards  
Alagumeena.K