Creating a VB Scheduler in ASP.

NET MVC3 Razor

Introduction

In this article you will learn how to quickly create an Outlook-like event calendar in Visual Basic for your ASP.NET MVC app. To implement the task we have chosen DHMTLX Scheduler .NET web control characterized by simplicity and ease in use. Its C# samples have been recently converted to VB.NET, so you can be among the first VB developers to try it.

By following this step-by-step tutorial, youll get a rich and nice-looking VB event calendar like the one on the picture below. The whole process of creation will take about 10 minutes.

The event calendar that we are going to create in this tutorial will have the following features:

1. Multiple calendar views, including day, week and month views:

2. Lightbox with a field for event description and convenient date and time dropdown lists:

3. Events cascade view to display events overlapping in time:

The tutorial consists of 7 main steps. Lets start from the very beginning.

1.

Creating a new Project

First of all, download DHTMLX Scheduler .NET archive and unzip it to a new folder. In the root directory youll find Scheduler ready samples in VB.NET, including those for ASP.NET and MVC3. You can check any of those right now to view the ready VB event calendar in action. In our tutorial well create an event calendar in MVC3 (VB). Lets start from scratch. Create a new VB project using MVC3 Web Application and name it MyCalendar. The default template settings should be as on the picture below:

2. Attaching Library to the Project Now you need to attach the Scheduler library to your project. First, add DHTML.dll to your project folder from the Scheduler bin folder. Right-click on your project name to add a reference. Then copy the dhtmlxScheduler folder found in the Scripts folder to the Scripts folder of your project. 3. Setting up a Data Base

Create a new data base to store your calendar events: a) Go to the Solution Explorer and add a new ASP.NET folder App_Data b) Create a new SQL Server Database and name it MyCalendar.mdf A new database has been created. Open MyCalendar.mdf in the Server Explorer. Find the folder Table and add a new table Events to it. The table should have the following columns:

Note that a primary key should be set to id and the identity column should be enabled in the table properties. 4. Modeling the Scheduler At this step we have to generate a data base model. To implement this, any ORM can be used, or you can even do without it. In our project well use LINQ to SQL. Go to Models to add a new item. Select LINQ to SQL Classes and name your model Calendar.dbml. Drag the Events table to the model designer surface.

5.

Building up the Event Calendar

After the data base and the data model are ready, proceed with building up the calendar itself. Add a controller and name it CalendarController.vb. Then create a new Scheduler instance and pass it to the view.
Imports DHTMLX.Scheduler Imports DHTMLX.Scheduler.Data Imports DHTMLX.Common Namespace MyCalendar Public Class CalendarController Inherits System.Web.Mvc.Controller Function Index() As ActionResult Dim scheduler = New DHXScheduler() scheduler.Config.first_hour = 8 scheduler.Config.last_hour = 19 Return View(scheduler) End Function End Class End Namespace

Then create a View to display the event calendar on the web page. Go to Views, create a new folder Calendar and add Index.vbhtml:

In Index.vbhtml coding we define the calendar height:

@Code ViewData("Title") = "DHXScheduler" End Code <div style="height:510px;"> @Html.Raw(Model.Render()) </div>

