Event Calendar in ASP.NET MVC and Entity Framework by using jQuery Fullcalendar

In this post, we will learn how to implement an Event Calendar in ASP.NET MVC and Entity Framework by using jQuery Fullcalendar plugin.

Implementation

Install the full calendar plugin by using the Nuget Package Manager from the below command:

Install-Package jQuery.Fullcalendar

After that, you can either add the scripts in the BundleConfig.cs or you can reference them directly in the _Layout.cshtml page (Master Page).

//Calendar css file
bundles.Add(new StyleBundle("~/Content/fullcalendarcss").Include(
             "~/Content/themes/jquery.ui.all.css",
             "~/Content/fullcalendar.css"));

//Calendar Script file
bundles.Add(new ScriptBundle("~/bundles/fullcalendarjs").Include(
            "~/Scripts/jquery-ui-1.10.4.min.js",
            "~/Scripts/fullcalendar.min.js"));

@ViewBag.Title - My ASP.NET Application
    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/fullcalendarcss")
    @Scripts.Render("~/bundles/modernizr")

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/fullcalendarjs")

Now, define the full calendar in the Home/Index.cshtml page. We have to define the calendar with page identity so create a div with the id “calendar”.

<div id=&rdquo;calendar&rdquo;></div>

Now, add the following code in the home controller:

public ActionResult  GetEvents(double start, double end)
{
    var fromDate = ConvertFromUnixTimestamp(start);
    var toDate = ConvertFromUnixTimestamp(end);

    //Get the events
    //You may get from the repository also
    var eventList = GetEvents();

    var rows = eventList.ToArray();
    return Json(rows, JsonRequestBehavior.AllowGet);
}

private List GetEvents()
{
    List eventList = new List();

    Events newEvent = new Events{
        id = "1",
        title = "Event 1",
        start = DateTime.Now.AddDays(1).ToString("s"),
        end = DateTime.Now.AddDays(1).ToString("s"),
        allDay = false
    };

    eventList.Add(newEvent);

    newEvent = new Events
    {
        id = "1",
        title = "Event 3",
        start = DateTime.Now.AddDays(2).ToString("s"),
        end = DateTime.Now.AddDays(3).ToString("s"),
        allDay = false
    };

    eventList.Add(newEvent);

    return eventList;
}

private static DateTime ConvertFromUnixTimestamp(double timestamp)
{
    var origin = new DateTime(1970, 1, 1, 0, 0, 0, 0);
    return origin.AddSeconds(timestamp);
}

Create an Events class under Models folder.

public class Events
{
    public string id { get; set; }
    public string title { get; set; }
    public string date { get; set; }
    public string start { get; set; }
    public string end { get; set; }
    public string url { get; set; }

    public bool allDay { get; set; }
}

Add the script to your page:

@section scripts{

<script type=&rdquo;text/javascript&rdquo;>// <![CDATA[
$(document).ready(function () {
$('#calendar').fullCalendar({
theme: true,

defaultView: 'agendaDay',
editable: false,
events: "/home/getevents/"
});
});

// ]]></script>

}

Source Code

You can download the source from the Github.

The post Event Calendar in ASP.NET MVC and Entity Framework by using jQuery Fullcalendar appeared first on Venkat Baggu Blog.