Service Portal: FullCalendar Display Data from a Table

[Alex Harrill]

I'm attempting to display a Calendar in Service Portal that will display data from a table. So far, it's been unsuccessful. Here is my client script:

api.controller = function ($rootScope, $scope, $http, spUtil, $timeout, $location, $compile, $element) {
  var calendarContainer = document.getElementById('calendar');
  var calendar;

  function initializeCalendar() {
    calendar = new FullCalendar.Calendar(calendarContainer, {
      initialView: 'dayGridMonth',
      selectable: true,
      editable: true,
      events: [],
      eventDidMount: function (info) {
        if (info.el) {
          info.el.classList.add('fc-red');
          info.el.innerText = 'Unavailable';
        }
      },
    });

    calendar.render();

 var availabilitiesGR = new GlideRecord('u_TABLE_HERE');
  availabilitiesGR.query(function () {
    var events = [];

    while (availabilitiesGR.next()) {
      var f1 = availabilitiesGR._fieldHere.getGlideObject(); // Adjust this based on your field names
      var f2 = availabilitiesGR._fieldHere.getGlideObject(); // Adjust this based on your field names
      var f3 = availabilitiesGR._fieldHere.getGlideObject(); // Adjust this based on your field names
      events.push({
        title: 'Available', // Customize this as needed
        Field: f2,
        Field: f1,
	Field: f3,
        allDay: true, // Adjust this based on your data
        classNames: 'fc-green', // Customize the class for available dates
      });
    }

    // Fetch the unavailable dates and add them to the events array
    var unavailableDates = getUnavailableDates();
    events = events.concat(unavailableDates);

     //Set the events data for the calendar
    calendar.removeAllEvents(); // Clear existing events
    calendar.addEventSource(events); // Add the new events

     //Render the calendar with the updated data
    calendar.render();
  });
}

  initializeCalendar();
};

api.controller.init = function () {
  this.initializeCalendar();
};

A bonus would be if I can hide/show available or unavailable dates based of a field. Example, if I choose Option A, then the calendar would hide Options B, C, and D; only displaying all dates with Option A. But honestly, I just need to get the calendar to display the data from the existing table.

[rcard11]

Did you ever figure this out?

[Alex Harrill · Accepted solution]

Hi,

Yes! Last year, the team I’m on finally got it done.

How It Works

HTML Structure:
The page includes sections for the calendar title, subtitle, and the calendar itself. There are also modal dialogs for showing a confirmation message and for submitting requests. For example:

<!-- Include the FullCalendar library -->
<script src="sys_attachment.do?sys_id=f6f4ada34711f1107e4dd9b7536d43df"></script>

<!-- Container for the Calendar -->
<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <div id="calendarTitle"></div>
      <div id="calendarSubtitle"></div>
      <div id="calendar"></div>
    </div>
  </div>
</div>

<!-- Modal for Form Submission -->
<div id="bookingModal" class="modal fade" role="dialog">
  <!-- Modal content here -->
</div>

CSS Styling:
This includes font sizes, colors, and responsive design tweaks for mobile screens:

#calendarTitle {
  font-size: 24px;
  font-weight: bold;
}

#calendarSubtitle {
  font-size: 20px;
}

@media (max-width: 768px) {
  #calendar {
    width: 101%;
  }
}

Client Script:
This code:

• Retrieves data (such as available dates and resource options) via ServiceNow’s server calls.
• Initializes the FullCalendar library to display dates and applies custom event handlers.
• Validates form inputs and submits data to the server.

Here’s a simplified example of initializing the calendar:

function initializeCalendar() {
    var calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
        initialView: 'dayGridMonth',
        events: [],
        dayCellDidMount: function(arg) {
            // Check availability and color-code cells (green if available, red if not)
            var dateAvailable = /* logic to check date availability */;
            arg.el.style.backgroundColor = dateAvailable ? 'green' : 'red';
        },
        dateClick: function(arg) {
            // Prevent past dates from being selected
            if (arg.date < new Date().setHours(0, 0, 0, 0)) {
                alert('Past dates cannot be selected.');
                return;
            }
            // Open a modal form when a valid date is clicked
            showBookingForm(/* parameters */);
        }
    });
    calendar.render();
}

I hope these example snippets help spark some ideas for your own projects!