Use Schedule as roster

Hi!

I'm trying to build a roster but have some problems getting this to work.

We have various shifts - usually 12 hrs from 8am to 8pm and 8pm to 8am. The problem I ran into is, it just looks way too confusing "as is".

This picture is the roster we are using on windows:



Those blue icons represent a night shift while the yellow one represents a day shift. As you can see it doesn't overlap / spreads over two days.

This is what it looks like when I'm using the Schedule:


I haven't bothered adding colours right now but say if you look at the circled appointment -> this is a night shift so it spreads over two days. 
Now if I wanted to assign another night shift to the same employee - it woudln't work as the new shift is hidden under the appointment.

Also I don't need the little arrow on the right to delete the shift as I'm planning on building like an eraser or something similar.

What I would need on the other hand is to be able to see the whole month in the grid but clearly see the three letter code for the shift....

I was thinking of having specific shifts for one "Team" (the resources are employees). So I'd select the shift and just drag and drop it on the grid - prefferably 
would be able to spread the shift over multiple days so each day would represent one shift.

I know this is probably going to take a while for me to customize the schedule for my needs.

Do you have any suggestions on how I would build a roster similar to the one we use in our Windows program?

Thanks in advance. 

Paul

1 Reply

NR Nevitha Ravi Syncfusion Team August 9, 2017 02:06 PM UTC

Hi Paul, 

We have prepared a sample based on your requirement, which can be downloaded from the below link. 


<Code> 
<style type="text/css"> 
    .e-schedulemouseclose { 
        display: none !important; //to hide delete icon 
    } 
</style> 
</Code> 
 
 
<Code> 
    .ShowOverflowButton(false// to display all appointments 
    .CellWidth("70px")  // to show the subject's letter 
</Code> 

Regards, 
Nevitha. 


Loader.
Up arrow icon