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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Use Schedule as roster

Thread ID:





132011 Aug 8,2017 02:11 PM UTC Aug 9,2017 02:06 PM UTC ASP.NET MVC 1
Tags: Schedule
Paul Kocher
Asked On August 8, 2017 02:11 PM UTC


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. 


Nevitha Ravi [Syncfusion]
Replied On 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 



This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon