We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Use Schedule as roster


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. 


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. 

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


Live Chat Icon For mobile
Up arrow icon