Click here to Skip to main content
11,638,173 members (70,816 online)
Click here to Skip to main content

AJAX Event Calendar (Scheduler) for ASP.NET MVC in 80 Lines of Code

, 9 Jun 2015 Apache 159.9K 9.7K 256
Rate this:
Please Sign up or sign in to vote.
How to build an AJAX Event Calendar (Scheduler) using the open-source DayPilot Lite for ASP.NET MVC library (Apache Software License 2.0).

AJAX Event Calendar for ASP.NET MVC

Introduction

This sample project shows how to build an AJAX Event Calendar (Scheduler) using the open-source DayPilot Lite for ASP.NET MVC library (Apache Software License 2.0). We will build our sample with ASP.NET MVC 5, Visual Studio 2012, and LocalDB SQL Server.

Online demos:

The monthly event calendar view is supported since DayPilot Lite for MVC 1.3 release.

We will need only 80 lines for code for the full drag&drop functionality (event creating, moving and resizing).

Three steps are necessary:

  • Library: Include DayPilot.Web.Mvc.dll and scripts in your project and add a reference to it.
  • View: Create a new MVC Razor view and add DayPilot Calendar widget using Html.DayPilotCalendar extension.
  • Controller: Create an MVC controller that will supply the data.

CSS Themes (New in 1.4)

Since v1.4, DayPilot Lite shares the JavaScript core with DayPilot Lite for JavaScript [javascript.daypilot.org]. See also HTML5 Event Calendar (Open-Source) [code.daypilot.org].

DayPilot Lite for ASP.NET MVC 1.4 [mvc.daypilot.org] introduces full CSS styling support, including CSS themes. You can also build your own theme in the online CSS theme designer [themes.daypilot.org].

Google-Like CSS Theme

AJAX Event Calendar for ASP.NET MVC - Google-Like CSS Theme

Transparent CSS Theme

AJAX Event Calendar for ASP.NET MVC - Transparent CSS Theme

Green CSS Theme

AJAX Event Calendar for ASP.NET MVC - Green CSS Theme

White CSS Theme

AJAX Event Calendar for ASP.NET MVC - White CSS Theme

Traditional CSS Theme

AJAX Event Calendar for ASP.NET MVC - Traditional CSS Theme

1. DayPilot.Web.Mvc Library

Download DayPilot Lite for ASP.NET MVC open-source package.

Copy DayPilot JavaScript files from the Scripts folder of the package to your project (Scripts/DayPilot):

  • daypilot-all.min.js

Copy DayPilot.Web.Mvc.dll from the Binary folder of the package to your project (Bin).

Add a reference to DayPilot.Web.Mvc.dll:

Add reference to DayPilot.Web.Mvc.dll

2. MVC View (8 Lines of Code)

Create a new ASP.NET MVC view (Views/Home/Index.cshtml):

@{ ViewBag.Title = "ASP.NET MVC Razor Event Calendar"; }
<h2>ASP.NET MVC Razor Event Calendar</h2> 

Add DayPilot JavaScript libraries:

<script src="@Url.Content("~/Scripts/DayPilot/daypilot-all.min.js")" type="text/javascript"></script> 

Add the event calendar initialization code:

@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig
{
  BackendUrl = Url.Content("~/Home/Backend"),
}) 

Note that the minimum required code is quite short. It only has to point to the backend MVC controller ("~/Home/Backend") that will supply the calendar event data using an AJAX call.

Don't forget to add DayPilot.Web.Mvc namespace to /Views/Web.config so it recognizes the Html.DayPilotCalendar helper:

<configuration>
  <system.web.webPages.razor>
    <pages pageBaseType="System.Web.Mvc.WebViewPage">
      <namespaces>
        ...
        <add namespace="DayPilot.Web.Mvc"/>
      </namespaces>
    </pages>
  </system.web.webPages.razor>
</configuration>

This is the complete code of our new MVC view with the event calendar:

@{ ViewBag.Title = "ASP.NET MVC Razor Event Calendar"; }

<h2>ASP.NET MVC Razor Event Calendar</h2>

<script src="@Url.Content("~/Scripts/DayPilot/daypilot-all.min.js")" type="text/javascript"></script>

@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig
{
  BackendUrl = Url.Content("~/Home/Backend")
})

3. MVC Controller (34 Lines of Code)

Create a new MVC controller (Controllers/HomeController.cs):

public class HomeController : Controller
{
  public ActionResult Index()
  {
    return View();
  }
}

Add a new action handler for the calendar backend. It will be accessible as /Home/Backend.

public ActionResult Backend()
{
  return new Dpc().CallBack(this);
}

