Setup Guide JS Calendar View Events Management Page

Back to PT Calendar

IMPORTANT: v5.0 of this application requires ADF 2.7.2 or greater and CommonSpot 11.0.0, 10.9.1 or 10.8.3 or greater.

Follow the installation or upgrade guide for PT Calendar v5.0.

If you haven’t already, import the Calendar JS View Properties custom element. Add it to either the “PT Calendar Elements” category or your site’s PT Calendar App elements category.

WebAdmin JS Calendar Events Management Page

To configure a Calendar Web Administration Events Management page

1. On a new Web Admin page built from your Web Admin template, in your /webadmin/calendar/ subsite, go into “Work on this Page”.
2. Add a Calendar JS View Properties Custom Element to the large content area of the page.
3. From the ”Calendar JS View Properties” element indicator, select “New Data” to open the calendar view options dialog.
   1. Go to the “Admin Settings” tab, and set the “Enable Admin Tools Data” field to “Yes”
      1. 
   2. On the “Feed Security” Tab, move the Security Group and/or Users that will have access to view, add, edit, and/or delete the Web Admin Calendar events to the "Selected Items" columns.
      1. 
   3. On the "Calendar Options" tab, set the Calendar Views you would like the admin calendar to offer, the default view, and the Linked Calendar Page:
      1. For this Events management page, we will select the following:
         1. multMonthYear (Year view)
         2. dayGridMonth (30-day grid view)
         3. listMonth (30-day list view)
         4. timeGridWeak (7-day grid view with time-slots view)
         5. timeGridDay (1 day view with time-slots view)
         6. 
      2. Set the Default View:
         1. dayGridMonth
         2. 
      3. Select a Linked Calendar Page for the “Event Details Preview”:
         1. For this, if you can select a standard Calendar Page that has a details view enabled
         2. Or create a new calendar page with the standard Event Details view config
            1. Note: This Event details page can be a public calendar view details page or a private event details page in a protected subsite. If protected, the Calendar Admin user must have permission to read the private event details page.
         3. The other Calendar Option fields on this tab (Button Library, Footer Button Wrapper Classes, and Footer Button Classes) can be updated to use your specific CSS layout framework
         4. 
   4. On the Calendar Filter Bar tab, enable the Event Filter Bar, set the Filter Bar Title, and the other available filter bar options:
      1. Set the “Enable Events Filters” to “Yes”
      2. Update the Filter Bar Title, if needed
      3. Set the “Enable Advanced Filters” to “Yes”
      4. Set the “Enable Organization Filter” to “Yes” if you have multiple Calendar organizations configured.
      5. Set the “Enable Category Filter” to “Yes” if you have multiple Calendar categories configured.
      6. Enable “Location Filter”, if needed
         1. The Locations Filter pulls from the Locations entered for the active Events
      7. The other Filter Bar Option fields (Filter Button Wrapper Classes, and Footer Button Classes) can be updated to use your specific CSS layout framework
      8. 
   5. On the Event Data Filters tab, leave all Organizations, Category option checkboxes as well as the “Approved Only” checkbox, unchecked.
      1. Leaving the “Approved Only” unchecked will allow the Pending and Denied events to render on the management calendar view.
      2. When creating a Calendar Events management page for specific Admin Group(s) and/or User(s), select the relevant Organization and/or Category(ies) to ensure that only their events are displayed in this view.
      3. 

Event Navigation

• Use the navigation buttons (Previous, Next, Today) located at the top-left of the JS Calendar View to change the displayed date range view.
• Use the view selection buttons at the top-right of the JS Calendar view to switch between different calendar views (e.g., month, week, day).
• Use the events filter bar form to narrow down the events shown in the selected calendar view.
• Click the Reload Events button at the bottom-left of the JS Calendar view to refresh and load the latest calendar events.
  • Note: Useful for event management when multiple contributors are managing events simultaneously.

Event Management

• When the Enable Admin Tools Data option is set to Yes, status indicator icons will appear next to event titles and in tooltips, and the status icon key will display under the calendar view.:
  • Approved Events – Green check mark icon
  • Pending Events – Yellow flag icon
  • Denied Events – Red warning triangle icon
    • Note: You can customize the labels for Approved, Pending, and Denied statuses in the PT Calendar Configuration settings.
• To add an event, click on an empty area within the JS Calendar view. This will open the Add Event dialog box.
  • In the dayGridMonth (30-day grid) view, click on the empty space within a day square.
• To edit an event, click on an All Day or time-prefixed event tile to open the Event Management Context Menu, then select Edit Event.
  • The Edit Event dialog box will open, pre-filled with the selected event's details.
• To copy an event, click on an All Day or time-prefixed event tile to open the Event Management Context Menu, then select Copy Event.
  • The Copy Event dialog box will open.
  • Choose your desired copy options and click the Copy button.
• To delete an event, click on an All Day or time-prefixed event tile to open the Event Management Context Menu, then select Delete Event.
  • A Delete Event confirmation dialog box will appear.
• To view quick event details, click on an All Day or time-prefixed event tile to open the Event Management Context Menu, then select Quick Details View.
  • A quick view dialog box will appear with event details.
• To open the full Event Details Page, click on an All Day or time-prefixed event tile to open the Event Management Context Menu, then select Open Details Page.
  • The full event details will open in a new browser tab.
•