November 14, 2014 05:22 by
Peter
Now, I we are going to learn how to create an Event Calendar using ASP.NET MVC 6, Entity Framework and jQuery Fullcalendar plugin. First thing, that you have to do is Install the full calendar plugin using the Nuget Package Manager with the following command:
Install-Package jQuery.Fullcalendar
After that you'll be able to either add the scripts inside the BundleConfig. cs or you could reference all of these immediately 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")
Currently Determine the full calendar in the Home/Index.cshtml page. We really need to outline the calendar along with page identity therefore build a div with all the id “calendar”
<div id=”calendar”></div>
Then, you must add the code below, 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);
}
Now, Make an Events class under the 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; }
}
Then Add the code below 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>
}