In this article we will show you the easiest way to bind DHTMLX Scheduler with the Database in an application created in VB.NET using Web Forms.
We'll also show how the options for the Resource View and the details form Select can be loaded from the server. The component page can be found here.
The demo will use a free and open source dhtmlxConnector library that takes on CRUD operations without a need to write CRUD methods manually.
1. Create a project
At first you need to create a new project. This example contains instructions for Visual Studio 2013 ASP.NET and VB.NET Web Forms Application:
File - New Project
In the left bar select Visual Basic - Web. Then select ASP.NET Web Forms Application and name it DHTMLXCalendar.
2. Install components
1. Install DHTMLX Scheduler event calendar from NuGet via Console Package manager:
PM> Install-Package DHTMLX.Scheduler.NET
2. You also can download it via Manage Packages.
3. Download dhtmlxConnector and add the librarydhtmlxConnector.NET.dll from the codebase/folder to the created project.
3. Create a database
In this section we will create a new database that contains two tables named ‘Events’ and ‘Departments’.
The ‘Events’ table will include the events of DHTMLX Scheduler .NET calendar. This table has the following fields:
EventId - (int, primary key, identity) - the id of an event
Name - (nvarchar(250), allow null) - the description of an event
Details - (text, allow null) - additional information of created event
StartDate - (datetime, not null) - the time an event starts
EndDate - (datetime, not null) - the time an event ends
DepartmentId - (int, foreign key) - id of department
The ‘Departments’ table should contain the names of departments and have the following fields:
id - (int, primry key, identiry) - id of a department
title - (nvarchar(250), allow null) - name of a department
SQL query for the ‘Departments’ table:
CREATE TABLE [dbo].[Departments] (
[id] INT IDENTITY (1, 1) NOT NULL,
[title] NVARCHAR (250) NULL
And add test data for this table:
SET IDENTITY_INSERT [dbo].[Departments] ON
INSERT INTO [dbo].[Departments] ([id], [title]) VALUES (1, N'department1')
INSERT INTO [dbo].[Departments] ([id], [title]) VALUES (2, N'department2')
INSERT INTO [dbo].[Departments] ([id], [title]) VALUES (3, N'department3')
INSERT INTO [dbo].[Departments] ([id], [title]) VALUES (4, N'department4')
INSERT INTO [dbo].[Departments] ([id], [title]) VALUES (5, N'department5')
INSERT INTO [dbo].[Departments] ([id], [title]) VALUES (6, N'department6')
SET IDENTITY_INSERT [dbo].[Departments] OFF
Note. EventId of the 'Events' and Id of the 'Department' tables should be identical. Otherwise you cannot create new events.
Now add a database connection string to Web.config file :
add name="DefaultConnection" providerName="System.Data.SqlClient"
Integration of Scheduler Calendar with DHTMLXConnector
In other tutorials you create Model Classes which represent a table and properties in the columns of this tables. Then you have to implement the CRUD logic. With DHTMLXConnector you can skip these steps because DHTMLXConnector undertakes the tasks. This component will automatically generate the required queries for selecting, updating, inserting or deleting data. All you have to do is to initialize the connector.
1. Scheduler Initialization and Customization
At first we need to add scheduler calendar on the page. Open Default.aspx.vb in your project
and add the following namespaces:
Next, initialize the SchedulerCalendar:
Public Scheduler As DHXScheduler
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
Scheduler = New DHXScheduler()