ASP.NET Event Calendar in MVC3 Razor UPDATED

In this article you’ll learn how the current syntax used in Scheduler .NET can be simplified with ASP.NET MVC3 view engine called Razor.  

DHTMLX Scheduler .NET can be implemented either in C# or Visual Basic. Razor uses C# or Visual Basic syntax and allows writing HTML with C# or Visual Basic in the same page.  We’ll choose C# for this project.

Razor syntax used in Scheduler .NET:

  1. ‘@’ character precedes the code and is added inside the HTML markup;
  2. ASP.NET tags <%  %>  are omitted;

Create a new ASP.NET MVC3 project in Microsoft Visual Studio 2010 and proceed with the following steps:

  1. Copy DHTMLX .dll  file to your project bin folder, then go to References -> Add reference and choose the mentioned library reference;
  2. Copy Scheduler scripts to your project Scripts folder;
  3. Set up a database by right-clicking on ‘Your_project_name’ (e.g. mySchedulerApp) ->  Add -> Add ASP.NET Folder -> App_Data -> Add New Item and name it “Sample.mdf”;
  4. Add a new table and name it “Event”. It should have the following columns: id, text, start_date, end_date with int, nvarchar(250), datetime and datetime Data Types correspondingly. Set primary key to id and enable the identity column;
The other option is to create a table using the following query: 
CREATE TABLE [dbo].[Events](
  [id] int IDENTITY(1,1) NOT NULL,
  [text] nvarchar(250) NULL,
  [start_date] datetime NOT NULL,
  [end_date] datetime NOT NULL,
  1. Set up a data model by creating a new LINQ to SQL database,  name it “Sample.dbml” and add “Event” table to it;
  2. Create a controller and name it “BasicScheduler”. Use the code written in this tutorial;
  3. Generate the view. Add a new Razor view “Index.cshtml” to get an event calendar with the same functionality as in ASP.NET views, but with a reduced and simplified coding:


    Layout = null;
<!DOCTYPE html >
    <head >
           <style type="text/css">
               html, body
    </head >


To render the view, remember to change the default route in Global.asax.cs as follows:

// Parameter defaults
new { controller = "BasicScheduler", action = "Index", id = UrlParameter.Optional }

The event calendar is ready to use!

Check it now, get a free trial!

free download

Feel free to leave a comment below and share the article with your friends, if you find it useful. 



Viktoria Langer

DHTMLX Scheduler .NET product care manager and customer manager since 2012. Interested in ASP.NET and trying to create valuable content.

Recent Blog Posts