Create a Custom Calendar in SharePoint using Rest API and jQuery

by
Org Chart

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 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.

Complete SharePoint Training Course Just for $199 (Just for Today) 

     <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.

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.

    • >