View source for Setup Guide JS Calendar View Events Management Page

Back to [[PT_Calendar|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.

== WebAdmin JS Calendar Events Management Page ==
[[File:Js calendar view - admin2.png|600px|border|default|Calendar JS View WebAdmin Page]]

===To configure a Calendar Web Administration Events Management page===
# Follow the [[PT_Calendar|install or upgrade guide]] for PT Calendar v5.0 (or higher).
# 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.
# On a new Web Admin page built from your Web Admin template, in your '''secured''' /webadmin/calendar/ subsite, go into “Work on this Page”.
# Add a Calendar JS View Properties Custom Element to the wide content area of the page.
# From the ”Calendar JS View Properties” element indicator, select “New Data” to open the calendar view options dialog.
## Go to the “Admin Settings” tab, and set the “Enable Admin Tools Data” field to “Yes” 
### <div style="list-style:none;">[[File:JS View Props-Admin Settings Tab.png|600px|border|default|Calendar JS View Properties: Admin Settings Tab]]</div>
## 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.
### <div style="list-style:none;">[[File:JS View Props-Feed Security Tab.png|600px|border|default|Calendar JS View Properties: Feed Security Tab]]</div>
## 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:
### For this Events management page, we will select the following:
#### multMonthYear (Year view)
#### dayGridMonth (30-day grid view)
#### listMonth (30-day list view)
#### timeGridWeak (7-day grid view with time-slots view)
#### timeGridDay (1 day view with time-slots view)
#### <div style="list-style:none;">[[File:JS View Props-Calendar Options Tab-JS Views.png|600px|border|default|Calendar JS View Properties: Calendar Options Tab - JS Views]]</div>
### Set the Default View:
#### dayGridMonth
#### <div style="list-style:none;">[[File:JS View Props-Calendar Options Tab-Default View.png|600px|border|default|Calendar JS View Properties: Calendar Options Tab - Default JS View]]</div>
### Select a Linked Calendar Page for the “Event Details Preview”:
#### For this, if you can select a standard Calendar Page that has a details view enabled
#### Or create a new calendar page with the standard Event Details view config
#####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.
#### 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
#### <div style="list-style:none;">[[File:JS View Props-Calendar Options Tab-Details Link.png|600px|border|default|Calendar JS View Properties: Calendar Options Tab - Details Page Link]]</div>
## On the Calendar Filter Bar tab, enable the Event Filter Bar, set the Filter Bar Title, and the other available filter bar options:
### Set the “Enable Events Filters” to “Yes”
### Update the Filter Bar Title, if needed
### Set the “Enable Advanced Filters” to “Yes”
### Set the “Enable Organization Filter” to “Yes” if you have multiple Calendar organizations configured.
### Set the “Enable Category Filter” to “Yes” if you have multiple Calendar categories configured.
### Enable “Location Filter”, if needed 
#### The Locations Filter pulls from the Locations entered for the active Events
### The other Filter Bar Option fields (Filter Button Wrapper Classes, and Footer Button Classes) can be updated to use your specific CSS layout framework
### <div style="list-style:none;">[[File:JS View Props-Calendar Filter Bar Tab.png|600px|border|default|Calendar JS View Properties: Calendar Filter Bar Tab]]</div>
## On the Event Data Filters tab, leave all Organizations, Category option checkboxes as well as the “Approved Only” checkbox, unchecked.
### Leaving the “Approved Only” unchecked will allow the Pending and Denied events to render on the management calendar view.
### 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.
### <div style="list-style:none;">[[File:JS View Props-Event Data Filters Tab.png|600px|border|default|Calendar JS View Properties: Event Data Filters Tab]]</div>

=== Calendar 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.
<div style="list-style:none;">[[File:JS View WebAdmin-Event Context Menu.png|300px|border|default|Calendar JS View: Event Management Context Menu]]</div>