Simple ASP.NET Сalendar Application with Scheduler

ASP.NET Calendar Scheduler App

Simple ASP.NET Сalendar Application with Scheduler

Step 1. Create a new Microsoft Visual Studio Project

Open Visual Studio, go to File → New → Project and select ASP.NET Web Application on the desired programming language. Name it, 'SchedulerNetAsp'.

Step 2. Add the Scheduler reference

Once you have created a new .NET project you should add the reference to the required library - Scheduler .Net.
Go to Project → Add Reference (the tab 'Browse') and choose DHTMLX.dll.

Step 3. Add scripts of dhtmlxScheduler

To present the scheduler on a page you should add the related scripts (code files) to the project.
Here you have 2 variants:

  1. Define the path to the folder containing the needed files directly in the Controller:

    sched.Codebase = "somePath";
  2. Add the files to the Scripts folder of the solution:
    • Go to Scripts → Create a new folder and name it 'dhtmlxScheduler';
    • Go to Scripts → Add existing items and add the files of the loaded dhtmlxScheduler folder to scripts.

Step 4. Set up a database

Create a database (or use any valid one) to store the calendar events. In this database create the table 'Events' with the following fields (all fields are mandatory):

  • id - (int; primary key, identity) the ID of the event;
  • text - (nvarchar(256)) the description of the event;
  • start_date - (datetime) the date and the time the event starts;
  • end_date - (datetime) the date and the time the event ends.
CREATE TABLE [Events](
  [id] int IDENTITY(1,1) NOT NULL,
  [text] nvarchar(256) NULL,
  [start_date] datetime NOT NULL,
  [end_date] datetime NOT NULL,
  PRIMARY KEY (id)
)

Database structure

While the DB tool is open, you can add some data to the table.

Step 5. Create a data model

To map to the database you have just created, you should add a LINQ to SQL class to the project (just use 'SchedulerNetAsp > Add > Add new item' and select 'Data','Linq to SQL Classes'. Name the class - 'Scheduler'). To complete the process, drag-and-drop the 'Events' table to the Model Designer.

Step 6. Define the startup page

The startup page contains main code and event handlers of the app. In our case, it's general Scheduler configuration and load, update event handlers.

Open up the code-behind file of the startup page (Default.aspx.cs) and change its content to 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 SchedulerNetAsp
{
    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);// the initial data of Scheduler
 
            Scheduler.Config.first_hour = 8;//the minimum value of the hour scale
            Scheduler.Config.last_hour = 19;//the maximum value of the hour scale
            Scheduler.Config.time_step = 30;//the scale interval for the time selector in the lightbox
            Scheduler.Config.limit_time_select = true;// sets the max and min values for the time selector in the lightbox to the values of the last_hour and first_hour options
 
            Scheduler.DataAction = this.ResolveUrl("~/Data.ashx");// the handler which defines loading data to Scheduler
            Scheduler.SaveAction = this.ResolveUrl("~/Save.ashx");// the handler which defines create/update/delete logic
            Scheduler.LoadData = true;
            Scheduler.EnableDataprocessor = true;
 
        }
    }
 
}

Step 7. Load events to Scheduler

To populate Scheduler with the data from the 'Events' table, create a new generic handler and name it 'Data.ashx'. Copy the following code there:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
 
using DHTMLX.Scheduler.Data;
 
namespace SchedulerNetAsp
{
   public class Data : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/json";// the data comes in JSON format
            context.Response.Write(
                new SchedulerAjaxData(new SchedulerDataContext().Events) //events for loading to scheduler
                );
        }
 
        public bool IsReusable { get { return false; }}
    }
}

Step 8. Define the CRUD logic

At this step, you should define Create/Update/Delete logic.

Create a new generic handler and name it 'Save.ashx'. Copy the following code there:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using DHTMLX.Common;
 
using System.Globalization;
 
namespace SchedulerNetAsp
{
    /// <summary>
    /// </summary>
    public class Save : IHttpHandler
    {
 
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/xml";// the data is passed in XML format
 
            var action = new DataAction(context.Request.Form);
            var data = new SchedulerDataContext();
 
            try
            {
                var changedEvent = (Event)DHXEventsHelper.Bind(typeof(Event), context.Request.Form);//see details below
 
                switch (action.Type)
                {
                    case DataActionTypes.Insert: // your Insert logic
                        data.Events.InsertOnSubmit(changedEvent);
                        break;
                    case DataActionTypes.Delete: // your Delete logic
                        changedEvent = data.Events.SingleOrDefault(ev => ev.id == action.SourceId);
                        data.Events.DeleteOnSubmit(changedEvent);
                        break;
                    default:// "update" // your Update logic
                        var updated = data.Events.SingleOrDefault(ev => ev.id == action.SourceId);
                        DHXEventsHelper.Update(updated, changedEvent, new List<string>() { "id" });// see details below
                        break;
                }
                data.SubmitChanges();
                action.TargetId = changedEvent.id;
            }
            catch (Exception a)
            {
                action.Type = DataActionTypes.Error;
            }
 
            context.Response.Write(new AjaxSaveResponse(action));
        }
 
        public bool IsReusable { get { return false; }}
    }
}

Details of DHXEventsHelper.Bind() and DHXEventsHelper.Update() methods see in article 'Managing CRUD operations', chapter 'Helpers'.

Step 9. Render Scheduler to the page

All you have left now is to render Scheduler to the page. Additionaly, you must rewrite some styles specified in the master page by default, in order to render Scheduler correctly.
Open the Default.aspx file and replace the Content control named BodyContent with this:

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
     <style>
        #scheduler_here table { // scheduler_here is the id of the DIV container Scheduler placed into
            border: none;
            border-collapse: collapse;
        }
        #scheduler_here table td {
            padding: 0;
            border: none;
        }
        #scheduler_here table th {
            padding: none;           
        }
     </style>
     <div style="height:509px; width: 100%;">
        <%= this.Scheduler.Render()%> // renders Scheduler to the page
     </div>	
</asp:Content>

 
Beware, when the scheduler is rendered, it adjusts its height to the height of the parent element. That's why, when you use 'this.Scheduler.Render()', make sure that the parent container isn't collapsed and has the initial height set. Otherwise, the scheduler won't be displayed.

That's all. A basic task scheduler system is ready for use.

Download Scheduler .NET package


comments powered by Disqus