A working prototype of the UCBCN Calendar & Event Management Application can be found at: http://mms.media.berkeley.edu:8901/EventCalendar/. This prototype should be used in conjunction with the functional description of features and screens below to illustrate any functionality that is unclear in this document. User ID & password combinations include:
"biology" & "biology
"me" & "me" (recommended)
"eecs" & "eecs"
"sims" & "sims"
"bio" & "bio"
"envsci" & "envsci"
"civenveng" & "civenveng"
"eberkeley" & "eberkeley"
"journ" & "journ"
The Event Manager comprises the main set of functionality in the U.C. Berkeley Calendar Network Tool. It provides all of the functionality needed to manage events. This includes:
Creating, editing or deleting events
Posting or removing events from the calendar
Searching for events on other calendars within the network
Setting up subscriptions for particular types of events from other calendars within the network
Exporting event data out of the system
Users will log on to the system by using their CalNet ID, so the fields in the Existing Users window may be replaced with a single button labeled "Log on with CalNetID" and an explanation that users must have a CalNet ID to access this system. There will be a link for "Forgot your CalNet password" which links to: https://calnet.berkeley.edu/cgi-bin/optOut/opt_out.cgi. However, it there will not be a link for users that have forgotten their User ID. Users who click on Register will be authenticated by CalNet and then sent to an empty Account Info screen.
These pages are used to view and update information on Accounts in the system. In this version of the system, Accounts correspond directly to calendars. Currently only one User is allowed per Account, but this may change in future versions of the system. In all screens the User ID field will actually be CalNetID, and there will not be a password field.
Users who choose Register from the Logon screen will be sent to this screen. The data fields may changed based on the information that Public Affairs decides they need. This screen will also change in future versions of the system if multiple users are allowed for each account. A confirmation screen should be created to tell Users their information has been sent to the System Administrator, and give them information on how they will find out that their Account has been activated.
Users who have logged in and click on the Account Info button will be sent to this screen, which will be populated with their Event information. The Edit Account Info button sends them to the Edit Account Information screen, and the Cancel button returns them to the screen they were last on.
Calendar Events is the main page of the Event Manager and is the first page displayed after login. It contains all of the event data for the account. The event data is separated into three different sections: pending events, posted events and archived events. Each section is displayed as a separate tab within the body of the page.
The Pending events tab displays a list of events that are not yet posted to the calendar. These events can come from five different sources:
Internal Form: An event created by the account owner. This is done via the Create Event form described in section 6.2.1.2.
Subscription: An event matching the search criteria in a subscription that specifies "manual approval". See section 6.2.1.4 for further explanation.
Recommendation: An event that was recommended by another account owner within the network. See section 6.2.1.6.1 for further explanation.
Search: An event found via "Search Campus Events" that was saved as pending. See section 6.2.1.3 for further explanation.
External Form: An event entered via an external add form that is open to members of the campus community who have a CalNet ID via the Internet.
There are five data fields displayed for each pending event. Events may be sorted by clicking on the name of any of these fields, which include:
Event Date & Time - The date and time when the event is occurring.
Title - The title of the event.
Sponsor - The account that created the event.
Source - One of the five options described above.
Received - The date on which the event was received into the pending list.
Actions available on Events in the Pending tab include sending them to the Posted tab (placing them on the Live Calendar) by choosing "Post", or removing from the Pending tab by choosing "Remove from Pending." Events may be selected by placing a check in the check box next to the Event. All Events in a tab may be selected by clicking on the "Select All" link.
The Posted events tab displays a list of events that are currently posted to the live calendar. There are five data fields displayed for each posted event. Events may be sorted by clicking on the name of any of these fields, which include:
Event Date & Time - The date and time when the event is occurring.
Title - The title of the event.
Sponsor - The account that created the event.
Source - One of the five options described above.
Updated - The date on which the Event was last updated.
One action is available on Events in the Posted tab: removing them by choosing "Remove from Posted."
The Archived events tab displays a list of events for which the event date has passed the live calendar display threshold (see section 6.2.2.1 General Appearance: Calendar Display Range). At that point, the event automatically moves from the posted tab to the archived tab. There are four data fields displayed for each archived event. Events may be sorted by clicking on the name of any of these fields, which include:
Event Date & Time - The date and time when the event is occurring.
Title - The title of the event.
Sponsor - The account that created the event.
Source - One of the five options described above.
The following actions are available within the Calendar Events tabs. Each action is available in any of the three tabs unless otherwise noted.
Sort - The default sort for each tab is by Event date and time. Clicking on the column title for any of the available data fields will resort the events within that tab by the chosen data field.
Simple Search - The default search is a simple text search of the Events in the tab for text in Event Title and Description. (Note: Although this is the default for all tabs, the Posted and Archived tabs are pictured above with alternate search criteria selected.) Other choices available via a drop-down menu are search by Sponsor, Event Type, Audience, Performer/Speaker, Location, Event Dates, Event Keywords, and Feature Types. A simple search allows the user to choose only one search criterion. Once the criterion has been specified, clicking the search button will search for matching events within the current tab only and replace that event list with the search results. Choosing the clear search button will return the full list of events in that tab.
Advanced Search - Clicking the advanced search link expands the search area to allow multiple criteria to be selected together creating a narrower search.
View Event Details - Clicking on an event title will display the Event Details page for that event. See section 6.2.1.6 for more information.
Multiple Item Post (Pending tab only) - The post button on this tab acts upon the events selected via the check boxes in the left most column. Clicking this button will display a confirmation page listing the selected events with options to continue or cancel. When continue is chosen, the selected events will be posted to the live calendar and the events move from the pending tab to the posted tab.
Single or multiple item Remove (Pending & Posted tabs only) - The "Remove from Pending" or "Remove from Posted" buttons act upon the events selected via the check boxes in the left most column. Clicking this button will display a confirmation page listing the selected event(s) with options to continue or cancel. If an event that the user has chosen to remove is owned by their account and not in use on any other calendar, on the confirmation screen there will be a check box underneath the event allowing them to indicate that it should be completely removed from the system so that it is not available to other calendars. This Event will actually remain in the system for archival purposes, but will be changed to "Deleted" status and thus unavailable to any calendars.
Edit (Pending & Posted tabs only) - Events that are owned by the account will have an edit button on the right side of the title column. Clicking this button displays the Create Event form pre-populated with the data for the chosen event allowing the data to be edited.
The three screenshots above are all part of one page, which is a form for entering a new event into the system. There will also be a "Quick Entry" version of this form which will only include the required fields, and a few selected other fields, such as description. This form will be used both within the Calendar & Event Management Application and for Event submissions from the Live Calendar. The available data fields are based on the event model. Required fields include: Event Sharing Status, Title, Event Type, Date, Location (either select a campus location or enter an address for an off-campus location), Sponsor Name, and Sponsor Level with a value of "Primary." Sponsor Name always defaults to the calendar the user is on, or the account that they've used to log on to the Calendar & Event Management Application. However, it may be changed. The Primary Sponsor becomes the Event Owner with edit (and delete, if no other calendar is using the Event) rights to the event. Event sharing status is a choice between 'public' or 'private'. Choosing 'public' makes the event available to other calendars in the network either a) it has been posted on the Event Owner's calendar or b) if the Event Owner has set their Event Release Preference to "immediate." Choosing 'private' means the event will only be displayed on the owner's calendar and the event will not be available to other calendars in the network.
There are five buttons in the Create Event form:
Save and Post - Choosing this option displays the entered data on a confirmation page for review with the option to continue or go back to the form. Choosing continue posts the event to the calendar immediately. All required fields must entered in order to complete this option. If the event is 'public' it will be available to other calendars in the network.
Save as Draft - Choosing this option displays the entered data on a confirmation page for review with the option to continue or go back to the form. Choosing continue saves the event in the pending list. The event is considered in a draft stage so even if it is marked as 'public', it will not be available to the calendar network until it has been posted.
Preview - Choosing this option opens a separate window to display a preview of the event as it would be displayed on the live calendar. The only action available in this window will be a button to close it. The event will not be saved unless one of the save buttons is clicked.
Cancel - Choosing this option returns the user to the Calendar Events page and all data entered is discarded.
Copy Event as Template (not pictured) - This action creates a new Event containing all information from the Event being copied, with the exception of identifying information about the original event or its author. The Primary Sponsor of the Event defaults to the Account of the User making the copy.
One of the benefits of the calendar network is that one calendar can easily post an event from another calendar without anyone having to manually re-enter or maintain the data. This also prevents duplication of data because an event is entered once and can be displayed on multiple calendars. This page provides the functionality to search the network's repository of public events. Only events that have been designated as 'public' will be searchable. The search mechanism is the same as the search mechanism used on the tabs in the Calendar Events page (see section 6.2.1.1.4).
After choosing a set of search criteria and clicking the search button, the results are displayed in a table below the search section. The data fields displayed for each event in the search results include:
Event Date & Time - The date and time when the event is occurring.
Title - The title of the event.
Sponsor - The account that create the event.
Live on your calendar? - A yes/no field indicating whether the event is already posted on the account's calendar.
The following actions are available after receiving search results:
Sort - The default sort for the search results is by Event date and time. Clicking on the column title for any of the available data fields will resort the search results by the chosen data field.
View Event Details - Clicking on an event title will display the Event Details page for that event. See section 6.2.1.6 for more information.
Single or multiple Item Post - The post button in the search results table acts upon the events selected via the check boxes in the left most column. The selected events will be posted to the live calendar and the events will be listed on the posted tab of the Calendar Events page.
Singe or multiple Item Send to Pending - The Send to Pending button in the search results table acts upon the events selected via the check boxes in the left most column. The selected events will be placed on the pending tab of the account.
Export - This option allows a user to export their search results. After selecting this option, a user is presented with a confirmation screen in order to select the file format and confirm the export.
Save Search as Subscription- This option allows the chosen search criteria to be saved as a subscription. It opens the subscription page and pre-populates the search criteria in step one of the "create a subscription" form. See section 6.2.1.4 for more information.
The purpose of this page is to allow account owners to set up subscriptions for specific kinds of events. A subscription is a saved set of search criteria (e.g. seminars sponsored by the Biology department that contain the keyword 'environment' in the description). Each time a user logs in, all subscription queries are run and the results placed in the pending or posted tab. Additionally, a batch job runs every night which runs all subscription queries for all accounts and puts any results in the appropriate queue of each account.
The lower section of the Subscribe page contains the form used to create a new subscription. The process consists of three steps:
Step 1: Choose One or More Search Criteria - The available search criteria include (text in) Event Title and Description, Sponsors, Event Types, Audiences, Performer/Speakers, Locations, Event Dates, Event Keywords, and Feature Types.
Step 2: Select Options - The three subscription options include:
Approval - This option is required. The available choices are 'manual' or 'automatic'. 'Manual' indicates that when events matching the search criteria of the subscription are found, they will be listed in the account's list of pending events. 'Automatic' means that when matching events are found, they will automatically be posted to the account's calendar and will be listed in the account's list of posted events.
Time Period - This is a required field which adds a time constraint to the subscription. It is an indication of how far into the future a matching event will be added to the account. For example if the selected time period is 'one month' then the subscription searches for events matching the search criteria that occur within one month of the present date.
Expiration Date - This is an optional field representing the date after which the subscription will no longer be valid and will cease searching for matching events.
Step 3: Name Your Subscription - A text field to allow the user to provide a name for the subscription which will be displayed in the Current Subscriptions list.
There are four available buttons to act upon the form:
Subscribe - Clicking this button saves and activates the subscription. The subscription will be listed in the Current Subscriptions table.
Preview Results - Clicking this button will run a search using the chosen criteria on the current set of events in the network. The results will be displayed in a separate window. The only actions available within this window are to view the details of an event by clicking on the event title or closing the preview window.
Clear - Clicking this button clears the data from the form.
Cancel - Clicking this button returns the user to the Calendar Events page and discards any data entered into the form.
This first section of the Subscribe page contains a table listing each of the subscriptions belonging to the account. The following data fields are listed for each subscription:
Title - The title given to the subscription.
Approval - Manual or Automatic. See Step 2 above for a more detailed description.
Time Period - The time constraint on the subscription. See Step 2 above for a more detailed description.
Expiration Date - Optional expiration date for the subscription. See Step 2 above for a more detailed description.
The following functionality is provided to manage the current subscriptions:
Edit - Each subscription listed in the table will have an Edit button to the right of the title. Clicking on this button changes the bottom section of the page from "Create a New Subscription" to "Edit Subscription" and pre-populates the form with the data from the chosen subscription allowing it to be edited.
Delete - The delete button acts upon the subscriptions selected via the check boxes in the left most column. The selected subscriptions will be deleted from account.
This page provides functionality to export event data out of the account using the chosen file format. The page contains a form with three steps:
Step 1: Choose Data Set(s) to Export - This step allows the user to select which data sets to include in the export by checking the selection box next to the corresponding data set. The choices are: pending events, posted events and archived events. More than one data set may be chosen.
Step 2: Filter by one or more search criteria (or skip to step 3) - This step is optional and allows the data sets to be filtered based on any combination of filter criteria. If no criteria are chosen, the entire selected data sets will be exported. The available criteria are (text in) Event Title and Description, Sponsors, Event Types, Audiences, Performer/Speakers, Locations, Event Dates, Event Keywords, and Feature Types.
Step 3: Select Export file type - This step allows the user to choose the file format of the exported data set.
There are three available buttons to act upon the form:
Export - Clicking this button opens a standard 'Save File As' dialog box to allow the user to name the exported file and select the location to save it to.
Clear - Clicking this button clears the data from the form.
Cancel - Clicking this button returns the user to the Calendar Events page and discards any data entered into the form.
The event details page is displayed when the title of an event is clicked on. This functionality is available in several places throughout the application wherever an event is listed with a hyper-linked title (e.g. pending events, posted events, archived events, search results). The event data is displayed for review. If the event is owned, all of the event data will be displayed. If the event is not owned, only the 'public' data that is displayed in the calendar will be displayed.
From the event details page, some combination of the following actions are available:
Back to... - A link at the top of the event details page that takes the user back to the page they came from.
Edit - If the event is owned by the account, the event details page will contain an edit button which displays the create event form pre-populated with the data for the chosen event allowing it to be edited.
Post - If the event has not been posted to the account's calendar, the post button will be available. Clicking this button will post the event to the live calendar and the event will be listed on the posted tab of the Calendar Events page.
Recommend - A non-owned event or an owned and posted event can be recommended to other calendars within the network. Clicking this button causes the event details page to expand and display a list of network calendars that have agreed to receive recommendations. The user selects the calendars to receive the event and clicks the Recommend button. The event will then appear in the pending list of the account(s) receiving the recommendation.
Send Back to Pending - This option allows a user to send an event they had posted back to their pending list.
Remove from Pending/Calendar - If the event is currently in the pending list or posted to the calendar the option to remove the event from the specified tab (e.g. pending or posted) will be available. The event remains in the system available to other calendars if this option is selected.
Delete from System - This option is only displayed to the account who is the owner of the event if no other account has that event in either their pending or posted queue. A note is also displayed to the user stating that the "Event may be deleted because no other calendar is using it." This Event will actually remain in the system for archival purposes, but will be changed to "Deleted" status and thus unavailable to any calendars.
The Format Calendar page allows calendar administrators to customize their calendar's 'look-and-feel' by modifying the settings in each of its five sections: General Appearance, Headers, Global Navigation, Calendar Navigation, Event Detail and Footer. These sections are displayed as separate tabs within the body of the page. The application then generates calendar views with a XSL transform and CSS file stored within the system. For more advanced users who want to have greater control over the appearance of their calendar, beyond the customization settings of the application, they can choose to replace the default XSL transform and CSS files with their own in the Advanced Settings Tab. There are currently two examples of custom calendar views using XSL transform and CSS: 'horznav_list_month_transform.xsl' and 'horznav_grid_month_transform.xsl'.
Below the tabbed sections is an abstracted preview of what the calendar looks like. It is abstracted because it only shows the current settings for font style and color. It also does not show the actual calendar event content, instead it shows labels in place of actual data. For example the label "Header Text" is placed in the header instead of the actual text displayed on the calendar. In addition, there are pink name tags labeling each section or aspect of the calendar that is customizable. These name tags correspond to the name of the settings in the five tabs to let users know what their settings will affect. Once users change the settings in the tabbed sections and choose either "Save Changes" (in which case the changes are saved and their live calendar is updated) or "Preview Your Calendar" (in which case the changes are not saved), the abstracted preview will update to display the current settings.
The General Appearance tab affects the style for the entire calendar. It includes settings for:
Calendar Background Color - Users can set the color in two ways. They can click on the colored square next to the label to bring up a color picker or input the hex value of the color into the text field.
Calendar Display Range - Users need to specify the range of dates available to view on the live calendar. For example, if it is currently the month of May and users choose to 'show calendar 1 month before and 1 month ahead of the current month' then the calendar will display all the events in April, May and June. This is the "live calendar display threshold" which determines when an event is considered archived. See section 6.2.1.1.3.
The Headers tab controls the settings for the header of the calendar. This section will only be available if "Include Header in Calendar" is set to "yes."The Header is located at the top of each page and usually displays the department or organization name. The settings within the tab are:
Header - Users can choose to change the Header in three ways. They can enter the text for the header and select the font styles and color for the text. They can upload a graphic header in place of just text. The graphic will appear in the center of the page and assume the general background color. For the most flexibility, they can add their own HTML in the text area provided within the application. However, their HTML will replace any other Header settings.
Date Header - The Date Header appears below the Global Navigation and Calendar Navigation. It displays today's date on the left side and the displayed event date range on the right side. The date range will change depending on users' selection in the Calendar Navigation. For example, if users select to view the events by Month in the Calendar Navigation, then all the events displayed on the page will be for a 1 month range. Users can still navigate month-by-month by clicking on the direction arrows '>>' in the Date Header. Users can set the font style, link style, and colors of the Date Header.
Date Subheader - There is a Date Subheader for each day in the calendar that has at least one event. The date is a link and when clicked will take users to the day list view for that specific day. Users can set the font style, link style, and colors of the Date Subheader.
The Global Navigation appears directly below the Header. The purpose of this section is to help integrate the calendar more fully into the user's site by including navigation to the other pages of the site. This section will only be available if "Include Global Navigation in Calendar" is set to "yes." The settings for the tab are:
Layout for Global Navigation - Users can choose a horizontal or vertical navigation layout. By default, the abstracted preview shows a horizontal format calendar, but this can change based on the user's selection for their calendar.
Global Navigation Links - Users can create global navigation in one of two ways:
Edit Navigation - Users can enter the link names and their corresponding web addresses in the provided text boxes and set the font style, link style and color.
Edit Navigation HTML - Users can enter the HTML for the navigation directly into the text box.
The Calendar Navigation controls the view of the calendar. On the left side users can choose to view the events in day, week, month, or year view and on the right side, users can select grid or list view. Currently, it is not an option to see the grid view in the abstracted preview because all settings in the grid view are either the same as the list view or created by default (see 1.3.7 Default Styles). The available settings in this tab are:
Calendar Navigation Links - Users can set the font style, link style and color.
Event information appears in two areas within the calendar. The Event Listing (see below) appears in the list view of the calendar. If users want to see the full description and all the details of an event, they must click on the event title from the list view. This will link to the full event detail page. The Event Detail tab sets the styles for both of these areas and the settings are:
Event Detail Text - Users can set the font style, size and color for the event description and the event title. Event title will have the same style as the event description except it will be bold and underlined.
Event Detail Links - Users can set the font style and color of any links within the event description. For example in the Create Event form, users can add a sponsor's name and link the name to a web address. In the event details, the event sponsor's name will become a link and assume the style set in this section.
Event Detail Labels - Users can set the font style and color of all event data labels. Labels will not be linked so do not have link styles.
Event Listing - The Event Listing is an abbreviated version of the full event detail page and is visible on the calendar's list view. The Event Listing automatically includes the date and time of the event as well as the event title which links to the event detail page or to a user-specified URL. Users have the option to add Location, Sponsor, Event Type, and Description to the event listing. If Description is chosen, the user must select between using the Short Description, the Description, or the Short Description if it is available, and if not the Description.
The footer refers to the bottom area of the page and functions similarly to the Global Navigation. This section will only be available if "Include Footer in Calendar" is set to "yes."The settings for the tab are:
Edit Footer - Users can create a footer in one of two ways:
Edit Footer - Users can enter the link names and their corresponding web addresses in the provided text boxes and set the font style, link style and color.
Edit Footer HTML - Users can enter the HTML for the navigation directly into the text box.
For more advanced customization that is not available via the provided tabbed sections, users can use the Advanced Formatting section. Here users can replace the default XSL Transformation file and/or CSS file with their own.
Download - Users can download the application's default .xsl and .css files by clicking on the download button in the 'Edit Calendar XSL Transformation File' and 'Edit Calendar CSS File' sections. This will invoke a standard 'Save File As' dialog where users can specify a local location to save the files. Users can then view and edit their local copy to fit their needs.
Browse and Replace - When users are ready to replace the current .xsl and .css files, they can click the browse button. This will invoke a standard 'Browse for File' dialog where users can choose the file to upload. Once they click 'OK' the file name and path will appear in the text box next to the browse button. Users can then click replace to upload the new file. There is currently no way for users to return to the application's default .xsl and .css once they have replaced them. So, it is strongly suggested that users save and keep a version of the original files before changing them.
There are many styles in our application's default.css file that are not editable with the Format Calendar interface. For example, all the formatting in the calendar's grid view and grid thumbnail is set by other list view settings or by default. The purpose of the Format Calendar page is to give users enough formatting capabilities without overwhelming them with too many options. For a detailed mapping of the CSS styles to the calendar, see Appendix B.
We expect that the Live Calendar will be redesigned by Public Affairs. It will have essentially the same information architecture, but will be reorganized and given new design elements. There is a list view for Day, Week, Month, and Year, and a grid view for Month and Year. It has also been suggested that a two-week view be added to fulfill the same requirements met by WebEvent, a calendaring system currently used by several campus departments.
The calendar on the left side of the screen is used to navigate between different dates. Anything that is underlined in the calendar is a link. Clicking on the title of an event will take the user to an Event Details page. If a link is grayed out, it is inactive (e.g. the "Grid" link is grayed out on the Day and Week view).
The Search Event select box should be populated with the same search criteria as the Search in the tabs of the Calendar & Event Management Application. This is actually a filter on the events in the current view (e.g. Week List) and simply filters out events in the current view that don't meet the criteria selected. It may be good to re-name this "Filter Events by". The default search/filter is a simple text search of the Events in this view of the calendar for text in Event Title and Description. Other choices available via the drop-down menu are filter by Sponsor, Event Type, Audience, Performer/Speaker, Location, Event Dates, Event Keywords, and Feature Types. When users may choose from an enumerated list of selections (e.g. Sponsors), a select box which shows four values will be placed directly under the search criteria drop-down list.
The Advanced Search button will take users to a screen which looks like the Search Campus Events Advanced Search page of the Calendar & Event Management Application, without the ability to search Feature Types. It remains to be determined what type of navigation will be included on this window. Search Results will be returned to this same window.
It will be necessary to add a "Submit Event" button and a link to information on who can submit events, what the criteria for event submissions are, and the process for posting events. Only members of the campus community with a CalNet ID may submit events, so after clicking on "Submit Event" Users will be directed to the CalNet authentication screen and proceed to the Create Event screen. This Create Event screen will not include the Administrative Options section, and any references to "your calendar" will be changed to "the calendar of the Primary Event Sponsor".
We would like to comply with all recommendations made in the WebAIM Section 508 Checklist. We also recommend meeting the Priority 1 and as many of the Priority 2 & 3 guidelines in the W3C's Web Content Accessibility Guidelines 1.0. We plan to use XHTML (which will have been created from an XSL transform of an XML document containing Events) & CSS to create the calendar. We will use tables for layout, however, and not try to use CSS positioning, as it doesn't display uniformly in all browsers at this time.
The calendar should look just like the design for its pages in the following browsers:
Internet Explorer 5.0 and higher
Netscape 7
Safari 1.0
Mozilla Firefox 1.0
A stylesheet for Netscape 4 should be provided for each page. A print stylesheet should be provided for the Event Details page and Search Results.
All screens for calendars with vertical navigation are the same as the screens for horizontal navigation except for the fact that the horizontal navigation is removed, and the thumbnail navigation calendar and "Today's Date" section is moved down to accommodate the vertical navigation.
