How to create a calendar UI in the Employee Center

mtymytk
Tera Expert

‎02-16-2023 06:49 PM

Hi,

Is it possible to create a UI similar to the calendar screen on mobile（Calendar screen (servicenow.com)） in the Employee Center instead of the Upcoming events?

 

UpcomingEvent.png

↓

CalScr.png

 

 



0 Helpfuls
  • 2,679 Views
5 REPLIES 5

Dan O Connor
ServiceNow Employee
ServiceNow Employee

‎02-21-2023 05:40 AM

Hi @mtymytk ,

To my knowledge we don't have an OOTB widget that renders an actual calendar on Employee Center/Portal (which is odd) but there are numerous ways to achieve this, but unfortunately will need a slight bit of development. 

 

Below is a support article that outlines a somewhat ServiceNow recommended method of achieving this

https://support.servicenow.com/kb?id=kb_article_view&sysparm_article=KB0719848

 

The calendar populates based on data from tables. So while it's normally used for rendering things like planned outages or changes to a Portal, you could create a new table to house different events like social outings, webinars etc. 

0 Helpfuls

Luis Estefano
ServiceNow Employee
ServiceNow Employee

‎08-02-2023 03:57 AM - edited ‎08-02-2023 04:06 AM

Hi @mtymytk , @Dan O Connor , 

 

you have two OOTB widgets included in the Employee Center PRO, and they allow to include upcoming events and also calendars in the EC. So, there is no need to go for a custom one if you have the PRO license. 

 

LuisEstefano_0-1690974349979.png

 

 

Kind regards,

Luis Estéfano

0 Helpfuls

ChrisJohnsten
Tera Contributor
In response to Luis Estefano

‎07-01-2024 12:12 PM

Hi Luis, we are looking at adding the calendar widget to an esc pro portal. However, we are not seeing a standard calendar widget available that looks similar to the mobile app calendar. Is there not an OOB widget that looks like the mobile app calendar in the screenshot provided by OP?

Could you please provide the names of the calendar and event widgets you are referring to?

0 Helpfuls

Luis Estefano
ServiceNow Employee
ServiceNow Employee
In response to ChrisJohnsten

‎07-26-2024 03:31 AM - edited ‎07-26-2024 06:11 AM

Hi @ChrisJohnsten,

 

Apologies for the late response!

 

There are different out-of-the-box widgets available for viewing upcoming events. However, if you want to display an entire calendar in a classic format, consider the following options:

 

 

1. Angular Bootstrap Calendar Widget
This widget allows you to embed a calendar in the ServicePortal.


More information:

2.1Developer Site / Angular Bootstrap Calendar Widget

2.2 For installation instructions, refer to this article

 

Example/Screenshots

The whole calendar: 

LuisEstefano_0-1721988368888.png
The detail of the events: 

LuisEstefano_1-1721988434578.png

 

2. Next Experience Calendar Component
This new calendar component can be used to create a portal experience where you can embed the calendar. Afterwards, you can link the new page into the desired Service Portal by using different functionalities (Menus, widgets, etc). 
The angular widget, mentioned before, should be the first option, as it is easier to configure. And also because the Portal Experiences based on NextExperience are still not covering all the features supported by angular service portals.

 

More information: 

1.1 Calendar Overview & API

1.2 Calendar UIB Setup

1.3 Calendar Usage 

Example/Screenshots

The whole calendar in month view: 

LuisEstefano_2-1721989361023.png


The calendar in day view: 

LuisEstefano_3-1721989442383.png

 

 

 

I hope this helps!! 

 

Kind regards,

Luis Estéfano