 | I will use the default ASP.NET MVC Web Application template to create new project. Please, note that the jQuery is included by default, so there is no need to download and reference it. The first step would be to place FullCalendar JavaScript and style-sheet files inside project’s Scripts and Content directory as shown in the picture. |
<head runat="server"> <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title> <link href="../../Content/Site.css" rel="stylesheet" type="text/css" /> <link href="../../Content/fullcalendar.css" rel="stylesheet" type="text/css" /> <script src="../../Scripts/jquery-1.3.2.js" type="text/javascript"></script> <script src="../../Scripts/fullcalendar.js" type="text/javascript"></script> </head>Now we are ready to use the calendar routines inside our views. How to do it? Just create a div tag and render the calendar’s HTML code inside. Here is how to modify Home’s Index.aspx:
<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server"> <script type="text/javascript"> $(document).ready(function() { $('#calendar').fullCalendar({ events: "/Home/CalendarData" }); }); </script> <div id="calendar"> </div> </asp:Content>The code above will render the calendar’s HTML inside a div with id=”calendar”. The calendar data will be delivered by invoking the following URL: /Home/CalendarData. This corresponds to CalendarData method from the Home controller. This controller is supposed to return the data in Json format. Here is a sample implementation:
[HandleError] public class HomeController : Controller { public ActionResult CalendarData() { IList<CalendarDTO> tasksList = new List<CalendarDTO>(); tasksList.Add(new CalendarDTO { id = 1, title = "Google search", start = ToUnixTimespan(DateTime.Now), end = ToUnixTimespan(DateTime.Now.AddHours(4)), url = "www.google.com" }); tasksList.Add(new CalendarDTO { id = 1, title = "Bing search", start = ToUnixTimespan(DateTime.Now.AddDays(1)), end = ToUnixTimespan(DateTime.Now.AddDays(1).AddHours(4)), url = "www.bing.com" }); return Json(tasksList); } private long ToUnixTimespan(DateTime date) { TimeSpan tspan = date.ToUniversalTime().Subtract( new DateTime(1970, 1, 1, 0, 0, 0)); return (long)Math.Truncate(tspan.TotalSeconds); } public ActionResult Index() { return View(); } public ActionResult About() { return View(); } }The code above creates two calendar entries called “Google search” and “Bing search”. Everything should be pretty simple, except the stuff around ToUnixTimespan routine.
There is well known problem with serialization of dates in Json format. There is no strict standard, so there are several approaches to this problem. For example, take a look here. The implementation adopted by Microsoft was not recognized by FullCalendar, so I had to introduce the ToUnixTimespan routine. Basically, this routine returns the seconds after 1/1/1970.
Because of the above, you should notice that the start and end dates are represented as int:
public class CalendarDTO { public int id { get; set; } public string title { get; set; } public long start { get; set; } public long end { get; set; } public string url { get; set; } }If you have done everything correct, the final result will be
Enjoy!
Edit: Due to the higher interset I have published the source code of this post here. Please note that Visual Studio 2008 is used and you need to convert the project if more recent version is used.
17 comments:
My hats off to you sir, my project went from 3 days to 1 hour. Woot!
thank you sir, been stressing with this for a long time now.
I copied everything you did, when building and navigating to Home/CalendarData I get a save file dialog.
The dialog contains all the json info. Any idea what I'm doing wrong?
You have to open the Home/Index URL. The Home/CalendarData is used by the FullCalendar to fetch data from the server.
Thanks for the quick reply!
However, navigating to Home/Index, renders nothing, and I get only the contents of my master page.
This is great application. but some how i am unable to stick the events which comes from action on my fullcalender control. what have to ?
Hello Sir,
Please help me. I copied all code but did not get any events in calendar. what m i doing wrong?
add JsonRequestBehavior.AllowGet like so.
i.e change return Json(tasksList);
To
return Json(tasksList,JsonRequestBehavior.AllowGet);
Great; may always be prosperity on all you do.
Thanks.
Thank you!!!!
like some other posters I dont get any events in the calendar
as far as i can see i copied the code exactly
thanks in advance
Shouldn't CalendarData be declared as JsonResult?
@neal
Most probably your jQuery setup is not correct. Please make sure that the jQuery and the FullCalendat bits are correctly referenced.
@Graham
Yes, you could declare it as JsonResult.
I have a stupid question: How on earth do you remove an event that you already created? I would like to know how can I delete an event after I have placed it on the calendar. There must be a simple way to do this
i want to use this full calendar in my application inside the wizard can anyone pls help me... it is not calling ashx page when i click on Next button
Great tutorial. Issue: on document.ready, full calender binds all the event details including the start & end date, but not time i.e the event is rendered in appropriate date slot as expected, but not in appropriate time slot.
is there any VB.net version instead of C#? That will be great if it have. Thanks.
Post a Comment