Create a Custom Calendar in SharePoint using Rest API and jQuery

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="https://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.