Now customize the scheduler look and feel. Go to Content/Site.css to set up the background color and the calendar width:
body { font-size: 75%; font-family: Verdana, Tahoma, Arial, "Helvetica Neue", Helvetica, Sans-Serif; color: #232323; background-color: #5C87B2; width:960px; margin:0 auto; }

To render the calendar, change the default route in Global.asax from Home to Calendar as it is shown below:
New With {.controller = "Calendar", .action = "Index", .id = UrlParameter.Optional} _

Thats it! A simple event calendar has been created.

Now you can add events but they are not saved after page reload. Lets update the controller config. 6. Data Loading and Saving

Open CalendarController.vb and make the following updates. Use a helper class SchedulerAjaxData to render the user collection of objects to json string that the Scheduler can parse:
Public Function Data() As ContentResult Return New SchedulerAjaxData((New CalendarDataContext()).Events) End Function

Declare Save function. Every time when a user makes changes, Scheduler sends information on the action type (adding a new entry, deleting or editing an entry) and the changed event itself:
Public Function Save(ByVal id As System.Nullable(Of Integer), ByVal actionValues As FormCollection) As ContentResult

To determine the type of action, lets use a special helper class DataAction:
Dim action = New DataAction(actionValues) Dim data As New CalendarDataContext() Try

Now we have to build up a data model object from the request variables. We can use either MVC Model Binder or DHXEventsHelper.Bind available from the library:
Dim changedEvent = DirectCast(DHXEventsHelper.Bind(GetType([Event]), actionValues), [Event])

Perform the related operation, depending on the type of DataAction:

Select Case action.Type Case DataActionTypes.Insert data.Events.InsertOnSubmit(changedEvent) Exit Select Case DataActionTypes.Delete changedEvent = data.Events.SingleOrDefault(Function(ev) ev.id = action.SourceId) data.Events.DeleteOnSubmit(changedEvent) Exit Select Case Else ' "update" Dim eventToUpdate = data.Events.SingleOrDefault(Function(ev) ev.id = action.SourceId) DHXEventsHelper.Update(eventToUpdate, changedEvent, New List(Of String)() From {"id"}) Exit Select End Select data.SubmitChanges() action.TargetId = changedEvent.id Catch a As Exception action.Type = DataActionTypes.[Error] End Try

To render response, lets use one more helper AjaxSaveResponse that can be initialized with the DataAction helper class. AjaxSaveResponse can be implicitly converted to the ContentResult type.
Return (New AjaxSaveResponse(action)) End Function

Lets enable saving and loading function and indicate urls for data and save actions. To prevent caching of data requests in browsers, use the PreventCache function.
scheduler.LoadData = True scheduler.EnableDataprocessor = True scheduler.PreventCache() scheduler.SaveAction = Url.Action("Save", "Calendar") scheduler.DataAction = Url.Action("Data", "Calendar")

For your convenience, we have added the full coding:

Imports DHTMLX.Scheduler Imports DHTMLX.Scheduler.Data Imports DHTMLX.Common Namespace MyCalendar Public Class CalendarController Inherits System.Web.Mvc.Controller Function Index() As ActionResult Dim scheduler = New DHXScheduler() scheduler.Config.first_hour = 8

scheduler.Config.last_hour = 19 scheduler.LoadData = True scheduler.EnableDataprocessor = True scheduler.PreventCache() scheduler.SaveAction = Url.Action("Save", "Calendar") scheduler.DataAction = Url.Action("Data", "Calendar") Return View(scheduler) End Function Public Function Data() As ContentResult Return New SchedulerAjaxData((New CalendarDataContext()).Events) End Function Public Function Save(ByVal id As System.Nullable(Of Integer), ByVal actionValues As FormCollection) As ContentResult Dim action = New DataAction(actionValues) Dim data As New CalendarDataContext() Try Dim changedEvent = DirectCast(DHXEventsHelper.Bind(GetType([Event]), actionValues), [Event]) Select Case action.Type Case DataActionTypes.Insert data.Events.InsertOnSubmit(changedEvent) Exit Select Case DataActionTypes.Delete changedEvent = data.Events.SingleOrDefault(Function(ev) ev.id = action.SourceId) data.Events.DeleteOnSubmit(changedEvent) Exit Select Case Else ' "update" Dim eventToUpdate = data.Events.SingleOrDefault(Function(ev) ev.id = action.SourceId) DHXEventsHelper.Update(eventToUpdate, changedEvent, New List(Of String)() From {"id"}) Exit Select End Select data.SubmitChanges() action.TargetId = changedEvent.id Catch a As Exception action.Type = DataActionTypes.[Error] End Try Return (New AjaxSaveResponse(action)) End Function End Class End Namespace

Data saving is enabled. Create new events and refresh the page. Your events are now saved.

7.

Customizing Settings

Now well show you how to set the minimum time period for an event. Lets make it 30 minutes. To implement this, customize the controller config as follows:
Function Index() As ActionResult Dim scheduler = New DHXScheduler() .... scheduler.Config.time_step = 30 Return View(scheduler) End Function

If your events occur at one and the same time, you can simply arrange them as a cascade by adding the following code line:
scheduler.Config.cascade_event_display = True

Finally, enable scheduler dynamic loading so that to load only the events of the calendar viewable area:
scheduler.Data.EnableDynamicLoading(SchedulerDataLoader.DynamicalLoadingMode. Month) scheduler.Config.cascade_event_display = True Return View(scheduler) End Function

Scheduler will transfer to the server the calendar viewable timeframe borders to load only the data of the viewable area:
Public Function Data() As ContentResult Dim "yyyy-MM-dd", Dim "yyyy-MM-dd", dateFrom = DateTime.ParseExact(Me.Request.QueryString("from"), CultureInfo.InvariantCulture) dateTo = DateTime.ParseExact(Me.Request.QueryString("to"), CultureInfo.InvariantCulture)

Return New SchedulerAjaxData(New CalendarDataContext().Events _ .Where(Function(ev) ev.start_date < dateTo And ev.end_date > dateFrom) _ ) End Function

The VB Scheduler is ready to use and can be easily integrated into your app.

Conclusion
After implementing the steps described in this detailed tutorial, youll get a simple event calendar in Visual Basic for ASP.NET that allows you to easily add and manage your events. The calendar control can be always customized according to your application needs. You can extend its capabilities and add new features or change your calendar color scheme, when required.