Calendar in Service Portal

Calendar in Service Portal

To create widget with an event calendar we’re going to use FullCalendar (jQuery plugin). Full description and documentation you can find here: FullCalendar

  • First thing we have to do is creating a new service portal widget (check ‘Has preview’) :

  • Add a new dependence by clicking ‘New’ in Dependencies’ tab and provide name

  • Once you save it you can create JS Include and CSS Include. The source can be UI Script or URL. In this article we’ll create two UI Scripts. The first will be a container for ‘fullcalendar.min.js’, the second for ‘fullcalendar.min.css’. These files you can download from: fullcalendar-3.5.1.zip
    To set up JS Include click ‘New’ button in Widget Dependency. Provide name in ‘Display name’ field and search UI Scripts list. Again click ‘New’ button.

    The same step we repeat for CSS Include. Finally we should have one JS Include and one CSS Include.

    The same we can achieve by using includes with urls to CDNJS:

  • Now we can open widget in Widget Editor

    In HTML TEMPLATE add:

    <div id=”calendar”></div>

    Add the following code to your Client Script Function (remember to inject $scope):

    $scope.initializeCalendar = function(){
    $(‘#calendar’).fullCalendar({
    // put your options and callbacks here
    });
    }

     

    $scope.initializeCalendar();

     

    Next save the widget. Once it’s saved you should see calendar in preview window:

    Now 2nd Part to populate FullCalendar from ServiceNow table

  • Creating an event table

    First of all you have to create a simple ‘Event’ table. The structure of this table is shown below:

    Next it should be populated by example events records.

  • Populating Service Portal widget with implemented Full Calendar

    Open in widget editor a widget in which you implemented Full Calendar. If you haven’t created it yet you can find description how to do this here.
    To fetch data from table the server script should contain the following code:

    (function() {
    data.eventsList = [];
    var eventGR =newGlideRecord(‘u_event’);
    eventGR.query();
    while (eventGR.next()){
    var eventObj = {};
    eventObj.id = eventGR.getValue(‘sys_id’);
    eventObj.title = eventGR.getValue(‘u_title’);
    eventObj.description = eventGR.getValue(‘u_description’);
    eventObj.start = eventGR.getDisplayValue(‘u_start_at’);
    eventObj.end = eventGR.getDisplayValue(‘u_end_at’);
    eventObj.allDay = (eventGR.getDisplayValue(‘u_is_all_day’) ==’true’);
    data.eventsList.push(eventObj);
    }
    })();

    In Client Script you have to link full calendar with data object and eventsList array:

    $scope.initializeCalendar = function(){
    $(‘#calendar’).fullCalendar({
    // put your options and callbacks here
    events: c.data.eventsList
    });

    As a result you should see your calendar complemented with events.

  • Enabling Day View

    Now you can only see your events in month view. But maybe you would like to check events created only for one day. To do so you have to add a header option to fullCalendar initializer:

    $scope.initializeCalendar = function(){
    $(‘#calendar’).fullCalendar({
    // put your options and callbacks here
    events: c.data.eventsList,
    header:{
    center:’agendaDay  month’,
    right:’today prev,next’
    }
    });
    }

    With this you have a Day View by clicking the ‘Day’ button in the calendar header:

  • Changing event color according to event priority

    In addition you can color events according to their priorities (but for instance that can be categories as well). First of all the Event table has to be expaned by a new column: ‘Priority’ (as a simple choice list)

    Also you have to add color property to event object which is created in server script:

    switch (eventGR.getValue(‘u_priority’)){
    case’1′:
    eventObj.color =’red’;
    break;
    case’2′:
    eventObj.color =’yellow’;
    break;
    default:
    eventObj.color =’green’;
    }

    As a result events color differ according to priority.

  • Showing Day view by clicking on a day

    Probably user would like to check day view by simple click on a day rather than going through all calendar day after day. So we are going to allow this. All we need to do is adding callback function to calendar initializator:

    dayClick: function(date) {
    $(‘#calendar’).fullCalendar(‘changeView’, ‘agendaDay’, date);
    }

     

  • Triggering an action by clicking on an event

    Similarly to dayClick callback you need to configure eventClick callback:

    eventClick: function(calEvent, jsEvent, view) {
    alert(‘Event: ‘+ calEvent.title);
    }

  • Adding non-standard fields to event object

    Maybe you have noticed that event table contains ‘Description’ column. But fullcalendar object doesn’t have a property like ‘Description’. So if you want to use this column in calendar you have to include (similarly as it was done in this post) a special jQuery plugin qTip:

    Finally you need to add the following callback:

    eventRender: function(event, element) {
    element.qtip({
    content:event.description
    });
    }

    Consequently it can be checked by simple eventClick and alert:

    eventClick: function(calEvent, jsEvent, view) {
    alert(‘Event: ‘+ calEvent.description);
    }

No comments

Leave a reply

Your email is never published nor shared. Required fields are marked *

Are you Human? * Time limit is exhausted. Please reload CAPTCHA.

Pin It on Pinterest

Share This