In this SharePoint 2013 tutorial, I will show you how to create your own jQuery Calendar view using the simple jQuery and SharePoint Rest API.
Display Calendar using FullCalendar and Rest API in SharePoint
We will use here FullCalendar library which is also available in on NPM or Yarn.
We can install using the npm command like below:
npm install --save @fullcalendar/core @fullcalendar/daygrid
I have used the fullcalendar plugin as it is very easy to use. It is highly customizable and very lightweight.
I have created a Calendar list on my site and named it as ‘UpcomingEvents’. We will use this list to store our events or meetings.
You will be 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>
JqueryFullCalendar.js will have our custom code to load the events from the SharePoint List and render it in the Jquery Full Calendar. This calendar will support recurring events as well.
JqueryFullCalendar.js
var ele = [];
var listUrl = "../_vti_bin/listdata.svc/";
$(document).ready(function() {
Retreive();
});
function Retreive() {
var listUrl = "../_vti_bin/ListData.svc/UpcomingEvents";
$.ajax({
url: listUrl,
type: "GET",
data: {
$select: "Title,Description,StartTime,EndTime,AllDayEvent,Recurrence,Id"
},
headers: {
accept: "application/json;odata=verbose"
},
success: function(data) {
$.each(data.d.results, function(i) {
currObj = this;
var fADE = currObj.AllDayEvent;
if (fADE != null) {
if (fADE == 0) {
thisADE = false
} else thisADE = true;
}
var thisID = currObj.Id;
var thisTitle = currObj.Title;
var thisRecurrence = currObj.Recurrence;
var thisDesc = currObj.Description;
var x = new Date(parseInt(currObj.StartTime.substr(6)));
var y = new Date(parseInt(currObj.EndTime.substr(6)));
ele.push({
title: currObj.Title,
id: currObj.Id,
start: x,
description: currObj.Description,
end: y,
allDay: thisADE,
});
});
BindCalendar();
}
});
}
function BindCalendar() {
var calendarioDiv = $('#calendar');
var fullCalendar = calendarioDiv.fullCalendar({
events: ele,
error: function() {
alert('Error');
},
editable: false,
firstDay: 0,
monthNames: ['JANUARY', 'FEBRUARY','MARCH', 'APRIL', 'MAY','JUNE', 'JULY', 'AUGUST', 'SEPTEMBER','OCTOBER', 'NOVEMBER', 'DECEMBER'
],
dayNames: ['Sunday', 'Monday', 'Tuesday','Wednesday', 'Thursday', 'Friday', 'Saturday'
],
dayNamesShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
allDay: true
});
}
Add the Content Editor web part on your page and add the reference to the JqueryFullCalendar.txt file in it. Below is the output
You may like following SharePoint Rest API tutorials:
- SharePoint Rest API: Filter list items based on conditions
- SharePoint 2013 list item level permission using REST API
- Create or Update list using rest api in SharePoint 2013/2016/Online
- Retrieve list data using AngularJS REST API in SharePoint 2013
- SharePoint Rest API Filter Example
- The HTTP header Content-Type is missing or its value is invalid error in REST API in SharePoint 2013/2016/Online
- SharePoint 2013: Check user permission using Rest API
This is how we can use fullcalendar library to display calendar view using Rest API and jQuery in SharePoint Online and SharePoint 2013/2016.
Hello Bijay,
I’m following your tutorial for creating a sharepoint calendar, using jQuery Full Calendar, sharepoint list, and recurring event options. I followed everything but I can’t seem to get the recurring event option to work. You didn’t provide a sample of your sharepoint list but I think I found a sample of it. The sample showed create a column in the sharepoint list named “Recurrence” and set the feature to number. When using the Recurrence feature, you a enter the number in the Recurrence number option. I did this be nothing happens. Am I doing something incorrectly?
Your assistance with this matter will be greatly appreciated. Also, Great Tutorial!
Tony
I get it but I just don’t know what the benefit is? I understand how you did it but what is the point? Is it just an alternate way of displaying the calendar? Does it render faster?