This action will pass control to a new instance of a custom Dpc class that derives from DayPilotCalendar:

class Dpc : DayPilotCalendar
{
  protected override void OnInit(InitArgs e)
  {
    var db = new DataClasses1DataContext();
    Events = from ev in db.events select ev;

    DataIdField = "id";
    DataTextField = "text";
    DataStartField = "eventstart";
    DataEndField = "eventend";

    Update();
  }
}  

We have loaded the calendar event data from a simple MS SQL table called "events" using a LINQ to SQL classes generated using Visual Studio 2010 wizard (DataClasses1.dbml).

LINQ to SQL

The "events" table has a very simple structure:

Events table structure

The table fields (id, text, eventstart, eventend) are mapped to the required DayPilotCalendar fields using Data*Field properties:

DataIdField = "id";
DataTextField = "text";
DataStartField = "eventstart";
DataEndField = "eventend";

Calling Update() will send the calendar event data to the client and update the display:

ASP.NET Event Calendar for ASP.NET MVC Day View

And here is the complete code of the MVC controller that supplies the calendar event data to the client using AJAX:

using System;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using DayPilot.Web.Mvc;
using DayPilot.Web.Mvc.Events.Calendar;

namespace DayPilotCalendarMvc.Controllers
{
  public class HomeController : Controller
  {
    public ActionResult Index()
    {
      return View();
    }

    public ActionResult Backend()
    {
      return new Dpc().CallBack(this);
    }

    class Dpc : DayPilotCalendar
    {
      protected override void OnInit(InitArgs e)
      {
        var db = new DataClasses1DataContext();
        Events = from ev in db.events select ev;

        DataIdField = "id";
        DataTextField = "text";
        DataStartField = "eventstart";
        DataEndField = "eventend";

        Update();
      }
    }
  }
}

4. Adding AJAX Drag&Drop Functionality (38 Lines of Code)

AJAX Event Calendar for ASP.NET MVC Drag&Drop

In order to enable the drag and drop functionality (event creating, moving, and resizing) we need to add the following lines to the view (four new lines):

@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig
{
  BackendUrl = Url.Content("~/Home/Backend"),
  EventMoveHandling = DayPilot.Web.Mvc.Events.Calendar.EventMoveHandlingType.CallBack,
  EventResizeHandling = DayPilot.Web.Mvc.Events.Calendar.EventResizeHandlingType.CallBack,
  TimeRangeSelectedHandling = DayPilot.Web.Mvc.Events.Calendar.TimeRangeSelectedHandlingType.JavaScript,
  TimeRangeSelectedJavaScript = "dpc.timeRangeSelectedCallBack(start, 
        end, null, { name: prompt('New Event Name:', 'New Event') });"
})

The controller must be extended as well. It will handle the events (EventMove, EventResize, and TimeRangeSelected) and update the database (34 new lines):

using System;
using System.Linq;
using System.Web.Mvc;
using DayPilot.Web.Mvc;
using DayPilot.Web.Mvc.Enums;
using DayPilot.Web.Mvc.Events.Calendar;

namespace DayPilotCalendarMvc.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Backend()
        {
            return new Dpc().CallBack(this);
        }

        class Dpc : DayPilotCalendar
        {
            DataClasses1DataContext db = new DataClasses1DataContext();

            protected override void OnInit(InitArgs e)
            {
                Update(CallBackUpdateType.Full);
            }

            protected override void OnEventResize(EventResizeArgs e)
            {
                var toBeResized = (from ev in db.Events where ev.id == Convert.ToInt32(e.Id) select ev).First();
                toBeResized.eventstart = e.NewStart;
                toBeResized.eventend = e.NewEnd;
                db.SubmitChanges();
                Update();
            }

            protected override void OnEventMove(EventMoveArgs e)
            {
                var toBeResized = (from ev in db.Events where ev.id == Convert.ToInt32(e.Id) select ev).First();
                toBeResized.eventstart = e.NewStart;
                toBeResized.eventend = e.NewEnd;
                db.SubmitChanges();
                Update();
            }

            protected override void OnTimeRangeSelected(TimeRangeSelectedArgs e)
            {
                var toBeCreated = new Event {eventstart = e.Start, 
                                             eventend = e.End, text = (string) e.Data["name"]};
                db.Events.InsertOnSubmit(toBeCreated);
                db.SubmitChanges();
                Update();
            }

            protected override void OnFinish()
            {
                if (UpdateType == CallBackUpdateType.None)
                {
                    return;
                }

                Events = from ev in db.Events select ev;

                DataIdField = "id";
                DataTextField = "text";
                DataStartField = "eventstart";
                DataEndField = "eventend";
            }
        }
    }
}

