Feature Focus – My Calendar
With React Native, we have taken the opportunity to completely redesign the calendar function within campusM, given that this is the most used feature across our customers. Taking design cues from what students are used to, we have created a calendar experience that intuitively presents schedule information across multiple calendar feeds in one place.
Calendar Interface
The calendar interface shows the end-user's scheduled activities for a selected day. The height of each activity indicates its duration. Activities that have start times but no specified end times occupy one hour in the calendar display.
The label of each activity includes information about the activity, the feed to which it belongs, and its start and end times. Selecting an activity opens the Activity Details page. Long-pressing the activity opens its full label in the Details Drawer at the bottom of the screen.
Scheduled activities appear in the calendar color-coded to indicate the feed to which they belong, such as a course timetable or an event PI. Events from event feeds are included in the calendar only if the end-user either registered for them or tagged them as favorites. Events tagged as favorites are marked with a Heart icon (
). Favorites for which the end-user did not register appear in the calendar with a lighter background color than events for which they did register.
End-users can easily open the calendar from any location in the app by selecting the Calendar button (
) in the menu bar at the bottom of the screen.
By default, the Calendar button appears in the menu bar for all customers who have active timetables and/or event PIs. Customers who do not have any active timetables, but do have event PIs, can remove the Calendar button if they wish. To do so, in the App Manager, go to App Settings > Feature statuses, and disable the External TT in calendar feature flag.
The following are two views of the calendar interface that, together, illustrate many of the interface's features.
- Last Refresh Date & Time – The date and time at which the timetable data was last updated on the device.
- View Selector – Enables users to choose between Day, Week, and Month view (Week by default).
- Go to Today button – Users can select this button to display the calendar for the current day.
- Date Display and Selection Region – Depending on the selected view, users will see the current date, the dates of the current week, or the dates of the current month. In Week and Month view, users can select a different date to view its calendar.
- Date of Displayed Calendar – In Week and Month view, if a date other than the current date is selected, the blue highlight indicates the currently selected date.
- Current Date – The black highlight indicates the current date.
- Calendar Selector – Customers can deploy multiple calendar feeds to populate end-users' calendar. Each feed is provided with a configurable name and a color. The end-user can view all calendars in a blended view or filter to individual calendar views by selecting the calender name. To view only future events from event PIs, the end-user can select Upcoming events. Note that days with activities in a currently displayed calendar feed have color-coded dots for each type of activity scheduled on that day.
- Calendar Event – An event summary is shown in the calendar view. The color identifies the calendar feed containing the event. A Heart icon () indicates that the event was selected by the end-user as a favorite. Selecting an event opens the event's Details screen, whilst a long-press shows a quick view of the event's details.
- Favorite Event – Unregistered events that were tagged as favorites appear in the calendar with a lighter background.
- Selected Activity – Long-pressing an activity highlights it and opens the Details Drawer (#3) at the bottom of the screen.
- Current Time Marker – When the schedule for the current date is displayed, a marker provides a visual indication of the current time.
- Details Drawer – Displays the full label of the highlighted activity.
Activity Details Page
Selecting an activity in the calendar opens the Activity Details page of the activity. Exactly how this page looks varies depending on the type of feed and the configuration of the activity. The following are examples of an Activity Details page for a scheduled class and an Activity Details page for a scheduled event from an event PI.
- Course name
- Lecturer name
- Link to lecturer email
- Link to open the campusM Position page of the event
- Map showing the location of the event; select the map to open the device's map app and show the location of the event on it
- Link to online event
- Event Name
- Tags indicating if the end-user is registered for the event and if they marked the event as a favorite (the latter not shown)
- Tag indicating the tag of the event
Day View Tile
The Day View tile shows end-users their next activity of the day, taking the information from the new calendar, so that it includes information from timetables and other event PI feeds. Selecting the tile opens the calendar with the activity displayed.
You can add a Day View tile from the App Manager, in the App Builder. In the Create New Menu Option dialog box, in the first field, select Smart Tile, and in the second field, select Day View. For additional information about working with the App Builder, see Creating Services.
The default settings of the tile define the various lines of text that appear in it, such as the greeting that appears at the top of the tile, and the message that appears when no activities are scheduled for the current day. In the tile's settings, you can customize these messages if you wish by entering the text you want displayed.
