Calendar views UI component specification

• Status Reviewing this with the Apps WG as of 20040525

• Motivations

• Expressive information design that communicates both forest and tree perspectives of the user's life schedule
• Includes both events and tasks in order to convey an accurate picture of busyness
• Differentiates between Calendar events the user is attending and FYI calendar items (ie. Holidays, Gym hours, etc)
• Clearly displays conflicts
• Clearly displays relative durations of events and gaps of "free time"
• Seemless zooming in for more detail

• Flexible layout so that users can control "timespan" of their calendar view
• Better solution to overlaying calendars
• Better solution for displaying all-day or multi-day events
• Better solution for displaying conflicts
• Calendar month view doesn't have to be the useless thing it is today!

Use cases

• Creating new calendar items
• Setting up a meeting
• Entering an event
• Putting a note on the calendar (ie. Flight and Hotel check-in information)

• Putting an FYI note on the calendar (ie. Holidays, Birthdays, Soccer games, Gym hours)

• [InfD] Reviewing your calendar
• Seeing the big picture
  • Looking for overall patterns (almost data reporting)

  • Planning long-term schedules
    • Manager creating a schedule for his team
    • Planning personal schedules and time estimates for how long something is going to take
    • Planning vacations
    • Planning recurring meetings / tasks

• Getting an idea for the next few days / past few days
  • Scheduling meetings
  • Weekly review
  • Writing up status report for the past week
  • Gauging short-term deadlines

  • Getting an idea of what's coming up, what you need to prepare for
• What's next
  • Hour to hour looking up what you have to deal with next
  • Scheduling last minute meetings
  • Estimating last minute deadlines

Workflows

• Scheduling
• Comparing multiple calendars at once

#Wireframes

Wireframes

• How Chandler can displaying more calendar data
• Data for the calendar month views below are taken from this calendar. MayMonth^?.gif:
  

• The proposals above are able to display a lot more data than the iCal display below.
  • 13 out of the first 14 days of the iCal month view show "incomplete" data (...)
  • Only 3 out of the first 14 days of the Chandler month view show "incomplete" data (...)
  • Even so, the bars display all calendar events, even if there is not enough room to display textual descriptions of every event
• Chandler calendar displays the number "Anytime this day" tasks as well

• Chandler calendar gives a sense of the spread of events over the course of the day
  • When am I more or less busy?
  • When am I free in the morning / afternoon
  • In absolute time:
    • Compare white space from day to day to get an overall sense of busyness
    • Compare white space above / below the PM tick mark to get a comparative sense of relative morning / afternoon busyness

  • In relative time, the bars and PM tick mark function as bar graphs: * Events are bunched up near the top of each day. The farther down the bars extend, the more busy you are on a given day. * The PM tick marks moves up and down depending on the number of events before noon. The farther down the PM mark moves, the more morning events you have.
• Multi-day events are each represented with a 1 pixel high line. The thicker the line for a given day, the more all-day events there are on that day. As a result, the multi-day events line functions as a gauge of how "busy" any given day is with all-day events.
• Chandler distinguishes between events you're attending and FYI events. The light grey color lightens the "visual density" of an area, making it appear less full and therefore "less busy"

• calendar_month20040901.gif:
  

• customizing_month_week_view.gif:
  

Mini-calendar browser

* mini-calendar_browser.gif:

• sidebar_001m20040720.gif:
  

Workflows

• Opening the calendar
• Workflow A: Open mini-calendar browser and click on a day, week or month
• Workflow B: Click Open calendar button in the top right hand corner of the summary table view
• Workflow C: Click on Calendar Kind filter in Sidebar. This switches contexts. See SidebarSpec for more.

• Closing the calendar

• Workflow B: Click the close calendar button in the bottom right of the calendar

• Creating a new calendar item

1. Create new item
2. Stamp: Put it on the calendar
   • Workflow A: Open mini-calendar browser and look at the activity bar charts to pick a day with free time AND / OR
   • Time field is prepopulated with available time slots based on date selection OR
   • Workflow B: Open calendar to drag it onto the main calendar directly OR
   • DnD on calendar icon in summary view / another tab displaying the calendar collection to put item on the calendar without a specified event time OR
   • DnH^? on calendar icon in summary view / another tab displaying the calendar collection to open main calendar and place item on calendar

• Cal_workflow.gif:
  

• Navigating in the calendar
• Mini-calendar browser: For coarse-grain navigation
  • 1-click on a day to select the week in week view
  • D-click on a day to select the day in day view
  • Click Today to jump to Today in the week view
  • Today is in bold

