Howard Greenberg and Jesse Gallagher presentation from Collabsphere 2019.

1. DEV112 - Let's Calendar That! -
Add Calendars to your Domino
web applications

2. Our Sponsors

3. • Who are we?
• Goals of this session
• What is FullCalendar
• An Example of FullCalendar in an XPages Application
• No XPages? Where to go next
Agenda

4. • Howard Greenberg
– Been doing Notes/Domino teaching and consulting since 1994
– Owner of NetExperts and TLCC
• TLCC has a complete line courses for Notes and Domino
• NetExperts does consulting
• Jesse Gallagher
– frostillic.us
– Consultant at I Know Some Guys
Who are we?

5. • Learn how to implement a cool calendar in XPages
• Learn how to setup a REST service using Java/XPages to
allow access to your data from anything
• Start to consider what happens if you move off XPages
Goals of this session

6. • Per their website “the most popular full-sized JavaScript Calendar”
– For desktop and tablet sized devices
– Displays month, week, day and list formats
– Can (optionally) use BootStrap
– Works with React, Vue and Angular
– Uses REST to populate calendar entries (other options as well)
– Supports drag and drop of calendar entries
– Create new entry by clicking on date
– Support recurring entries
• Full documentation and demos at https://fullcalendar.io/
• Demo!!!
What is FullCalendar?

7. • Input parameters for start and end sent by FullCalendar
– Our sample has a custom Important parameter to
filter only important entries
• The JSON sent can have many different properties for
controlling style, type of event, etc.
– Should have a title (appears on event), start and end
https://fullcalendar.io/docs/event-parsing
REST Service to feed the Calendar

8. https://www.netexperts.com/demo/collab19.nsf/API.xsp/
API?start=2019-08-14&end=2019-08-16&important=yes
Sample JSON output

9. • FullCalendar 4 supports Bootstrap 4
• There is no “native” support for Bootstrap 4 in XPages
– Use Bootstrap 4 and roll your own (bring in the css and js files)
or...
– Use FullCalendar 3 (note slightly different API and not
supported anymore)
• See documentation for implementation
• Bootstrap is not required, it is optional
A Word About Bootstrap

10. • Download the zip file and extract
– https://fullcalendar.io/docs/getting-
started#download
• Bring in resources
– WebContent, create folder called fullcalendar
– Drag and drop the folders under packages in
the zip file to this new folder in Designer
How do we add this to XPages?

11. • Bring in the needed modules
• The JS files have the AMD issue
– See the demo database for the workaround
• Only load what you need depending on functionality used
• See ccFullCalendarLoader custom control for example
• OpenNTF project to get around AMD loader issues
https://openntf.org/XSnippets.nsf/snippet.xsp?id=hack-to-use-jquery-amd-
widgets-and-dojo-together
– Have to turn OFF the JavaScript/CSS aggregation option (XSP Properties)
xsp.persistence.mode=file
Create a “Loader” Custom Control

12. • Users can click an existing entry to see information about
the entry in a dialog
• A dialog is used to create new entries
• To maintain state of the calendar all interaction is done
via dialogs
– Dialogs are server side
• Calls Java routine to create/save back end document
• Could use client side JS for dialog and a REST server to post data
– Have to reload the calendar when done
XPages Design – calendar.xsp

13. Demo App Architecture
Front End, can be anything but here XPages Back End
Gets calendar entries via REST/JSON
Posts calendar drag and drop changes
via REST/JSON
Create/Edits done in dialog, uses bean
to save data (not REST in this case)
When dialog is opened to edit entry
the document is retrieved via UNID
REST API has GET to retrieve entries
based on start and end dates
POST to save to the back end any
changes done using drag and drop in
the calendar
Calendar bean to retrieve and save
entries when they are created/edited
using dialog
XPages via Bean
GET and Post to REST
Service
Sends back data via
JSON

14. Code WalkThrough
Calendar XPage

15. • Calendar.java > calendar object
– Has “helper” code to create document, retrieve docs, save back to
Domino
• getCalendarDocs – retrieves a list of Calendar objects based on date range
• saveCalendar – saves object to Domino
• changeCalendarDates – changes a given calendar entry to new date
• CalendarJSON.java > Handles REST Service
• doGet, do Post (others not implemented)
• API.xsp > XPage to surface REST Service
– Calls CalendarJSON.java
REST Service

16. Code WalkThrough
Calendar.java
CalendarJSON.java
API.xsp

17. • FullCalendar supports drag/drop editing of date/time
• Posts to REST Service to change in Domino DB
Next Step – enabling drag/drop

18. • Boss says get rid of XPages
• Domino used only for back end storage
• Have to re-write front end in ???
– What you want... Angular, REACT, etc.
• FullCalendar works with all those
• What about the REST Service???
No XPages, No Problem

19. • JAX-RS is your path
• Several options:
• Inside the NSF with XPages Jakarta EE Support
• In an OSGi plugin
• In a separate JEE web app
• The same code will apply to all three, so you’re future-
resilient
No XPages, No Problem

20. • XPages Jakarta EE Support is on OpenNTF
• (“Jakarta EE” is the new name for Java EE)
• (It’s a whole “thing”)
• It adds support for several modern Java standards to XPages
• We care about two main components:
• JAX-RS for REST services
• JSON-B for mapping objects to JSON
No XPages, No Problem

21. • Download the nsf from OpenNTF
– Link to download!!!
• Go to BitBucket and clone
– https://bitbucket.org/howardtlcc-admin/collabsphere-2019-
dev112
Demo Database

22. • Must have the following projects installed
– XPages Debug Toolbar (can disable easily)
– OpenNTF ODA (can re-write code easily to use native Domino
API)
– XPages Jakarta EE Support
Demo Requirements

23. Question time!!!!