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