Calendar date picker widget
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎11-15-2017 01:08 PM
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
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
- Labels:
-
Now Mobile
-
Service Portal

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎11-15-2017 01:55 PM
Please check below for date picker wdiget.
https://eonasdan.github.io/bootstrap-datetimepicker/
Regards,
Sachin