Create a Custom Calendar in SharePoint using Rest API and jQuery

create custom calendar using jquery sharepoint

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.


Step 1: Login to your SharePoint Online site and create a list as per below screenshot.

Create a Custom Calendar in SharePoint using Rest API and jQuery
Create a Custom Calendar in SharePoint using Rest API and jQuery

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.

create custom calendar using jquery sharepoint
create custom calendar using jquery sharepoint

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.

create custom calendar using jquery sharepoint online
create custom calendar using jquery sharepoint

You may like following SharePoint calendar tutorials:

Hope this SharePoint article will be helpful to create a custom calendar in SharePoint using REST API and jQuery plugin.

Check out Best Alternative to InfoPath -> Try Now

EnjoySharePoint YouTube Channel

About Rajkiran Swain

Rajkiran is currently working as a SharePoint Consultant in QATAR . Rajkiran having 6 + 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).

View all posts by Rajkiran Swain →