Click here to Skip to main content
15,886,258 members
Articles / Web Development / ASP.NET

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

Rate me:
Please Sign up or sign in to vote.
2.67/5 (3 votes)
9 Feb 2015CPOL 39.5K   11   7
In this post, we will learn how to implement an Event Calendar in ASP.NET MVC and Entity Framework by using jQuery Fullcalendar plugin.

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).

CSS
//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"));
ASP.NET
@ViewBag.Title - My ASP.NET Application
    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/fullcalendarcss")
    @Scripts.Render("~/bundles/modernizr")
ASP.NET
@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”.

HTML
<div id="calendar"></div>

Now, add the following code in the home controller:

JavaScript
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);
}
JavaScript
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;
}
JavaScript
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.

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

HTML
@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.

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

This article was originally posted at http://venkatbaggu.com/calendar-in-asp-net-mvc

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior) eBiz Solutions http://venkatbaggu.com/
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionProblem with the json I think Pin
Member 1365340330-Jan-18 22:24
Member 1365340330-Jan-18 22:24 
Question500 internal error Pin
Member 1290659811-Jan-17 3:35
Member 1290659811-Jan-17 3:35 
AnswerRe: 500 internal error Pin
Member 1254643413-Feb-17 9:59
Member 1254643413-Feb-17 9:59 
Question500 internanl error Pin
moemotto19-Nov-15 13:16
moemotto19-Nov-15 13:16 
AnswerRe: 500 internanl error Pin
Member 1254643413-Feb-17 9:58
Member 1254643413-Feb-17 9:58 
GeneralMy vote of 3 Pin
Peter Kovalchuk10-Feb-15 8:00
professionalPeter Kovalchuk10-Feb-15 8:00 
GeneralRe: My vote of 3 Pin
madan53510-Feb-15 16:15
madan53510-Feb-15 16:15 

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.