In this post I will show you how to create your own Jquery Calendar view using the simple Jquery and SharePoint Rest API. I have used the Jquery full calendar plugin as it is very easy to use. It is highly customizable and very light weight.
I have created a Calendar list in my site and named it as ‘UpcomingEvents’. We will use this list to store our events or meetings.
You will required to add the reference to the following files from FullCalendar.io
Create JqueryFullCalendar.txt and add the above mentioned references in the file,
JqueryFullCalendar.txt
I have created a Calendar list in my site and named it as ‘UpcomingEvents’. We will use this list to store our events or meetings.
You will required to add the reference to the following files from FullCalendar.io
<link href="../SiteAssets/css/fullcalendar.css" rel="stylesheet"/>
<link href="../SiteAssets/css/fullcalendar.print.css" rel="stylesheet" media='print' />
<script type="text/javascript" src="../SiteAssets/js/jquery-1.11.0.min.js" ></script>
<script type="text/javascript" src="../SiteAssets/js/fullcalendar.min.js" ></script>
<script type="text/javascript" src="../SiteAssets/JqueryFullCalendar.js" ></script>
Create JqueryFullCalendar.txt and add the above mentioned references in the file,
JqueryFullCalendar.txt
<link href="../SiteAssets/css/fullcalendar.css" rel="stylesheet"/>
<link href="../SiteAssets/css/fullcalendar.print.css" rel="stylesheet" media='print' />
<script type="text/javascript" src="../SiteAssets/js/jquery-1.11.0.min.js" ></script>
<script type="text/javascript" src="../SiteAssets/js/moment.min.js" ></script>
<script type="text/javascript" src="../SiteAssets/js/fullcalendar.min.js" ></script>
<script type="text/javascript" src="../SiteAssets/JqueryFullCalendar.js" ></script>
<div id='calendar' class="float:left search-results"></div>
