Today I will show you, how to implement Event/Scheduler calendar in SharePoint using REST API and Jquery plugin.
We will see how to create a custom calendar using Rest API, jQuery in SharePoint Online Office 365. Check out SharePoint Rest API Tutorial and Examples.
Step 1: Login to your SharePoint Online site and create a list as per the below screenshot.
Step 2: Next create a new page and add a Script Editor Web part. Next, add the below code in the snipped.
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.print.css" rel="stylesheet" media="print"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
var events = [];
var site = "https://pikasha12.sharepoint.com/sites/DLH/";
$.ajax({
type: "GET",
url: site + "_api/web/lists/getByTitle('My Events')/items",
headers: { "Accept": "application/json;odata=verbose" },
success: function (data) {
$.each(data.d.results, function (index, value) {
events.push({
title: value.Title,
description: value.Description,
start: moment(value.Start),
end: value.End != null ? moment(value.End) : null,
color: value.ThemeColor,
allDay : value.IsFullDay
});
})
GenerateCalender(events);
},
error: function (error) {
alert('failed');
}
})
function GenerateCalender(events) {
$('#calender').fullCalendar('destroy');
$('#calender').fullCalendar({
contentHeight: 400,
defaultDate: new Date(),
timeFormat: 'h(:mm)a',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay,agenda'
},
eventLimit: true,
eventColor: '#378006',
events: events,
eventClick: function (calEvent, jsEvent, view) {
$('#myModal #eventTitle').text(calEvent.title);
var $description = $('<div/>');
$description.append($('<p/>').html('<b>Start:</b>' + calEvent.start.format("DD-MMM-YYYY HH:mm a")));
if (calEvent.end != null) {
$description.append($('<p/>').html('<b>End:</b>' + calEvent.end.format("DD-MMM-YYYY HH:mm a")));
}
$description.append($('<p/>').html('<b>Description:</b>' + calEvent.description));
$('#myModal #pDetails').empty().html($description);
$('#myModal').modal();
}
})
}
})
</script>
<h2>Create a Custom Calendar in SharePoint using REST API</h2>
<div id="calender"></div>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><span id="eventTitle"></span></h4>
</div>
<div class="modal-body">
<p id="pDetails"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Step 3: Once you click on OK button, your Calendar will visible on the page with different type colors.
Step 4: When you click on any event, it will open a popup where you can see the event details. If the event half day then you can’t see the end date of the event. If that is a full day event then you can able to see the full details.
You may like the following SharePoint tutorials:
- SharePoint online calendar web part
- HTTP Error 400 The size of the request headers is too long SharePoint Online Office 365
- Retrieve and Display TASK status using REST API in SharePoint
- Display SharePoint list data in jQuery data table using Rest API
- SharePoint Rest API Microsoft.SharePoint.Client.InvalidClientQueryException The expression is not valid. Bad Request
- How to get documents from document library in SharePoint using Rest API
- How to get SharePoint list items using Rest API in Microsoft Power Automate
- Create custom SharePoint Survey poll using REST API and AngularJS
Hope this SharePoint article will be helpful to create a custom calendar in SharePoint using REST API and jQuery plugin.
Rajkiran is currently working as a SharePoint Consultant in India . Rajkiran having 7+ years of experience in Microsoft Technologies such as SharePoint 2019/2016/2013/2010, MOSS 2007,WSS 3.0, Migration, Asp.Net, C#.Net, Sql Server, Ajax, jQuery etc.He is C#Corner MVP (2 Times).
multiple day events are making a view as one day event.
Instead of onclick how to make it as onHover?