Creating a Custom Events Calendar Webpart for SharePoint 2016

SharePoint 2016, a platform developed by Microsoft, it provides robust capabilities for collaboration and document management. This blog post will guide you through the process of creating a custom events calendar webpart for SharePoint 2016, a feature that can help manage and display various organisational events. We’ll use JavaScript, SharePoint’s Client-Side Object Model (CSOM), and SharePoint’s REST API for this task.

Prerequisites:

Before we start, you will need:

1. Access to a SharePoint 2016 site collection.
2. Familiarity with JavaScript, HTML, and CSS.
3. SharePoint Designer 2013 (It’s compatible with SharePoint 2016).
4. Basic understanding of SharePoint’s REST API and CSOM.

Step 1: Set up the Calendar List

First, we need a Calendar List. If you already have one, you can skip this step. To create a Calendar List:

1. On your SharePoint site, click on Site Contents … Add an App.
2. Click on the Calendar tile and give it a name then hit Create.

Step 2: Create the WebPart

Now, let’s create the custom webpart. Follow these steps:

1. Open SharePoint Designer and connect to your site.
2. Go to File … New … WebPart and create a new web part.
3. Paste the following base code into the .webpart file:

<webParts>
  <webPart xmlns="http://schemas.microsoft.com/WebPart/v3">
    <metaData>
      <type name="Microsoft.SharePoint.WebPartPages.ScriptEditorWebPart, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" />
      <importErrorMessage>Cannot import this Web Part.</importErrorMessage>
    </metaData>
    <data>
      <properties>
        <property name="Title" type="string">Custom Calendar WebPart</property>
        <property name="Description" type="string">This WebPart displays a custom events calendar.</property>
      </properties>
    </data>
  </webPart>
</webParts>

Step 3: Fetching Calendar Data with REST API

Next, we’ll use SharePoint’s REST API to fetch the calendar data. We’ll add the JavaScript code within the CDATA tags of the webpart file.

<![CDATA[
<script type="text/javascript">
  document.addEventListener('DOMContentLoaded', function(){
    var calendarListUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('Calendar')/items?$select=Title,EventDate,EndDate";
    fetch(calendarListUrl, {
      headers: {
        "accept": "application/json;odata=verbose"
      }
    })
    .then(response => response.json())
    .then(data => renderEvents(data.d.results))
    .catch(error => console.error('Error:', error));
  });
  function renderEvents(events){
    // Rendering code goes here
  }
</script>
]]>

This script runs when the DOM is fully loaded. It fetches calendar events and calls a function renderEvents with the events data.

Step 4: Rendering the Events

The renderEvents function will be responsible for rendering events data. We’ll use a simple HTML structure for this example, but you could use any UI library or framework. Script refused to post as text, I believe WordPress uses some of the same internal function names and tried to run it as an actual script, you’ll need to retype this!

function renderEvents(events){
  var eventsHTML = events.map(event => `
    <div class="event">
      <h3>${event.Title}</h3>
      <p>Start: ${new Date(event.EventDate).toLocaleString()}</p>
      <p>End: ${new Date(event.EndDate).toLocaleString()}</p>
    </div>
  `).join('');
  
  var calendarElement = document.getElementById('calendar');
  if (calendarElement) {
    calendarElement.innerHTML = eventsHTML;
  }
}

Step 5: Adding WebPart to a SharePoint Page

Finally, let’s add the custom webpart to a SharePoint page.

1. Navigate to your SharePoint page and click Edit.
2. Click on Insert … WebPart … Custom and select your custom webpart.
3. Click on Add and your custom events calendar webpart should now appear on your page.

That’s it! You have successfully created a custom events calendar webpart for SharePoint 2016. Please note that the calendar’s appearance can be customised using CSS, and you can expand the script to include more features like event filtering, sorting, or pagination.