Note that there are some explanatory texts on larger screens.

plurals
  1. POFullCalendar not showing Events
    text
    copied!<p>I want to bind the fullcalendar by arshaw into my MVC 3 Application and save the events into a SQL Server database which is in my App_Data Folder. But I have a few problems. On the View of my Action the calendar is not rendered but I see the JSON result from my controller. I looked in every thread on stackoverflow dealing with this problem and none of them helped me.</p> <p>Here is the code:</p> <h3>Database</h3> <pre><code>Name Datatype AllowNullValues id int False title varchar(MAX) False start varchar(MAX) False end varchar(MAX) True allday bit True </code></pre> <h3>Auto generated Calendar Model by ADO.NET</h3> <pre><code>namespace MvcApplication5.Models { using System; using System.Collections.Generic; public partial class Calendar { public int id { get; set; } public string title { get; set; } public string start { get; set; } public string end { get; set; } public Nullable&lt;bool&gt; allday { get; set; } } } </code></pre> <h3>HomeController.cs</h3> <pre><code> public ActionResult GetEvents() { IList&lt;Calendar&gt; taskList = new List&lt;Calendar&gt;(); taskList.Add(new Calendar { id = 1, title = "Google Search", start = DateTime.Now.ToString("MM-dd-yyyy"), end = DateTime.Now.AddDays(1).ToString("MM-dd-yyyy"), allday = false }); taskList.Add(new Calendar { id = 2, title = "Bing Search", start = DateTime.Now.AddDays(2).ToString("MM-dd-yyyy"), end = DateTime.Now.AddDays(3).ToString("MM-dd-yyyy"), allday = false }); return Json(taskList, JsonRequestBehavior.AllowGet); } </code></pre> <h3>GetEvents.cshtml</h3> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;GetEvents&lt;/title&gt; &lt;script src="@Url.Content("~/Content/fullcalendar-1.6.1/jquery/jquery-1.9.1.min.js")"&gt;&lt;/script&gt; &lt;script src="@Url.Content("~/Content/fullcalendar-1.6.1/jquery/jquery-ui-1.10.2.custom.min.js")"&gt;&lt;/script&gt; &lt;script src="@Url.Content("~/Content/fullcalendar-1.6.1/fullcalendar/fullcalendar.js")"&gt;&lt;/script&gt; &lt;script src="@Url.Content("~/Content/fullcalendar-1.6.1/fullcalendar/fullcalendar.min.js")"&gt;&lt;/script&gt; &lt;link href="@Url.Content("~/Content/fullcalendar-1.6.1/fullcalendar/fullcalendar.css")" rel="stylesheet" /&gt; &lt;/head&gt; &lt;body&gt; &lt;script type="text/javascript"&gt; $(document).ready(function () { var date = new Date(); var d = date.getDate(); var m = date.getMonth(); var y = date.getFullYear(); var calendar = $('#calendar').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, editable: true, eventSources: '/Home/GetEvents' }); }); &lt;/script&gt; &lt;style&gt; body { margin-top: 40px; text-align: center; font-size: 14px; font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif; } #calendar { width: 900px; margin: 0 auto; } &lt;/style&gt; &lt;div id ="calendar"&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>And this what I get in my View</p> <pre><code>[{"id":1,"title":"Google Search","start":"06-18-2013","end":"06-19-2013","allday":false},{"id":2,"title":"Bing Search","start":"06-20-2013","end":"06-21-2013","allday":false}] </code></pre> <p>When I return View() the calendar is correctly rendered. Can someone please help me? This makes me losing my nerves! Thanks in advance :)</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload