Join the #BuildWithBuildAgent Challenge! Get recognized, earn exclusive swag, and inspire the ServiceNow Community with what you can build using Build Agent.  Join the Challenge.

Calendar date picker widget

Michal Hancar1
Tera Contributor

Hello,

as I am a very big Angular / Widget / Portal noob, I wanted to ask for help setting up a calendar widget using an available JS code from CSS script website.

Anyways, I wanted to create an application for my friends where we would pick dates from a calendar and on the server side, a script would tell us which date works best for majority of us (there is quite a lot of us).

On the web, I found a webpage with many JS calendars and I wanted to "insert" the source code (which the creators provide for free) to ServiceNow and create a Widget out of that. I found one that I liked which is the following:

https://www.cssscript.com/minimal-inline-calendar-date-picker-vanilla-javascript/#disqus_thread

There is another one which has the functionality I was looking for

- page itself: https://www.cssscript.com/beautiful-pure-javascript-date-picker-with-events-support-datepickk-js/

- functinality - click on the buton on the left "ModalOnClick" and you can pick dates: Datepickk - Documentation

Note: I dont need all the fancy animations as the second one has. Only the date picking ... and the notes seem very nice (datepickk-js calendar)

So, naturally I tried to "convert" the code they provide to ServiceNow but I did not get very far simply because I am not sure whether functions like addEventListener() or stuff like document.querySelectorAll('[data-calendar-area="month"]')[0] can actually work in ServiceNow. My basic knowledge of web development is enough to understand what functions like these do but I am quite bad at "converting" the code to ServiceNow widgets.

The closest I got was here: I assume there is a problem with the script (most likely the document.querySelectedAll and stuff like that). Or I should put something in the angular provider maybe. The following pictures is from the first linked calendar and the issue here is most likely with "createMonth()" function

calendar widget.png

I added the zip files with source codes to the attachments - I had trouble posting the code of the .js file here

Any information on how to set up a widget based on .js files like from CSS script website would be appreciated

Kind regards,

Michal

1 REPLY 1

sachin_namjoshi
Kilo Patron
Kilo Patron

Please check below for date picker wdiget.



https://eonasdan.github.io/bootstrap-datetimepicker/


Regards,


Sachin