Update 2017/03/29 18:00
After many attempts, I found out that if the page loads with the 'Calendar' TAB being the active TAB it loads correctly, however, when the page is NOT the active tab I get the rangeStart error and no data gets loaded...
Though not clear why, I can at least make it work...somewhat...
Update 2017/03/29 16:00
We've made progress, fortunately through StackOverflow obviously... first I found attached two posts: How do I return the response from an asynchronous call?
jQuery: Return data after ajax call success
Which brought me to the fact that the data needs to be called async.
Another post:
Maping Events to FullCalender using JSON
Then gave me the hint how to render the JSON that comes back (my c# controller returns JSON data)
So, I altered my code as per below:
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
//defaultDate: moment().format("DD/MM/YYYY"),
timeFormat: 'HH(:mm)',
defaultView: 'month',
editable: true,
allDaySlot: false,
selectable: true,
slotMinutes: 15,
events: function (start, end, timezone, callback) {
$.ajax({
url: '@Url.Action("GetDiaryEvents", "Calendar")',
contentType: "application/json; charset=utf-8",
dataType: 'json',
data: {
// our hypothetical feed requires UNIX timestamps
start: start.format(),
end: end.format()
},
success: function(events)
{
//debugger;
$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar('addEventSource', events);
$('#calendar').fullCalendar('rerenderEvents' );
}
Which works nicely, however...it ONLY does so if the Calendar page is set to be the active page. If it is not the active page, the data does not get loaded and no data gets loaded even when switching views from month -> week -> day and back...
It still gives the rangeStart error after loading the full Index.cshtml page and no data gets loaded and no calendar is rendered.
Adding a 'render call' in the JQuery Tab call solves the 'no rendering' on the page. But still doesn't solve the no-data problem: https://fullcalendar.io/docs/display/render/
I found this post: FullCalendar-2.7.3 events not showing on initial load
That would indicate that my standard VS2015 jquery-3.1.1.js would be the main culpritt, anybody able to confirm that ?
The problem:
When loaded as partial, FullCalendar renders but no triggers are activated. No data is loaded.
Using
- Bootstrap 3.3.7
- MVC 5.2.3.0
- FullCalender 3.0.0
- jquery-3.1.1
- jquery-ui-1.12.1
- VS2015 in C#
The Setup
The page with the <div id="#calendar"></div> is a cshtml meant to load as a partial under a tabbed lay-out.
in the _Layout.cshtml of the tabbed Index.cshtml all major js/css gets loaded as per below:
@{
ViewBag.Title = "Main";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - Some Application</title>
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/datatables")
@Styles.Render("~/Content/css")
@Styles.Render("~/Content/themes/base/css")
@Styles.Render("~/Content/datatables")
When clicking 'Calendar Tab' the _prtCalendar.cshtml will be shown.
<!-- Calendar -->
<div role="tabpanel" class="tab-pane" id="_calendar">
@Html.Partial("~/Views/Company/_prtCalendar.cshtml", Model)
</div>
_prtCalendar.cshtml has a $(document).ready(function () { section that loads the Calendar. The Index.cshtml (in which the document is a part has a $(document).ready(function () { as well...
The JQuery-FullCalendar within that section all refer to CalendarController through @Url.Action('<action>,"Calendar")
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
//defaultDate: moment().format("DD/MM/YYYY"),
timeFormat: 'HH(:mm)',
defaultView: 'month',
editable: true,
allDaySlot: false,
selectable: true,
slotMinutes: 15,
events: '@Url.Action("GetDiaryEvents", "Calendar")',
eventClick: function (calEvent, jsEvent, view) {
alert('You clicked on event id: ' + calEvent.id
+ "\nSpecial ID: " + calEvent.someKey
+ "\nAnd the title is: " + calEvent.title);
},
The Trick
If I load _prtCalendar.cshtml directly,
i.e. I load all js/css directly in/through the _prtCalendar.cshtml page and display without _Layout.cshtml and Index.cshtml all works fine and all functions within CalendarController are called correctly.
However, IF I load _prtCalendar.cshtml as partial, things seem to go awry and nothing gets loaded and I get a JS error:
TypeError: rangeStart is undefined[Learn More] fullcalendar.js:11023:6
Now, I would assume that is somehow because the rangeStart apparently doesn't get set properly however I do not seem to be able to identify WHY not.
_prtCalendar.cshtml Loads both fullcalendar.js and moment.min.js first before attempting the $(document).ready call through below lines.
<link href="~/Content/fullcalendar.css" rel="stylesheet" />
<script type="text/javascript" src="~/Scripts/lib/moment.min.js"></script>
<script type="text/javascript" src="~/Scripts/fullcalendar.js"></script>
If I use the F12 Debugger, I can see that the $('#calendar') function is called but it fails on the rangeStart call.
Other buttons on other TAB's (in same Index.cshmtl) that refer to different controllers get called correctly when called from Index.cshmtl.
Any help would be very very welcome...:-)