5. Bonus: Week View (+1 Line)

AJAX Event Calendar for ASP.NET MVC

Switching to week view is a simple as adding a single line of code to the view:

ViewType = DayPilot.Web.Mvc.Enums.Calendar.ViewType.Week,

It goes here:

@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig
{
  BackendUrl = Url.Content("~/Home/Backend"),
  ViewType = DayPilot.Web.Mvc.Enums.Calendar.ViewType.Week,
  EventMoveHandling = DayPilot.Web.Mvc.Events.Calendar.EventMoveHandlingType.CallBack,
  EventResizeHandling = DayPilot.Web.Mvc.Events.Calendar.EventResizeHandlingType.CallBack,
  TimeRangeSelectedHandling = DayPilot.Web.Mvc.Events.Calendar.TimeRangeSelectedHandlingType.JavaScript,
  TimeRangeSelectedJavaScript = 
    "dpc.timeRangeSelectedCallBack(start, end, null, { name: prompt('New Event Name:', 'New Event') });"
})

Other supported ViewType modes are WorkWeek and Days (custom number of days, set using Days property).

Month View (New in 1.3)

Monthly AJAX Event Calendar for ASP.NET MVC

See also the Monthly Event Calendar tutorial:

See Also

History

License

This article, along with any associated source code and files, is licensed under The Apache License, Version 2.0

Share

About the Author

Dan Letecky
Czech Republic Czech Republic
My open-source event calendar/scheduling AJAX controls:

DayPilot for JavaScript/HTML5/jQuery
DayPilot for ASP.NET
DayPilot for MVC
DayPilot for Java

You may also be interested in...

Comments and Discussions

 
AnswerRe: how to add Pin
Dan Letecky30-Jan-14 23:06
memberDan Letecky30-Jan-14 23:06 
QuestionChange of time in left side Pin
ArsalanAzeem3-Oct-13 3:37
memberArsalanAzeem3-Oct-13 3:37 
AnswerRe: Change of time in left side Pin
Dan Letecky24-Oct-13 1:15
memberDan Letecky24-Oct-13 1:15 
QuestionJavascript error Pin
JeffVaccaro30-Sep-13 11:24
memberJeffVaccaro30-Sep-13 11:24 
AnswerRe: Javascript error Pin
Dan Letecky2-Oct-13 8:18
memberDan Letecky2-Oct-13 8:18 
QuestionError Pin
Mirkox6830-Jul-13 23:49
memberMirkox6830-Jul-13 23:49 
QuestionRe: Error Pin
Mirkox6831-Jul-13 4:37
memberMirkox6831-Jul-13 4:37 
AnswerRe: Error Pin
Dan Letecky31-Jul-13 4:46
memberDan Letecky31-Jul-13 4:46 
AnswerRe: Error Pin
Mirkox6831-Jul-13 5:27
memberMirkox6831-Jul-13 5:27 
GeneralMy vote of 5 Pin
Sampath Lokuge29-Jun-13 5:20
professionalSampath Lokuge29-Jun-13 5:20 
GeneralRe: My vote of 5 Pin
Dan Letecky30-Jun-13 23:02
memberDan Letecky30-Jun-13 23:02 
GeneralMy vote of 5 Pin
freegiuliop28-Jun-13 2:50
memberfreegiuliop28-Jun-13 2:50 
GeneralRe: My vote of 5 Pin
Dan Letecky30-Jun-13 23:01
memberDan Letecky30-Jun-13 23:01 
QuestionAwesome innovation... Pin
Eone James24-Jun-13 22:16
memberEone James24-Jun-13 22:16 
AnswerRe: Awesome innovation... Pin
Dan Letecky30-Jun-13 23:01
memberDan Letecky30-Jun-13 23:01 
QuestionNice Pin
Liuxf30-Apr-13 3:38
memberLiuxf30-Apr-13 3:38 
AnswerRe: Nice Pin
Dan Letecky30-Apr-13 3:40
memberDan Letecky30-Apr-13 3:40 
Thanks!
--
My open-source AJAX controls:
DayPilot - Calendar/Scheduling Control for ASP.NET WebForms
DayPilot for MVC - Calendar/Scheduling Control for ASP.NET MVC
DayPilot for Java - Calendar/Scheduling Control for Java

