In this article we’ll show you how to easily set up DHTMLX Scheduler .NET with a special server-side library called dhtmlxConnector. It considerably speeds up and simplifies the creation of an event calendar in ASP.NET.

In the end, you’ll get a nice flat-skin event calendar with a customizable lightbox like on the screenshot below:

Proceed reading the tutorial or check the ready sample right now.

The Initial Steps of Creation. Libraries and Database Setup

The initial steps to create an event calendar remain the same:

1. Create a new ASP.NET Web Application and name it “CalendarConnector”;

2. Let's add HtmlAgilityPack.dll and DHTMLX Scheduler .NET via NuGet. Right click on your project and select 'Manage Nuget Packages', do search and install the mentioned libraries. Then download dhtmlxConnector and connect it to the project.

3. Set up the database by creating a new SQL Server Database (e.g. MyCalendar.mdf) that will contain data about events.

At this step we will add a table “Events” and one more table “Departments”. The latter will enable further selection of the required departments in the lightbox and their storage in the database.

Set the “Events” table columns as follows:

Add two columns to the table “Departments” as it is shown below:

Note: set primary key to id; set identity column to EventsId for the table “Events” and to id for the table “Departments”

Scheduler Initialization and Customization

As you can remember from the previous tutorials, we used to create a LINQ to SQL Classes Model to load data from the database table. Then we had to implement the scheduler logic for data loading and saving.

With dhmtlxConnectors the above mentioned steps can be skipped. If simple queries are used as data source, dhtmlxConnector will automatically generate sql queries for adding, modifying and deleting events. For more complex queries (e.g. join of several tables), sql queries are added manually.

First, make amendments to the Scheduler .NET configuration in Default.aspx.cs:

1. Add a property to render scheduler object to the page. Then initialize and customize the scheduler inside the Page_Load event.

In the recent updates of Scheduler .NET dhtmlxmessage library is used to enable a pop up box with an OK and Cancel choice. However, it is not integrated into the skin builder yet. That's why we have to add the required css styles manually. Go to Default.aspx and update the following coding:

Assign the name "departments" to this collection. It coincides with the name given to the ServerList Units view and lightbox select. When it is loaded, it can be accessed on the client-side through ‘scheduler.serverList("departments")’.