In this short yet detailed tutorial we will lead you through the basic steps of creating a VB Scheduler for ASP.NET and ASP.NET MVC3. As stated before, we converted DHTMLX Scheduler .NET C# samples to visual basic. This allows the adherents of visual basic to create a simple Google-like event calendar in their favorite programming language.

By its structure the tutorial reminds the previously published tutorial for ASP.NET event calendar coded in ะก#. It covers the main steps of scheduler creation.

By following this 8 step tutorial you’ll get a nice-looking rich-featured event calendar with a server-side backend:  

vb.net scheduler 

You can download the ready visual basic sample right now, or proceed with our tutorial.

Let’s start from the very beginning.

Step 1. Create a New Scheduler Project

Download and unzip the DHMTLX Scheduler .NET archive. Create a new visual basic project using MVC3 Web Application. Let's name it MyCalendar and use the default template settings - Empty project template (because we create a scheduler from scratch) and Razor view engine (to generate the scheduler dynamic web pages):

  mvc3 razor vb.net scheduler

Step 2. Add Scripts and the Library Reference

Copy the DHTML.dll library to your project folder from the unzipped Scheduler package (bin folder). The dhtmlxScheduler found in the Scripts folder of the package root directory should also be added to the Scripts folder of your newly created project. Right-click on the “MyCalendar” project in the Solution Explorer to add the required reference.

Step 3. Set up a New Data Base

Now we need a database to store the calendar events. To implement this, go to the Solution Explorer and add a new ASP.NET folder App_Data. Then create a new SQL Server Database and name it MyCalendar.mdf. A new database has been created.

Righ-click on the Tables folder in the Sever Explorer to add a new table ‘Events’. Fill it in with the following content:

 Scheduler events 

Note! Set primary key to id and enable the identity column.

Step 4. Create a Data Model

Go to Models to add a new item. Select Data from the Visual Basic installed templates and choose select LINQ to SQL Classes. Name it Calendar.dbml. Drag the ‘Events’ table to the designer surface.

Data model for vb scheduler 

Step 5. Create an Event Calendar

We have approached the step of building the event calendar itself.

At first, we create CalendarController.vb and configure it by adding the required namespaces and the related data:

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 proceed with building a View to make our calendar show up on the web page. For this purpose, we create Views/Calendar/Index.vbhtml:

 razor view engine

It has a simple coding:

 

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

Let's customize the look and feel of our calendar. Go to Content/Site.css to change the default styles. The following coding shows how we can set up the background theme and change the page size:

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 make all things work together, 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} _

A simple event calendar has been created. It incorporates a form that opens on double click when you create an event. The form includes an event description and date and time drop-down lists.

vb.net scheduler events 

You can add new events to the calendar now but after page reload nothing is saved. In the next steps we will enable data loading and saving.

Step 6. Load and Save Data

Go to CalendarController.vb to update the logic for data loading and saving.

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

Step 7. Update the Scheduler Configuration

Add the saving and loading function to the scheduler settings:

scheduler.LoadData = True
scheduler.EnableDataprocessor = True
scheduler.PreventCache()
 
scheduler.SaveAction = Url.Action("Save", "Calendar")
scheduler.DataAction = Url.Action("Data", "Calendar")

 The full code should look as follows:

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

Now your events are saved after page refresh.

Step 8. Customization Settings

Let's set the default duration for events by setting the time step to 30 minutes in the calendar controller:

Function Index() As ActionResult
    Dim scheduler = New DHXScheduler()

       ....

    scheduler.Config.time_step = 30
    Return View(scheduler)
End Function

To display time overlapping events, use the following cascade method:

scheduler.Config.cascade_event_display = True

vb.net event calendar cascade view 

Enable the dynamic loading in the Scheduler configuration. It is needed to avoid excessive loadings and load only the events of the viewable area of the calendar:

Function Index() As ActionResult
    ...
    scheduler.EnableDynamicLoading(SchedulerDataLoader.DynamicalLoadingMode.Month)

    Return View(scheduler)
End Function

Public Function Data() As ContentResult

    Dim dateFrom = DateTime.ParseExact(Me.Request.QueryString("from"), "yyyy-MM-dd", CultureInfo.InvariantCulture)
    Dim dateTo = DateTime.ParseExact(Me.Request.QueryString("to"), "yyyy-MM-dd", 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 and can be embedded on your website.

In this tutorial we have demonstrated how an event calendar in visual basic can be implemented from scratch. If you prefer to skip it, just download the ready sample that can be easily integrated into your ASP.NET application.

If this tutorial was useful to you, please share it with your friends and comment below.