Simple ASP.NET Сalendar App with Scheduler

ASP.NET Calendar Scheduler App

Simple ASP.NET Сalendar App with Scheduler

Step 1. Create a new Microsoft Visual Studio Project

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

Step 2. Add the Scheduler reference

Once you have created a new MVC 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

At this step, 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 model

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

Step 6. Create a controller

Create a controller and name it, BasicSchedulerController.cs. Copy the following code there:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
 
using mySchedulerApp.Models;
 
using DHTMLX.Scheduler;
using DHTMLX.Scheduler.Data;
using DHTMLX.Common;
 
 
namespace mySchedulerApp.Controllers
{
    public class BasicSchedulerController : Controller
    {
        public ActionResult Index() 
        {
            var scheduler = new DHXScheduler(this); //initializes dhtmlxScheduler
            scheduler.LoadData = true;// allows loading data
            scheduler.EnableDataprocessor = true;// enables DataProcessor in order to enable implementation CRUD operations
            return View(scheduler);
        }
 
        public ActionResult Data()
        {//events for loading to scheduler
            return new SchedulerAjaxData(new SampleDataContext().Events);
        }
 
        public ActionResult Save(Event updatedEvent, FormCollection formData)
        {
            var action = new DataAction(formData);
            var context = new SampleDataContext();
 
            try
            {
                switch (action.Type)
                {
                    case DataActionTypes.Insert: // your Insert logic
                        context.Events.InsertOnSubmit(updatedEvent);
                        break;
                    case DataActionTypes.Delete: // your Delete logic
                        updatedEvent = context.Events.SingleOrDefault(ev => ev.id == updatedEvent.id);
                        context.Events.DeleteOnSubmit(updatedEvent);
                        break;
                    default:// "update" // your Update logic
                        updatedEvent = context.Events.SingleOrDefault(
                        ev => ev.id == updatedEvent.id);
                        UpdateModel(updatedEvent);
                        break;
                }
                context.SubmitChanges();
                action.TargetId = updatedEvent.id;
            }
            catch (Exception a)
            {
                action.Type = DataActionTypes.Error;
            }
            return (new AjaxSaveResponse(action));
        }
    }
}

The Controller should contain 3 main actions:

  • Index() - defines scheduler configuration;
  • Data() - loads data (events) to the scheduler;
  • Save() - defines Create/Update/Delete logic.

Step 7. Create a view

Controller action Index() exposed by the BasicScheduler class returns a view. The view contains HTML markup and content that is sent to the browser.

You should create your view in the right location: create a subfolder in the Views folder with name 'BasicScheduler'. Within the subfolder, create an .aspx file with name 'Index'.

Copy the following content to the file:

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
	<style type="text/css">
	    html, body
	    {
	        height:100%;
	        padding:0px;
	        margin:0px;
	    }
	</style>
</head>
<body>
 
     <h2>Basic Initialization</h2>
 
    <%= Model.Render() %> 
 
</body>
</html>

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

If you are working on a MVC 3 project, you may use Razor view engine. In this case initialization code will look like the code below:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
     html, body
     {
         height:100%;
         padding:0px;
         margin:0px;
     }
    </style>
</head>
<body>
 
    <h2>Basic Initialization</h2>
    @Html.Raw(Model.Render())
 
</body>
</html>

Note, in the Global.asax file you should set the 'controller' parameter to 'BasicScheduler'. Leave the remaining parameters as they are.

{ controller = "BasicScheduler", action = "Index", id = UrlParameter.Optional }

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

Download Scheduler .NET package


comments powered by Disqus