• Once you're in range, navigate within the calendar itself
  • Select a day of the week
  • Back and forward arrows move 1 week at a time
  • From the week view, select a day
  • Other days of the week still available for clicking (ie. tabs) OR

  • Back and Forward arrows still move 1 week at a time
  • Click Today to jump to Today in the week view

• Using the mini-calendar browser for feedback
• Select a multi-day event

• Mini-calendar reflects the full-span of the multi-day event

Features for .4

Basics

• Switch between List and Calendar views
• Switching between Month / Week / Day of Week / Day views with "direct navigation" by directly clicking on the Month / Week / Day you want to see
• Navigate between months / weeks / days with back and forward buttons
• Click on today's date to go to today in whatever view you're in (Month / Week / Day of Week / Day)
• Display month and year at the top
• Not repeat the month in each day
• Bigger font size

• Grey out days that belong to other months

Entering

• In-place creating new items
• Display relative time with moving pm tick mark in month view
• Decouple dashes from Text headline description of each calendar item

• Diplay absolute time in day and week views
• Displaying conflicts in red: If 2 events start and end at the same time, make entire bar red for both items
• Show number of overflow items in month view
• Center week and day views on 7AM-7PM
• Tick mark = Noon

Views

• Week and Day views [Need wireframe from Design]
• Show editable start time, task status, recurrence (can only turn recurrence on and off) in header on calendar + editable headline
• Show only headline when duration of the event is too small to display header items (only for week view).
• Provide feedback for end-time while creating new event in-place (a la Apple iCal)
• Composite view (Calendar + Table summary view) to be able to display ad-hoc collections in Calendars

• Select a timeframe in either main calendar view or mini-calendar browser and display items in summary table panel of the composite view

Mini-calendar browser

• Browse forward and backward
• Jump to "today"
• Select a day / week / month to jump to

• Just for Calendar views

Interaction and visual design

• Selection feedback
• Background color = White
• Larger font = Default OS font, 13 point on Mac, 11 point on PC

• Smaller font = Verdana, 10 point on Mac, 8 point on PC
• Box outline color = ??

Post IP-A status

• Mini-calendar will be standard wxWidgets
• No clusters (ad-hoc collections)

• Only basic in-place editing (e.g. create event in calendar, enter text in detail view)

Beyond .4

• Navigation
  • RO to reveal hotspot
  • Single click to "filter" or "navigate to" composite list view contents ([OI])

  • D-click to see selected week / day of week / day
  • Multi-select to filter
  • Multi-select + Rt-click to see in Week view
  • [OI] Do we want to have a year view?
  • [OI] Does this allow us to get rid of the mini-calendar browser?

• Anytime (day, week, month) and multi-day representation in summary view and composite table area
• Days with all-day events are colored light grey
• Multi-select weeks in the mini-browser to set what range of weeks is displayed in the calendar month view
• Multi-select days mini-browser to set what days to view in the Week view

• Select all "Mondays" to display in Columnar view
• Overlaying calendars
• Putting up multiple day views from different calendars in side-by-side columns
• DnDing^? items onto calendar
• Absolute time display in month view
• Micro-level time feedback for in-place start/end time editing in week / day views (ie. 2:17)

• Selections are reflected in the Search / Nav bar

Kibble proposal

• Calendar summary view
• .4 Switch between summary calendar and table view (no composite view)
• .5 Search results are shown in table view
• .5 Just the calendar summary week and day view
• Ability to print a single day

• Anytime this month, Anytime this week, Anytime this day and All-day calendar items
• Visual distinction between events and tasks on calendar. Change triage status on tasks in-place in the calendar summary view.
• ? Custom visual design for calendar time blocks
  • Time lines plus time blocks reflect event status: Confirmed, Tentative, FYI

  • Selected item has drop shadow or has a filled-in background, which ever is easier
  • Red = conflicts
  • Grey = FYI items
  • Dotted black line = Tentative

• Overlaying calendars
• Colors for calendars: Color assigner widget reflects all of the calendar colors if more than one calendar is turned on.
• Road Warrior View: for people on the road all the time, can we have a view that has different background colors for the hour/day/week/month for location (Seattle=Red, NYC=Blue, Miami=Green, etc.) with appointments/events overlaid so that it's easier to make the decision for local meetings versus conference calls, etc.?

• calendar_week20041021.gif:
  

• calendar_day20040910.gif:
  

• Navigation and IntD^? for main summary calendar view
• In week view, single click on a day button to go to that day in day view

• In day view, single click on another day button to go to a different day in day view
• In day view, single click on week button to return to week view
• In both week and day views, navigation arrows go forward and backward by 1 week
• In week view, single click on day column to select day for copy and paste

• In day and week view, d-click in day column to add new item

