According to multiple requests, we’ve made up a tutorial with ASP.NET Scheduler, explaining how you can manage visibility of reserved time spans for different users in one appointment calendar in ASP.NET.The idea is the following: if one user adds an event to the calendar, another user of this calendar is not able to see this event details, only a marked timespan, as it is demonstrated on the picture below:

The tutorial is created in ASP.NET MVC5 Razor. You can download a ready ASP.NET calendar control example with blocked timespans right now, or follow the instructions described below:

1.Creating a New MVC Project

We’ll start from creation of a completely new project, naming it according to our topic - LoadMarkedTimespans. In the left panel of VS select Web and then ASP.NET Web Application. In the New ASP.NET Project window select MVC and make sure that authorization option is set as ‘Individual User Accounts’.

It’s going to be a project with ASP.NET Identity based authorization and a bunch of controllers and views to manage user actions.

2. Database Initialization

Afterwards, we need to initialize the database, create Admin role and several test users.Let’s define a database initializer class. Right click on the ‘Models’ and create a new class named ‘SchedulerDbInitializer’

The class can be inherited either from DropCreateDatabaseIfModelChanges<T> or from DropCreateDatabaseAlways<T> classes. It will define when the database will be regenerated from the model classes (options are pretty self-explanatory)

We’ll add a role for site admin and a couple of test accounts. When you’ll be doing this, be sure to add ‘using’ for Microsoft.AspNet.Identity and Microsoft.AspNet.Identity.EntityFramework namespaces.

Since we have two different pages with calendars, one for regular users and the other for managers, let’s create another view right away.

3.3 User part

Create an empty controller ‘Scheduler’ and go to ‘Views’-> ‘Schedule’. Create ‘Index.chtml’. Copy the code from Views->SchedulerAdmin->Index.cshtml and change the title to “User”. Repeat it for the controller action. We could put a duplicated code of both actions to a separate method, however for now there is not so much of it to bother.

We already have a database context class which was created with the Identity classes. We’ll attach our new model to this context. Firstly, we’ll move the context to a separate file. Copy ApplicationDbContext class form IdentityModels .cs, create a new file ApplicationDbContext.cs and paste the class there.

3.8 Data format settings

As far as we load only the currently displayed events, the page will send the required date range to the server. In order to be sure that the dates will be parsed correctly regardless the server environment settings we’ll set the invariant culture for the application. Open web.config file and add this setting to <system.web> group.

<globalization culture="en-US" uiCulture="en-US" />

3.9 Blocking of time

The next step and mostly the goal of this tutorial - in user calendar we need to dynamically block the times that have been already booked by other clients and indicate it in the calendar.

Firstly, add the required scheduler extensions - one to highlight time areas in calendar and one to prevent creation of overlapping events. Open Index action of ‘SchedulerController’ and add the following two lines:

And enable dynamic loading mode of the scheduler. This will prevent scheduler from loading all appointments that are stored in database at once, and will load only those that should be currently displayed:

We’ve defined a global object that will hold all methods and variables, which we’ll define for this page. In ‘schedulerClient.init’ methods we’ll do all settings that has to be done on the client-side.

Each time the data is loaded, the response will contain a collection of blocked times that are provided as a named collection 'blocked_time'. We parse these items and add them to the scheduler as marked timespans.

When it’s done, we add a JS file to the page with the scheduler (Views - Scheduler - Index.cshtml)

Actually, we did something more here. We put code in a ‘scripts’ section, that will be rendered at the bottom of the page, in order to speed up the response time of the page. We’ll follow that approach and put all js/css related to dhtmlxScheduler there as well and configure server side to run our code right before the scheduler is initialized.

Note that we've specified the name of a users collection in this line:

select.ServerList = "users";

that will allow us to access this list of users on the client side.

Now redefine the labels of the appointments.The template will be redefined on the client side, so let’s add a js file the same way we did for the users’ calendar - create a file Scripts/scheduler-admin.js.Again, we'll define a host object that will store all public methods we'll declare. This one will be simpler since we only need to redefine a template for event labels open /Scripts/scheduler-admin.js and add a template declaration: