Introduction

Ever wished your ServiceNow Service Portal had a sleek, interactive calendar to manage events, shifts, or bookings? Well, wish no more! FullCalendar is here to save the day. 🎉

In this blog, we’ll dive into integrating FullCalendar with ServiceNow, making your portal more dynamic and visually appealing. No more struggling with clunky lists or endless tables—let’s put everything on a calendar like civilized people! 📅

By the end of this guide, you’ll know how to:
✅ Integrate FullCalendar into ServiceNow
✅ Fetch and display records dynamically
✅ Customize it to match your portal’s needs

So grab a coffee ☕ (or a debugging tool 🛠️), and let’s get started! 🚀

Full Calendar

What is FullCalendar?

FullCalendar is a powerful and flexible JavaScript library that lets you create interactive and feature-rich calendars for web applications. It’s widely used for scheduling events, bookings, task management, and more. Whether you need a simple calendar or a complex scheduling system, FullCalendar has got you covered.

Why Use FullCalendar?

✅ Highly Customizable – Supports different views (month, week, day, list) and can be styled to match your design.
✅ Event Management – Allows dynamic event creation, drag-and-drop, and real-time updates.
✅ API & Integration – Easily integrates with backend services like ServiceNow, fetching and updating data seamlessly.
✅ Resource Management – Ideal for scheduling meetings, managing employee shifts, or tracking reservations.

In short, FullCalendar is the Swiss Army knife 🛠️ of web-based calendars. Now, let’s see how to get it working with ServiceNow! 🚀

Integrate FullCalendar Widget in ServiceNow

1. All right, fire up your PDI or Instance.

2. Navigate to Service Portal → Widgets

3. 

   Click on New to Create New Widget.

4. Name your Widget as your choice [Ex: ServiceNow Calendar] and save it.

5. Scroll Down to Dependencies and Click on New

6. Name the dependency as per your choice [Ex: Calendar] and save it.

7. Now, navigate to Google and search for the full calendar library

   

8. Click "Docs"

   

9. Click on “ Introduction”

   

10. Click "Getting Started"

    

11. Click "Initializing with script tags"

    

12. Click "jsdelivr"

    

13. Copy the Link present in the Script Tag

<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js"></script>

Copy and paste the code below.

HTML:

<div>  
  <div id="calendar"></div>
</div>

Client Script:

api.controller = function () {

    var c = this;
    var calendarEl = document.getElementById("calendar");

    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: "dayGridMonth",
    });

    calendar.render();
};

Output

Your output should look like this.