With DHTMLX Scheduler you can create not solely a MVC-based calendar control but also get a ready ASP.NET scheduling solution. Simply follow the 11 steps described below:

1. Create a new C# project by selecting ASP.NET Web Application;

2. Copy the library reference to your ‘App_Data’  project folder and go to References -> Add the reference to your application;

3. Copy the provided calendar scripts to the Scripts folder of your project;

4. Create a new database by right-clicking on ‘App_Data’  ->  Add New Item ->  Select SQL Sever Database and name it “Sample.mdf”;

5. Add a new table with the columns id, text, start_date and end_date. Data types should be set as int, nvarchar(250), datetime and datetime correspondingly (see the picture below). Save it as “Event”. Note that a primary key should be assigned to id and the identity column has to be  additionally enabled; 

 
The table can also be created with 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,
  PRIMARY KEY (id)
)

6. Right-click on ‘Your_project_name’ to create a new LINQ to SQL database model, name it “Sample.dbml” and add “Event” table to it; 

 

7. To create the Scheduler object, go to “Default.aspx.cs” and configure your event calendar using a ‘Page_Load’ method (‘Page_Load’ is generated automatically when “Default.aspx” is created). To render the Scheduler from CodeBehind to the web-page, add a property to save data and assign the Scheduler object to the mentioned property:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

using DHTMLX.Scheduler;

namespace mySchedulerNET
{
	public partial class _Default : System.Web.UI.Page
	{
		public DHXScheduler Scheduler { get; set; }
		protected void Page_Load(object sender, EventArgs e)
		{
			this.Scheduler = new DHXScheduler();
		}
	}
}

Set the initial date and the recurrence pattern for your calendar events: 

Scheduler.InitialDate = new DateTime(2011, 11, 24);
Scheduler.Config.first_hour = 8;
Scheduler.Config.last_hour = 19;
Scheduler.Config.time_step = 30;
Scheduler.Config.limit_time_select = true;

Define a route to load and save data:

Scheduler.DataAction = "Data.ashx";
Scheduler.SaveAction = "Save.ashx";

Enable data loading and processing, prevent cache:

Scheduler.LoadData = true;
Scheduler.EnableDataprocessor = true;

The full code will look like this:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

using DHTMLX.Scheduler;


namespace mySchedulerNET
{
    public partial class _Default : System.Web.UI.Page
    {

        public DHXScheduler Scheduler { get; set; }
        protected void Page_Load(object sender, EventArgs e)
        {
            this.Scheduler = new DHXScheduler();

            Scheduler.InitialDate = new DateTime(2011, 11, 24);


            Scheduler.Config.first_hour = 8;
            Scheduler.Config.last_hour = 19;
            Scheduler.Config.time_step = 30;
            Scheduler.Config.limit_time_select = true;

            Scheduler.DataAction = "Data.ashx";
            Scheduler.SaveAction = "Save.ashx";
            Scheduler.LoadData = true;
            Scheduler.EnableDataprocessor = true;

        }
    }

}

8. Create “Default.aspx” to render your event calendar and set the initial size of the calendar container:

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="mySchedulerNET._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <div style="height:509px; width: 100%;">
        <%= this.Scheduler.Render()%>
 </div>

Override the default styles of the web-site. Set “0” padding to let the scheduler occupy the entire area of the application container:

      <style>
             .main
              {
                     padding: 0 !important;
                     margin:  0 !important;
              }
      </style>
</asp:Content>

The full code will look as follows:

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="mySchedulerNET._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
  <div style="height:600px; width: 100%;">
      <%= this.Scheduler.Render()%>
  </div>
  <style>
      .main
      {
              padding: 0 !important;
              margin:  0 !important;
      }
  </style>
</asp:Content>

9. Right-click on “Your_project_name”, add a Generic Handler and name it “Data.ashx”. Connect the required namespaces where Scheduler is defined and change the content type to ‘json’ for data rendering:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using DHTMLX.Scheduler.Data;

namespace mySchedulerNET
{
    public class Data : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/json";
            context.Response.Write(
                new SchedulerAjaxData(new SampleDataContext().Events).ToString()
            );
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

10. Add a Generic Handler “Save.ashx”. In the same way, connect the required namespaces; note that the content type should be ‘xml’ in this case.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using DHTMLX.Common;

namespace mySchedulerNET
{
    public class Save : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/xml";

            var action = new DataAction(context.Request.Form);

            var data = new SampleDataContext();

In this application we use a helper ‘DHXEventsHelper’ to assembly the event object and update it in LINQ to SQL.  Two methods - ‘Bind’ and ‘Update’ - are used for this purpose:

try
{

    var changedEvent = (Event)DHXEventsHelper.Bind(typeof(Event), context.Request.Form);//create event object from request

    switch (action.Type)
    {
        case DataActionTypes.Insert: // define here your Insert logic
            data.Events.InsertOnSubmit(changedEvent);
            break;
        case DataActionTypes.Delete: // define here your Delete logic
            changedEvent = data.Events.SingleOrDefault(ev => ev.id == action.SourceId);
            data.Events.DeleteOnSubmit(changedEvent);
            break;
        default:// "update" // define here your Update logic
            var updated = data.Events.SingleOrDefault(ev => ev.id == action.SourceId);
            //update "updated" object by changedEvent's values, 'id' should remain unchanged

            DHXEventsHelper.Update(updated, changedEvent, new List<string>() { "id" });
            break;
    }

Add ‘SumbitChanges’ value to submit data to the database and retrieve Event Id after the action is performed:

data.SubmitChanges();
action.TargetId = changedEvent.id;

Add ‘Error’ action type to mark action as failed in case of exception and render the response.

        catch (Exception a)
        {
            action.Type = DataActionTypes.Error;
        }
        context.Response.Write(new AjaxSaveResponse(action).ToString());
} public bool IsReusable { get { return false; } } }

Here is the full code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using DHTMLX.Common;

namespace mySchedulerNET
{
    public class Save : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/xml";
            var action = new DataAction(context.Request.Form);

            var data = new SampleDataContext();

            try
            {

                var changedEvent = (Event)DHXEventsHelper.Bind(typeof(Event), context.Request.Form);//create event object from request

                switch (action.Type)
                {
                    case DataActionTypes.Insert: // define here your Insert logic

                        data.Events.InsertOnSubmit(changedEvent);
                        break;

                    case DataActionTypes.Delete: // define here your Delete logic
                        changedEvent = data.Events.SingleOrDefault(ev => ev.id == action.SourceId);
                        data.Events.DeleteOnSubmit(changedEvent);
                        break;

                    default:// "update" // define here your Update logic
                        var updated = data.Events.SingleOrDefault(ev => ev.id == action.SourceId);
                        //update "updated" object by changedEvent's values, 'id' should remain unchanged
                        DHXEventsHelper.Update(updated, changedEvent, new List<string>() { "id" });
                        break;
                }
                data.SubmitChanges();
                action.TargetId = changedEvent.id;
            }
            catch (Exception a)
            {
                action.Type = DataActionTypes.Error;
            }
            context.Response.Write(new AjaxSaveResponse(action).ToString());
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}
 
By following the above steps you'll get a basic .NET event calendar like this one: 

 

 If you find this post useful, please share your opinion below and recommend it to your friends. 

Check out ready calendar apps now