Service Portal FullCalendar

[xiaix]

Just wanted to share some work I've done for those who would like to incorporate FullCalendar (FullCalendar - JavaScript Event Calendar ) into your Service Portal.

Here is what mine looks like now:

All the code is attached to this post (FullCalendar_For_ServicePortal_Helsinki.zip)

I hope someone finds it useful.

Message was edited by: David Dunn (** Updated code to fix Quick Access Event adding and coloring bug(s))

Message was edited by: David Dunn *MAJOR UPDATE*..   See my post below, on July 30, 2017

[Goran WitchDoc]

Hi David,

Great work! 😃 Have you thought about putting this in share (share.servicenow.com)?

[xiaix]

I'd like to, but I get this every time I try to upload my files:

[Dennis R]

Hey David, I really like what you've done here, and I'm in the process of maintaining an implementation of this at my company.   I'm about to jump in with both feet and make a few changes to it to better suit our needs, and I had a couple of questions--one pretty big and one kind of small--before I spend a lot of time and effort in case there are roadblocks I haven't thought of yet.

The first question (the smaller of the two) is that I noticed in your SP Calendar [u_sp_calendar] table, you are using strings to store the start and end times instead of Date/Time fields.   Was there a reason you went with that field type?   I'm just thinking, this makes the table more difficult to query and some of the operators one would expect when working with date/times not available in reports and lists.

I did notice that the Moment js objects that FullCalendar uses tends to format date/times with the letter T in between the date and time, per an ISO standard.   My thinking is that when you fetch the value of start and end client-side, though, you can just make sure to tag a .format("YYYY-MM-DD HH:mm:ss") on the end of the event.   I just wanted to get your thoughts first, though, in case I'm missing an obstacle that you ran into while creating this implementation.

The bigger of my two questions is related to populating the calendar in your buildCalEvents function; you're querying the SP Calendar [u_sp_calendar] table for all events in a given calendar [u_calendar].   Over the course of time, there could be hundreds or even thousands of events.   Have you considered or tried to use the events (as a function) version of the events member instead of the events (as an array) member?

What I'm considering doing is using the events (as a function) version to call server.update() with the start and end time passed in, so that instead of having to fetch all events when the calendar is first loaded, the events can be dynamically fetched as a user navigates around in the calendar.   Instead of returning hundreds or thousands of events, for any given day or month, it might return five or ten, or maybe a couple of dozen if the user is browsing a monthly calendar.   The server script would query the u_sp_calendar table for events with an end time greater than the calendar start time and a start time less than the calendar end time, which should neatly give it a list of only events that should be rendered on the calendar, not all events.   (And incidentally, the queries against start and end time I just mentioned are the impetus of the smaller of my questions above.)

But again, before I go down that road, I wanted to see if you have already done so and run into any roadblocks that would make me think twice about doing so.

As a side note, I noticed in your client script that you frequently use the document.getElementById, getElementsByTagName, and getElementsByClass functions.   I haven't done any heavy-duty modifications to your code yet, but couldn't you just use the jQuery selectors instead?   For example, $('#editExistingCategory_TR') instead of document.getElementById('editExistingCategory_TR')?

Anyway, thanks again for your work on this, it's proving very fruitful for our needs as well.

--Dennis R

[xiaix]

Dennis, thank you for the reply.

Regarding your questions:

1. Q: The SP Calendar [u_sp_calendar] table, it is using strings to store the start and end times instead of Date/Time fields.   Was there a reason for that field type?
2. A:   I tried to use Date and Date/Time, but in every iteration, either the date & times were completely off or off by 1 hour.   I'm not familiar with Moment.js or how the Moment system works, so I'd imagine, with manual parsing, you could use ServiceNow date/time field types.   I simply found that using a string field worked without the hassle of parsing.   However, if you're trying to generate a SN report, this makes things rather difficult.

1. Q:   Have you considered or tried to use the events (as a function) version of the events member instead of the events (as an array) member?
2. A:   I have not.   Currently, we have 8 departments using this calendar feature and they have events filled from July 1st 2017 to the end of December, and there's no performance degradation at all.   Even if a department had a full year's worth of events, 3 per day, that'd only be 1,095 events to put into the array.   If it got into more than 10k, I'd probably use the events (as a function) method.   There's another reason too... and that's because every time the calendar pulls in or refreshes the event data, there's a plethora of functions that need to be called to add event listeners, update counts, set backgrounds, etc etc..   I try to make server.update() calls and event changes as little as possible.

1. Q:   You notice that I use document.getElementById() instead of jQuery's method.
2. A:   I don't use jQuery.   Never have.   There's nothing wrong with changing the code to use it.   I just simply don't know the language/syntax.

[Dennis R]

By the way, regarding this:

/***************************************************************
Can't figure out how to get spUtil.recordWatch() to work.
https://community.servicenow.com/message/1138552#1138552
***************************************************************/
// spUtil.recordWatch($scope, "u_sp_calendar", "", function(name, data) {
// $('#calendar').fullCalendar('refetchEvents');
// });

It's because the version of jQuery you're using has deprecated the jQuery.unload() function that the service portal is using, as of jQuery v3.0.   Here's the documentation on it; note the deprecation and removal information at the top.   If you downgrade your jQuery version to 2.2.4 (and any associated dependencies), the recordWatch command will work as expected.

Hope this helps,

--Dennis R