Click here to Skip to main content
15,867,325 members
Articles / Web Development / HTML

DayPilot - AJAX Monthly Event Calendar for ASP.NET MVC in 10 Minutes

Rate me:
Please Sign up or sign in to vote.
4.98/5 (32 votes)
11 Mar 2020Apache4 min read 97.9K   3K   98   21
Create an AJAX monthly event calendar (with drag and drop support) displaying data from SQL Server database in just 10 minutes (including a coffee break).
The open-source DayPilot Lite for ASP.NET MVC 1.3 introduces an AJAX monthly event calendar. In this post, we will see how to setup the project, create a new ASP.NET MVC view and controller, how to load the calendar, drag and drop calendar event moving, CSS themes and event customization.

AJAX Monthly Event Calendar for ASP.NET MVC

The open-source DayPilot Lite for ASP.NET MVC 1.3 introduces an AJAX monthly event calendar.

It complements the existing daily event calendar:

AJAX Daily Event Calendar for ASP.NET MVC

And weekly event calendar:

AJAX Weekly Event Calendar for ASP.NET MVC

See also:

There is also a standalone event calendar/scheduler for JavaScript/HTML5/jQuery [javascript.daypilot.org] available (DayPilot Lite for JavaScript):

Event Calendar for JavaScript/HTML5/jQuery

For details on using DayPilot for JavaScript with ASP.NET MVC and PHP backends, please see the HTML5 Event Calendar (Open-Source) tutorial.

1. Project Setup (00:00:00 - 00:03:00)

Download DayPilot Lite for ASP.NET MVC open-source package. The download package is small so you won't spend too much time downloading it.

Copy DayPilot JavaScript file 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. ASP.NET MVC View (00:03:00 - 00:04:00)

AJAX Monthly Event Calendar for ASP.NET MVC and jQuery

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

HTML
@{ ViewBag.Title = "AJAX Monthly Event Calendar for ASP.NET MVC"; }
<h2>AJAX Monthly Event Calendar for ASP.NET MVC</h2>

Add DayPilot JavaScript libraries:

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

Add the event calendar initialization code:

HTML
@Html.DayPilotMonth("dp", new DayPilotMonthConfig
{
  BackendUrl = Url.Content("~/Home/Backend"),
})

You can see 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.DayPilotMonth helper:

XML
<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:

HTML
@{ ViewBag.Title = "AJAX Monthly Event Calendar for ASP.NET MVC"; }

<h2>AJAX Monthly Event Calendar for ASP.NET MVC</h2>

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

@Html.DayPilotMonth("dp", new DayPilotMonthConfig
{
  BackendUrl = Url.Content("~/Home/Backend"),
})

3. Coffee Break (00:04:00 - 00:05:00)

Now you can make your coffee. But don't try to drink it within a minute, it's too hot! We will get back to the coffee in just a few minutes.

4. ASP.NET MVC Controller (00:05:00 - 00:05:30)

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

C#
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.

C#
public ActionResult Backend()
{
  return new Dpm().CallBack(this);
}

5. Loading Calendar Events (00:05:30 - 00:08:00)

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

C#
class Dpm : DayPilotMonth
{
  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 "Event" table contains four fields (id, text, eventstart, eventend):

AJAX Monthly Event Calendar for ASP.NET MVC - SQL Server

The table fields are mapped to the required DayPilotMonth fields using Data*Field properties:

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

Calling Update() will refresh the calendar event data on the client side.

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

C#
using System;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using DayPilot.Web.Mvc;
using DayPilot.Web.Mvc.Events.Month;

namespace DayPilotMonthLiteMvc4.Controllers
{
  public class HomeController : Controller
  {

    public ActionResult Index()
    {
      return View();
    }

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

    class Dpm : DayPilotMonth
    {
      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();
      }
    }
  }
} 

Read more about event loading [doc.daypilot.org].

6. Drag and Drop Calendar Event Moving (00:08:00 - 00:10:00)

AJAX Monthly Event Calendar for ASP.NET MVC - Event Moving

In order to enable the drag and drop event moving, we need to add EventMoveHandling to the config:

C#
@Html.DayPilotMonth("dp", new DayPilotMonthConfig
{
  BackendUrl = Url.Content("~/Home/Backend"),
  EventMoveHandling = DayPilot.Web.Mvc.Events.Month.EventMoveHandlingType.CallBack,
})

The controller must be extended as well. It will handle the EventMove event and update the database:

C#
class Dpm : DayPilotMonth
{
  // ...
  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();
  }
  // ...
} 

Read more about event moving [doc.daypilot.org].

CSS Themes (Version 1.4)