GeneralMy vote of 5 Pin
Edo Tzumer25-Apr-13 1:26
professionalEdo Tzumer25-Apr-13 1:26 
GeneralRe: My vote of 5 Pin
Dan Letecky25-Apr-13 2:25
memberDan Letecky25-Apr-13 2:25 
GeneralMy vote of 5 Pin
Humayun Kabir Mamun25-Apr-13 0:44
memberHumayun Kabir Mamun25-Apr-13 0:44 
GeneralRe: My vote of 5 Pin
Dan Letecky25-Apr-13 2:25
memberDan Letecky25-Apr-13 2:25 
GeneralMy vote of 5 Pin
Prasad Khandekar24-Apr-13 5:05
memberPrasad Khandekar24-Apr-13 5:05 
GeneralRe: My vote of 5 Pin
Dan Letecky24-Apr-13 5:43
memberDan Letecky24-Apr-13 5:43 
GeneralMy vote of 5 Pin
igambin20-Mar-13 2:02
memberigambin20-Mar-13 2:02 
GeneralRe: My vote of 5 Pin
Dan Letecky20-Mar-13 2:10
memberDan Letecky20-Mar-13 2:10 
GeneralMy vote of 5 Pin
Maa_7720-Mar-13 0:04
memberMaa_7720-Mar-13 0:04 
GeneralRe: My vote of 5 Pin
Dan Letecky20-Mar-13 0:37
memberDan Letecky20-Mar-13 0:37 
GeneralMy vote of 5 Pin
Shubham Choudhary19-Mar-13 20:36
memberShubham Choudhary19-Mar-13 20:36 
GeneralRe: My vote of 5 Pin
Dan Letecky20-Mar-13 0:37
memberDan Letecky20-Mar-13 0:37 
GeneralMy vote of 5 Pin
Renju Vinod19-Mar-13 20:22
memberRenju Vinod19-Mar-13 20:22 
GeneralRe: My vote of 5 Pin
Dan Letecky20-Mar-13 0:37
memberDan Letecky20-Mar-13 0:37 
GeneralMy vote of 5 Pin
Abinash Bishoyi19-Mar-13 6:34
memberAbinash Bishoyi19-Mar-13 6:34 
GeneralRe: My vote of 5 Pin
Dan Letecky19-Mar-13 7:36
memberDan Letecky19-Mar-13 7:36 
QuestionGreat !! Pin
MohamedKamalPharm11-Dec-12 23:32
memberMohamedKamalPharm11-Dec-12 23:32 
AnswerRe: Great !! Pin
Dan Letecky20-Mar-13 0:36
memberDan Letecky20-Mar-13 0:36 
GeneralRe: Great !! Pin
MohamedKamalPharm20-Mar-13 7:40
memberMohamedKamalPharm20-Mar-13 7:40 
Questionan awesome article Pin
Md. YaSiR aRaFaT21-Nov-12 20:51
memberMd. YaSiR aRaFaT21-Nov-12 20:51 
AnswerRe: an awesome article Pin
Dan Letecky22-Nov-12 20:42
memberDan Letecky22-Nov-12 20:42 
GeneralMy vote of 5 Pin
Md. YaSiR aRaFaT21-Nov-12 20:50
memberMd. YaSiR aRaFaT21-Nov-12 20:50 
GeneralRe: My vote of 5 Pin
Dan Letecky22-Nov-12 20:41
memberDan Letecky22-Nov-12 20:41 
GeneralMy vote of 5 Pin
fahad1221-Nov-12 18:34
memberfahad1221-Nov-12 18:34 
GeneralRe: My vote of 5 Pin
Dan Letecky22-Nov-12 20:41
memberDan Letecky22-Nov-12 20:41 
GeneralMy vote of 5 Pin
Monjurul Habib16-Oct-12 10:30
memberMonjurul Habib16-Oct-12 10:30 
GeneralRe: My vote of 5 Pin
Dan Letecky17-Oct-12 1:09
memberDan Letecky17-Oct-12 1:09 
Questionsome enhancement Pin
melvintcs3-Oct-12 20:18
membermelvintcs3-Oct-12 20:18 
AnswerRe: some enhancement Pin
Dan Letecky15-Oct-12 8:08
memberDan Letecky15-Oct-12 8:08 
GeneralGood work! Pin
Pavel Vladov4-Sep-12 22:07
memberPavel Vladov4-Sep-12 22:07 
GeneralRe: Good work! Pin
Dan Letecky15-Oct-12 8:06
memberDan Letecky15-Oct-12 8:06 
GeneralMy vote of 5 Pin
Pritesh Aryan3-Aug-12 4:10
memberPritesh Aryan3-Aug-12 4:10 
GeneralRe: My vote of 5 Pin
Dan Letecky5-Aug-12 6:13
memberDan Letecky5-Aug-12 6:13 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.150728.1 | Last Updated 9 Jun 2015
Article Copyright 2012 by Dan Letecky
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid