Monthly Event Calendar for ASP.NET MVC and jQuery Tutorial (Open-Source)

This tutorial shows how to create a full drag and drop monthly event calendar in a few easy steps.

• Loading events from a database (SQL Server, LINQ)
• C# source code
• ASP.NET MVC helper initialization code/jQuery initialization code
• Event creating using drag and drop
• Event moving using drag and drop
• Event resizing using drag and drop

Sample MVC view (using jQuery plugin):

@{ 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/jquery-1.9.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/DayPilot/common.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/DayPilot/month.js")" type="text/javascript"></script>

<div id="dpm"></div>

<script type="text/javascript">
var dp;

$(document).ready(function() {
  dp = $("#dpm").daypilotMonth({
    backendUrl: '@Url.Content("~/Home/Backend")'
  });
});
</script>

Sample MVC Controller (using SQL Server and LINQ to load the calendar event data):

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 and download the full source code.