DayPilot Lite for ASP.NET MVC 1.4 brings support for CSS themes [doc.daypilot.org]. The following themes are included.

Transparent CSS Calendar Theme

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

Google-Like CSS Calendar Theme

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

Green CSS Calendar Theme

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

Traditional CSS Calendar Theme

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

Event Customization (Version 1.5)

Since version 1.5 SP3, DayPilot Lite for ASP.NET MVC supports event customization [doc.daypilot.org]. You can customize the events on the server side using OnBeforeEventRender event handler.

Example:

C#
protected override void OnBeforeEventRender(BeforeEventRenderArgs e)
{
  e.BackgroundColor = "#FFE599";
  e.BorderColor = "#F1C232";
  e.FontColor = "#000";
}

You can also change the event properties depending on custom field of the event data object:

C#
protected override void OnBeforeEventRender(BeforeEventRenderArgs e)
{
  e.Html += " owner:" + e.DataItem["owner"];  // accessing the "owner" field 
                                              // from the data source
  e.BackgroundColor = (string) e.DataItem["color"];
}

Properties that can be customized:

  • Html
  • CssClass
  • BackgroundColor
  • BorderColor
  • FontColot
  • ToolTip

Related Scheduling Articles and Projects

History

License

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


Written By
Czech Republic Czech Republic
My open-source event calendar/scheduling web UI components:

DayPilot for JavaScript, Angular, React and Vue

Comments and Discussions

 
GeneralMy vote of 5 Pin
Karthik_Mahalingam15-Mar-17 4:04
professionalKarthik_Mahalingam15-Mar-17 4:04 
QuestionI would buy the person a beer who gives me this tutorial in VB... Pin
Member 127192343-Sep-16 23:38
Member 127192343-Sep-16 23:38 
AnswerRe: I would buy the person a beer who gives me this tutorial in VB... Pin
Garth Arnold30-Jan-17 11:57
Garth Arnold30-Jan-17 11:57 
QuestionDayPilot Month Calendar is not working on Production Pin
Salam Modallal30-Aug-16 10:10
Salam Modallal30-Aug-16 10:10 
AnswerRe: DayPilot Month Calendar is not working on Production Pin
Dan Letecky30-Aug-16 21:49
Dan Letecky30-Aug-16 21:49 
GeneralRe: DayPilot Month Calendar is not working on Production Pin
Salam Modallal31-Aug-16 9:17
Salam Modallal31-Aug-16 9:17 
QuestionHow to Prevent the Event Moving?? Pin
Victor Ebe21-May-15 6:41
Victor Ebe21-May-15 6:41 
QuestionLogin for use of application? Pin
Member 1092961010-Jul-14 4:09
Member 1092961010-Jul-14 4:09 
AnswerRe: Login for use of application? Pin
Dan Letecky10-Jul-14 4:16
Dan Letecky10-Jul-14 4:16 
GeneralRe: Login for use of application? Pin
Member 1092961010-Jul-14 4:52
Member 1092961010-Jul-14 4:52 
GeneralRe: Login for use of application? Pin
Dan Letecky10-Jul-14 10:06
Dan Letecky10-Jul-14 10:06 
You can post your questions in the DayPilot forum:

http://forums.daypilot.org/[^]

or send it to support@daypilot.org.
--
My open-source AJAX controls:
DayPilot for JavaScript/HTML5/jQuery - Calendar/Scheduling Control for JavaScript
DayPilot for ASP.NET - 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

Questionmy vote 6/5 Pin
Luis G. Valera29-May-14 12:20
professionalLuis G. Valera29-May-14 12:20 
AnswerRe: my vote 6/5 Pin
Dan Letecky29-May-14 20:20
Dan Letecky29-May-14 20:20 
GeneralGreat! Pin
cassio.scherer28-May-14 15:43
professionalcassio.scherer28-May-14 15:43 
GeneralRe: Great! Pin
Dan Letecky28-May-14 20:27
Dan Letecky28-May-14 20:27 
QuestionNice! Pin
Volynsky Alex11-Feb-14 10:20
professionalVolynsky Alex11-Feb-14 10:20 
AnswerRe: Nice! Pin
Dan Letecky11-Feb-14 20:38
Dan Letecky11-Feb-14 20:38 
GeneralRe: Nice! Pin
Volynsky Alex12-Feb-14 0:17
professionalVolynsky Alex12-Feb-14 0:17 
GeneralMy vote of 5 Pin
Prasad Khandekar6-Apr-13 10:42
professionalPrasad Khandekar6-Apr-13 10:42 
GeneralRe: My vote of 5 Pin
Dan Letecky6-Apr-13 10:43
Dan Letecky6-Apr-13 10:43 

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

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