• Calendar detail view
• Smart email addressing (like Apple Mail or gmail)

• Activate and de-active
  • Scheduling (see free / busy time of invitees and location on your calendar)
  • View event on calendar
  • Set alarm
  • Set recurrence
  • All-day or multi-day event

• Type over text entry
• Alarm pulldown: minutes, hours, days
• Recurrence pulldown: weekly, monthly, yearly
• End-time pulldown: until (a certain date), after (x times), never
• [OI] Confirmed, Tentative, FYI status, is there only 1 per item or can each participant display their status as well

• calendar_detail.gif:
  

• calendar_detail_labels.gif:
  

• Mini-calendar browser
• .5 Conform navigation to wireframe spec
• .5 Mini-calendar browser can be used to navigate the summary calendar if it is open
• .5 Single click does not switch the summary view from table to calendar
• .5 D-click switches summary view from table to calendar
• Multi-select to customize week view
• Busyness bars in mini-calendar browser
• Preview events for the selected day. If there are no events, no preview area

• DnD items onto date in mini-calendar browser to put them on the calendar for that day
• mini_calendar_browser.gif:
  

• Entering date and time information in the detail view of a calendar item

1. .5 Enter date info
2. Hit enter to auto-complete the year
3. .5 Time for that date appear with free / busy status
4. .5 Scroll and hit enter to select a time or keep typing to enter custom time

• Entering_date_time_info.gif:
  

Kibble workflows

Allow users to put items on the calendar in stages

1. I know this belongs on the calendar, but I don't know when
2. I know this belongs on the calendar some time in November
3. I know this belongs on the calendar some time on Nov 3
4. I know specific date / time information

• Putting an existing item on the calendar

1. Click Put on calendar stamping button in selected item's detail view
2. Enter date and use prepopulated pulldown to select a time range OR
3. Open the mini-calendar browser to look for a good day OR
4. DnD item onto a specific day or month in the mini-calendar browser OR

5. Open calendar in a separate tab and DnD item onto calendar: Default date: Someday maybe OR
6. Open calendar in a separate tab and DnH^? to switch tabs and place item in a specific date / time slot

• Lightweight calendar review
• Calendar and Triage in one single view: Mini-calendar browser's preview area displays events for selected day (OOTB day is Today)
• Month-level review: Open mini-calendar browser to view overall busyness over a period of one or more month(s)

Free busy

• Publishing free / busy
• Collection menu: Publish my schedule

• Dialog pops up
• User enters list of recipients
• For each recipient, user can choose to publish
  • Calendar status (Confirmed, Tentative, Free)
  • Event subject
  • Task subject

  • Location
  • Participants
• OOTB, Chandler will base free / busy calculations on all calendar items in the Dashboard collection
• In the future, we will want to allow users to designate a different collection to be the basis of their free / busy calculations
• [OI] For .5 Do we want to preset a configuration (ie. Publish full free / busy information to everyone on the WebDAV server)

• Recipients do not need to "accept" an invitation to free / busy

• Workflow Scheduling with free /busy
• Create event or invite
• Add invitees

• Click "schedule" button
• Free / busy schedule replaces calendar view
• [OI] How do we match up free / busy schedules with people's email addresses in invitations?

• Features

• Zoom in and out lozenges (get thinner the more people you add)
• Color legend matching schedule lozenges with invitees (automatically generated color palette) (N/A for people who have not published their free / busy time)
• Tentative v. Confirmed lozenges
• Multi-day lozenges
• Calendar items with only start times and no duration
• Mouseover color lozenge to display detail of selected lozenge (only works for up to 10? people)

• free_busy.gif:
  

Simplified text-based free-busy UI

• Workflow

1. User creates a new event in place in the calendar OR
2. User creates a new event from the New button in the toolbar or the New menu item
   • Date field defaults to Today's date
   • Time field defaults to the next hour
   • Duration defaults to 1 hour
3. Click on the clock icon to the left of the starts field
4. Pulldown appears
   • Pulldown displays first 10-20 available continuous time blocks starting from whatever is filled in in the start date / time fields. Most of the time it will be Today, unless the user has created an event in place on the calendar.
   • Scroll and hit Enter to select a time block
   • User can see different set of times by changing the start date (using the arrows keys)
   • We should consider allowing the user to manipulate the event in the calendar summary, as an easy way to see more free busy options.

• [OI] How hard is it to show the date field as mm/dd/yyyy when the user has clicked into the field, but present it as Sep 2, 2004 OR Todday OR Tomorrow once the user has left the field?

• Free_busy_text_default_toda.gif:
  

• Free_busy_pulldown.gif:
  />

• Free_busy_autofill.gif:
  

• free_busy.gif: