{"id":639,"date":"2010-10-18T14:30:22","date_gmt":"2010-10-18T10:30:22","guid":{"rendered":"http:\/\/www.dhtmlx.com\/blog\/?p=639"},"modified":"2026-04-28T16:21:12","modified_gmt":"2026-04-28T13:21:12","slug":"dhtmlxscheduler-for-net-mvc","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlxscheduler-for-net-mvc\/","title":{"rendered":"Event Calendar for ASP.NET MVC with dhtmlxScheduler"},"content":{"rendered":"\n
\n
\n \n <\/path>\n <\/svg>\n\n INFO\n <\/div>\n\n
\n

\n For new clients, we recommend using DHTMLX Scheduler<\/a> and \n integrating it with .NET by following our official guide<\/a>. \n <\/p>\n <\/div>\n <\/div>\n \n

NOTE<\/strong>: We’re now offering DHTMLX Scheduler .NET, an optimized version for ASP.NET apps.<\/p>\n

This tutorial will lead you through the steps required to integrate dhtmlxScheduler into an ASP.NET MVC<\/strong> application. dhtmlxScheduler is a JavaScript scheduling calendar component, which can be used for a wide variety of use-cases connected to scheduling tasks. We will learn how to put this Ajax-based calendar on a web page, load events from .NET sever side and update them in the database when a user makes changes in the browser.<\/p>\n

Download the final demo<\/a> to get a better understanding of the solution we’re about to build.<\/p>\n

\"scheduler-asp-net-flat\"<\/p>\n

Modern web apps impose ever higher demands on the user interface. In the case of standard controls, you can always use a built-in solution. However, with more complex controls \u2013 a calendar UI, for example \u2013 you are up against the problem. But here, third-party solutions can help. One of them is dhtmlxScheduler.<\/p>\n

<\/p>\n

Preparation<\/h4>\n

First of all, you need to create a new project. Nothing specific, just an empty ASP.NET MVC project. Name it, for example, “My Calendar”. After that, create a database (or use any valid one) where you will save the calendar events. In the database, create the table “Events” with the following set of fields (all fields are mandatory):<\/p>\n\n\n\n\n\n\n\n
Field<\/strong>Type<\/strong>Description<\/strong><\/td>\n<\/tr>\n
id<\/td>\nidentity, primary key<\/td>\nthe ID of an event<\/td>\n<\/tr>\n
text<\/td>\ntext<\/td>\nthe description of an event<\/td>\n<\/tr>\n
start_date<\/td>\ndatetime<\/td>\nthe date and the time of an event start<\/td>\n<\/tr>\n
end_date<\/td>\ndatetime<\/td>\nthe date and the time of an event end<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

While the DB tool is open, you can add some test data to the “Events” table. If you downloaded the final demo package, you can find there MyCalendar.mdf file which already contains the necessary table and data.<\/p>\n

The next thing you need is the dhtmlxScheduler package, which can be downloaded from the dhtmlxScheduler homepage<\/a>. Copy the content from the folder ‘codebase’ to the folder ‘Scripts’ of your project. The result of this step should look similar to the following:<\/p>\n

\"dhtmlxScheduler

dhtmlxScheduler Files<\/p><\/div>\n

Now that everything is ready, and all the necessary files are in place, you can proceed to the first step.<\/p>\n

Step 1 – Initialization<\/h4>\n

First of all, you need to create a default view. Add a new controller – “CalendarController” – and create the “Index” view for it. Here is the content of Index.aspx<\/strong> file:<\/p>\n

<%@ Page Language<\/span>=<\/span>"C#"<\/span> Inherits=<\/span>"System.Web.Mvc.ViewPage"<\/span> %><\/span><\/div><\/div>\n

The default view loads .js and .css files of the dhtmlxScheduler and initializes a full-screen scheduler. The second and third parameters in the \u2018scheduler.init’ command define default date and mode, which will be in the calendar just after initialization. Except for the first line, the code doesn’t have anything .NET MVC-specific. Actually, it’s fully taken from a standard scheduler example.<\/p>\n

Now one more thing needs to be done \u2013 the updating of a default route. Switch the default route of the app to the newly-created controller in Global.asax.cs<\/strong>:<\/p>\n

public static<\/span> void<\/span> RegisterRoutes(<\/span>RouteCollection routes)<\/span>
\n{<\/span>
\nroutes.IgnoreRoute<\/span>(<\/span>"{resource}.axd\/{*pathInfo}"<\/span>)<\/span>;<\/span>
\n
\nroutes.MapRoute<\/span>(<\/span>
\n"Default"<\/span>,<\/span> \/\/ Route name<\/span>
\n"{controller}\/{action}\/{id}"<\/span>,<\/span> \/\/ URL with parameters<\/span>
\nnew {<\/span> controller =<\/span> "Calendar"<\/span>,<\/span> action =<\/span> "Index"<\/span>,<\/span> id =<\/span> UrlParameter.Optional<\/span> }<\/span> \/\/ Parameter defaults<\/span>
\n)<\/span>;<\/span>
\n}<\/span><\/div><\/div>\n

When all this is done and correct, you can run the app and see the next screen:<\/p>\n

\"Scheduler

Scheduler on page<\/p><\/div>\n

If you don\u2019t see the screen above, most probably you didn\u2019t copy the scheduler\u2019s files to the folder ‘Scripts’ correctly, so check it again.<\/p>\n

The calendar created with the dhtmlxScheduler has a clean and intuitive interface, and managing events is quite easy. To create new events, use the double click or click-and-drag commands. By clicking on tabs in the upper right-hand corner you can switch views: Day, Week, or Month.<\/p>\n

Step 2 – Loading Data<\/h4>\n

The view we constructed in the previous step looks fine, but it doesn\u2019t contain any data, so now let’s change this. First, add ‘Model’ to your application (just use “Model > Add > Add new item” and select “Data”,”Linq to SQL Classes”). To complete the process, drag-and-drop the “Events” table to the Model Designer, and then add one more action to the CalendarController.cs<\/strong>:<\/p>\n

public ActionResult Data(<\/span>)<\/span>
\n{<\/span>
\nMyEventsDataContext data =<\/span> new MyEventsDataContext(<\/span>)<\/span>;<\/span>
\nreturn<\/span> View(<\/span>data.Events<\/span>)<\/span>;<\/span>
\n}<\/span><\/div><\/div>\n

Define view for that action – Data.aspx<\/strong>:<\/p>\n

<%@ Page Language<\/span>=<\/span>"C#"<\/span> Inherits=<\/span>"System.Web.Mvc.ViewPage"<\/span> ContentType=<\/span>"text\/xml"<\/span> %><\/span>
\n
\n<% foreach (<\/span>var myevent in Model)<\/span> {<\/span> %><\/span>
\n
\n<![CDATA[<%= String.Format("{0:MM\/dd\/yyyy HH:mm}",myevent.start_date) %>]]><\/span>
\n<![CDATA[<%= String.Format("{0:MM\/dd\/yyyy HH:mm}",myevent.end_date) %>]]><\/span>
\n<![CDATA[<%= myevent.text%>]]><\/span>
\n
\n<% }<\/span> %><\/span>;<\/div><\/div>\n

This template outputs not HTML, but XML data. For each event it will output a block of XML data. An extra bit of code is used to provide data in the necessary format. If you need to add extra fields to the model, just add extra tags to the view.<\/p>\n

Slightly adjust the initialization code of your scheduler in Index.aspx<\/strong>:<\/p>\n

<script<\/span> type<\/span>=<\/span>"text\/javascript"<\/span>>\/\/<\/span> <![<\/span>CDATA[<\/span>
\nfunction init(<\/span>)<\/span> {<\/span> scheduler.config.xml_date =<\/span> "%m\/%d\/%Y %H:%i"<\/span>; \/\/<\/span> format of dates in XML scheduler.init(<\/span>"scheduler_here"<\/span>, new Date(<\/span>2010<\/span>, 6<\/span>, 1<\/span>)<\/span>, "month"<\/span>)<\/span>; scheduler.load(<\/span>"\/Calendar\/Data"<\/span>)<\/span>; \/\/<\/span>path to the newly created action<\/span> }<\/span>
\n\/\/<\/span> ]<\/span>]<\/span>><\/<\/span>script<\/span>><\/div><\/div>\n

Well, you’ve just configured the format of dates (it’s the same as in Data.aspx) and defined the path to action ‘Data’. At this point, the running application will look like this:<\/p>\n

\"Scheduler

Scheduler – Loading the events<\/p><\/div>\n

We\u2019re halfway there. Just one more step, and we\u2019re almost done.<\/p>\n

Step 3 – Saving to the Database<\/h4>\n

After all the manipulations described above, we’ve built a scheduler which loads the events data from the database, but that’s not enough. Our next goal is to save changes made on the client side to the server. First of all, create one more action – CalendarController.cs<\/strong>:<\/p>\n

public ActionResult Save(<\/span>FormCollection actionValues)<\/span>
\n{<\/span>
\nString action_type =<\/span> actionValues[<\/span>"!nativeeditor_status"<\/span>]<\/span>;<\/span>
\nInt64 source_id =<\/span> Int64.Parse<\/span>(<\/span>actionValues[<\/span>"id"<\/span>]<\/span>)<\/span>;<\/span>
\nInt64 target_id =<\/span> source_id;<\/span>
\n
\nMyEventsDataContext data =<\/span> new MyEventsDataContext(<\/span>)<\/span>;<\/span>
\nEvent myevent;<\/span>
\ntry{<\/span>
\nswitch<\/span> (<\/span>action_type)<\/span>
\n{<\/span>
\ncase<\/span> "inserted"<\/span>:<\/span>
\nmyevent =<\/span> new Event(<\/span>)<\/span>;<\/span>
\nmyevent.start_date<\/span> =<\/span> DateTime.Parse<\/span>(<\/span>actionValues[<\/span>"start_date"<\/span>]<\/span>)<\/span>;<\/span>
\nmyevent.end_date<\/span> =<\/span> DateTime.Parse<\/span>(<\/span>actionValues[<\/span>"end_date"<\/span>]<\/span>)<\/span>;<\/span>
\nmyevent.text<\/span> =<\/span> actionValues[<\/span>"text"<\/span>]<\/span>;<\/span>
\ndata.Events<\/span>.InsertOnSubmit<\/span>(<\/span>myevent)<\/span>;<\/span>
\nbreak<\/span>;<\/span>
\ncase<\/span> "deleted"<\/span>:<\/span>
\nmyevent =<\/span> data.Events<\/span>.SingleOrDefault<\/span>(<\/span>ev =&<\/span>gt;<\/span> ev.id<\/span> ==<\/span> source_id)<\/span>;<\/span>
\ndata.Events<\/span>.DeleteOnSubmit<\/span>(<\/span>myevent)<\/span>;<\/span>
\nbreak<\/span>;<\/span>
\ndefault<\/span>:<\/span> \/\/ "updated"<\/span>
\nmyevent =<\/span> data.Events<\/span>.SingleOrDefault<\/span>(<\/span>ev =&<\/span>gt;<\/span> ev.id<\/span> ==<\/span> source_id)<\/span>;<\/span>
\nmyevent.start_date<\/span> =<\/span> DateTime.Parse<\/span>(<\/span>actionValues[<\/span>"start_date"<\/span>]<\/span>)<\/span>;<\/span>
\nmyevent.end_date<\/span> =<\/span> DateTime.Parse<\/span>(<\/span>actionValues[<\/span>"end_date"<\/span>]<\/span>)<\/span>;<\/span>
\nmyevent.text<\/span> =<\/span> actionValues[<\/span>"text"<\/span>]<\/span>;<\/span>
\nbreak<\/span>;<\/span>
\n}<\/span>
\ndata.SubmitChanges<\/span>(<\/span>)<\/span>;<\/span>
\ntarget_id =<\/span> myevent.id<\/span>;<\/span>
\n}<\/span>
\ncatch
\n{<\/span>
\naction_type =<\/span> "error"<\/span>;<\/span>
\n}<\/span>
\n
\nreturn<\/span> View(<\/span>new CalendarActionResponseModel(<\/span>action_type,<\/span> source_id,<\/span> target_id)<\/span>)<\/span>;<\/span>
\n}<\/span><\/div><\/div>\n

It seems that we have a lot of code, but it’s quite simple in its logic. In the first lines, we specify the type of action from the incoming request. Then, depending on the type, we inserted, deleted, or updated the data in the database. And after the DB operation was completed, we rendered a response to the client-side scheduler.<\/p>\n

The file Save.aspx<\/strong> will look like this:<\/p>\n

<%@ Page Language<\/span>=<\/span>"C#"<\/span> Inherits=<\/span>"System.Web.Mvc.ViewPage"<\/span> ContentType=<\/span>"text\/xml"<\/span>%><\/span><\/div><\/div>\n

 <\/p>\n

The view shown above uses class ‘CalendarActionResponseModel’ to transfer the necessary information from the action to the view. In CalendarController.cs<\/strong> we add:<\/p>\n

public class CalendarActionResponseModel
\n{<\/span>
\npublic String Status;<\/span>
\npublic Int64 Source_id;<\/span>
\npublic Int64 Target_id;<\/span>
\npublic CalendarActionResponseModel(<\/span>String status,<\/span> Int64 source_id,<\/span> Int64 target_id)<\/span>
\n{<\/span>
\nStatus =<\/span> status;<\/span>
\nSource_id =<\/span> source_id;<\/span>
\nTarget_id =<\/span> target_id;<\/span>
\n}<\/span>
\n}<\/span><\/div><\/div>\n

Now update the Index.aspx<\/strong> one more time (add code that will link updates on the client-side scheduler with the action ‘Save’) :<\/p>\n

<script<\/span> type<\/span>=<\/span>"text\/javascript"<\/span>><\/span>\/\/ <![CDATA[<\/span>
\nfunction init() { scheduler.config.xml_date = "%m\/%d\/%Y %H:%i"; scheduler.init("scheduler_here", new Date(2010, 6, 1), "month"); scheduler.load("\/Calendar\/Data"); var dp = new dataProcessor("\/Calendar\/Save"); dp.init(scheduler); dp.setTransactionMode("POST", false); }<\/span>
\n\/\/ ]]><\/span><\/<\/span>script<\/span>><\/span><\/div><\/div>\n

If you launch the app now, the screen will look similar to the one from Step 2, but any changes or new events will be saved to the DB. Also, it will correctly restore after page reloading. So now we can proceed to the last step.<\/p>\n

Step 4 – Improvements<\/h4>\n

The code we are using in \u2018SaveController\u2019 can be improved by using automatic bindings. In CalendarController.cs<\/strong>:<\/p>\n

public ActionResult Save(<\/span>Event changedEvent,<\/span> FormCollection actionValues)<\/span>
\n{<\/span>
\nString action_type =<\/span> actionValues[<\/span>"!nativeeditor_status"<\/span>]<\/span>;<\/span>
\nInt64 source_id =<\/span> Int64.Parse<\/span>(<\/span>actionValues[<\/span>"id"<\/span>]<\/span>)<\/span>;<\/span>
\nInt64 target_id =<\/span> source_id;<\/span>
\nMyEventsDataContext data =<\/span> new MyEventsDataContext(<\/span>)<\/span>;<\/span>
\ntry{<\/span>
\nswitch<\/span> (<\/span>action_type)<\/span>
\n{<\/span>
\ncase<\/span> "inserted"<\/span>:<\/span>
\ndata.Events<\/span>.InsertOnSubmit<\/span>(<\/span>changedEvent)<\/span>;<\/span>
\nbreak<\/span>;<\/span>
\ncase<\/span> "deleted"<\/span>:<\/span>
\nchangedEvent =<\/span> data.Events<\/span>.SingleOrDefault<\/span>(<\/span>ev =&<\/span>gt;<\/span> ev.id<\/span> ==<\/span> source_id)<\/span>;<\/span>
\ndata.Events<\/span>.DeleteOnSubmit<\/span>(<\/span>changedEvent)<\/span>;<\/span>
\nbreak<\/span>;<\/span>
\ndefault<\/span>:<\/span> \/\/ "updated"<\/span>
\nchangedEvent =<\/span> data.Events<\/span>.SingleOrDefault<\/span>(<\/span>ev =&<\/span>gt;<\/span> ev.id<\/span> ==<\/span> source_id)<\/span>;<\/span>
\nUpdateModel(<\/span>changedEvent)<\/span>;<\/span>
\nbreak<\/span>;<\/span>
\n}<\/span>
\ndata.SubmitChanges<\/span>(<\/span>)<\/span>;<\/span>
\ntarget_id =<\/span> changedEvent.id<\/span>;<\/span>
\n}<\/span>
\ncatch
\n{<\/span>
\naction_type =<\/span> "error"<\/span>;<\/span>
\n}<\/span>
\nreturn<\/span> View(<\/span>new CalendarActionResponseModel(<\/span>action_type,<\/span> source_id,<\/span> target_id)<\/span>)<\/span>;<\/span>
\n}<\/span><\/div><\/div>\n

To give your calendar a slicker and glossier look, or to customize the color scheme, use the online Skin Builder for dhtmlxScheduler [deprecated]<\/strong>. Select one of “Glossy” skins to get a more modern look for the calendar. When you’re done with the customization, download the skin package (.css files and images), and unpack it in the folder ‘\u2018Scripts’ (it will overwrite some old scheduler files).<\/p>\n

The running app after those updates will produce the final look:<\/p>\n

\"Scheduler

Scheduler – Glossy skin<\/p><\/div>\n

So let’s see what we’ve got: in just a few steps, we have implemented a web-based calendar that can be used in ASP.NET MVC and provide all the necessary functions: loading, saving, deleting, and updating events.<\/p>\n

Of course, perfection knows no bounds. You can define extra fields, add\/move calendar views, or redefine the scale and templates configuration (please refer to dhtmlxScheduler documentation<\/a>). All these changes can be made simply by adding extra JavaScript commands in the “Index” view. There is no need for further updates in the “CalendarController.cs” code. So turn on your imagination and get going!<\/p>\n

NOTE: If you’re using VB, please read this comment<\/a> (many thanks to Brian).<\/strong><\/p>\n

Posted by Ivan Petrenko<\/small><\/p>\n","protected":false},"excerpt":{"rendered":"

NOTE: We’re now offering DHTMLX Scheduler .NET, an optimized version for ASP.NET apps. This tutorial will lead you through the steps required to integrate dhtmlxScheduler into an ASP.NET MVC …<\/p>\n","protected":false},"author":2,"featured_media":3473,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[71,1],"tags":[33,37,14,15],"class_list":["post-639","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","category-uncategorized","tag-all-posts","tag-asp-net","tag-tips","tag-dhtmlxscheduler"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/639","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=639"}],"version-history":[{"count":10,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/639\/revisions"}],"predecessor-version":[{"id":15464,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/639\/revisions\/15464"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/3473"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=639"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=639"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=639"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}