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

3 Mar

In this post we will learn how to implement a  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=”calendar”></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 a 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=”text/javascript”>// <![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

13 thoughts on “Event Calendar in ASP.NET MVC and Entity Framework by using jQuery Fullcalendar

  1. Hi,

    What version of Visual Studio are you using ?

    I can’t seem to get this to work yet.

    I am using VS2012 Pro.

    Thanks,
    Mike

  2. Good Afternoon, I am trying to add this code to the generic MVC5 site in VS Premium 2013. I am getting an error from your List code above – VS says I need at least 1 parameter for that object. ?

  3. Hello,
    Really amazing work man !
    This is working really well, when i get holidays from my database. I would like to add more color, depend of kind of holidays etc… How can I do that ? I have added a “status” in my Model. But how to change color depending on status ?

  4. This sample is great, its actually better than some of the commercial defect grade software like Syncfusion and Kendo

    Can you handle recurring events.

  5. Hi
    I followed the source code you uploaded on github but when I run it,the calender doesn’t appear,only the text “Event calendar” appears.what could be the course of this?

      • for the script I followed the example above and the words “scripts” on the first line and “type” on the second line are underlined in red but when I build the solution there’s no error

  6. Hi
    This sample is great. I tried it in MVC 5 but events: “/home/getevents/” doesn’t work. Do you now how to solve this problem.

Leave a Reply

Your email address will not be published. Required fields are marked *