Combining “FullCalendar” with “KS.Umbraco7.Calendar” to create a great Umbraco events listing

EventsList_all.cshtml

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@using KS.Umbraco7.Calendar.Core
@{
    Layout = "Layout.cshtml";
}

@section styles {
	<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.min.css' />
	<link media="print" rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.print.css' />
}

<div id='calendar'></div>

		  
@section scripts {
	<script src='//cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.min.js'></script>
	<script src='//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.min.js'></script>

	<script>
		$(document).ready(function() {
			$('#calendar').fullCalendar({
			header: {
				left: 'today',
				center: 'title',
				right: 'prev,next'
			},
				editable: false,
				eventLimit: true, // allow "more" link when too many events
				events: [
					@{
						var i = 1;
						
				@** 
				
				This will list ALL events that are child nodes of current page
				 For most use cases you will want to change this to load events on demand
				**@
				
						foreach (var e in Calendar.getEvents(DateTime.MinValue, DateTime.MaxValue,  "EventDate", CurrentPage.Id)) {
							if (i!=1) {
								<text>,</text>
							}
							i++;
							<text>
							{
								title: '@Html.Raw(HttpUtility.JavaScriptStringEncode(@e.content.Name))',
								url: '@e.content.Url' + '?d=@Url.Encode(e.startDate.ToString())',
								start: '@e.startDate.ToString("yyyy-MM-dd")'
								@if (e.endDate!=null && e.endDate.HasValue) {
									<text>,end: '@e.endDate.Value.ToString("yyyy-MM-dd")'</text>
								}
							}
							</text>
						}	
					}
			]
			})

		});
	</script>
}

This example used here: http://endzonesoftware.com/combining-fullcalendar-ks-umbraco7-calendar-create-great-umbraco-events-listing/