Personal tools

Calendaring

From Social Patterns

Jump to: navigation, search

Contents

What

User wants to find or submit an event (public or private) based on a date or between a date range.

Upcoming browse by date screen
upcoming allows user to browse events by date


Use When

  • Use this pattern to create date driven events.
  • Use this pattern to find events by date.
  • Use this pattern in combination with Face-to-Face Meeting and Party.


How

Add an event to Google Calendar
Adding an event to Google Calendar

Selecting a date on upcoming
Associating an event to a date on upcoming.

  • Allow users to associate an event with a date. This can be done through an event planning (upcoming, evite) interface or within a calendar interface (30 boxes, google calendar, Yahoo! calendar).
  • Allow the event creator to indicate whether the event is public or private.
  • Allow the calendar event to be shared. Sharing can be through selecting directly from the user’s network (Facebook), through email (evite), through RSS, blogs or other social offerings (My Yahoo, My Space, Wordpress etc).

Selecting a specific date:

When selecting an associated date for an event, allow the user to either type in the date or choose the date with a calendar picker.

Providing the calendar picker allows the user to see the date in context to other dates and the day of the week and ensures less data entry errors.

Using the Calendar Picker

Layout

By a specific date:

  • The default Single month Calendar Widget displays the current month and year.
  • Users are able to view only one month at a time. Clicking onto the arrow graphics will show the previous or next month.

Between two dates:

  • The Two-month Calendar Widget show two consecutive months at a time.
  • Clicking on the arrow graphics shows the next month in the sequence, with the month on the right moving to the left and the next consecutive month occupying the right block.

Interaction:

Selecting a single date:

  1. The user is presented a calendar icon as an optional alternative to date selection from the standard date pulldowns.
  2. User clicks on the calendar icon and the calendar widget opens below the date form entry fields, so as not to obscure them). The default date selected should be today.
  3. The user may select a date from the graphical representation of the calendar by clicking one of the active dates. These may be in the future or the past depending on the scope of the data set or the task at hand. (i.e Selection of a flight when traveling would only show active dates in the future, selection of blog posts available to edit would be in the past.)
  4. Clicking on a date in the single month calendar widget, registers that date as an option/constraint for selection and the widget closes.

Selecting a date range in two successive instances of the popup widget:

  1. The user is presented a calendar icon as an optional alternative to the first date selection form fields.
  2. User clicks on the calendar icon and the calendar widget opens. The default date selected should be today.
  3. The user selects a starting date.
  4. The user invokes the calendar widget associated with the second date.
  5. The system defaults to a date on or subsequent to the first date (not the current date).
  6. The user selects an ending date for the range.
  7. As each date is selected a highlight or other visual feedback should be indicated to remind the user which date they selected.
  8. Once both dates are selected, the system registers the indicated date range as an option/constraint for selection and the widget closes.

Selecting a range of dates in a single instance of the popup widget:

  1. The user is presented a calendar icon as an optional alternative to two date selection options from the standard date pulldowns. The default date selected should be today.
  2. The user selects a starting date and an ending date to bound a search between two dates. Users are able to view two months at a time. Clicking onto the arrow graphics should display past or future months one month at a time.
  3. As each date is selected a highlight or other visual feedback should be indicated to remind the user which date they selected.
  4. Once both dates are selected, the system registers the indicated date range as an option/constraint for selection and the widget closes.

Notes:

  • Hovering over the calendar icon should change the mouse pointer to a hand symbol.
  • An affordance for "Go to Today" assists the user when the today's date is not the default.
  • In some contexts (such as when booking travel or tracking events in the future) the calendar picker should offer a way to scroll forward and back by year.
  • Default date and month should nearly always be the current month. When choosing a second date in a range from a second individual calendar picker (as with most travel website interfaces), the second calendar widget should default to the date selected with the first widget (as opposed to suggesting the current date).
  • Display complete weeks, even at the beginning and ends of months. The visible dates from the previous and next months should appear duller or gray but they should also be selectable.
  • Moving between days, months, etc. in a calendar picker is fairly intuitive for most users, though care needs to be taken not to have targets that are too small or that move (e.g., when the length of the month name is longer/shorter).

Calendar Picker Special Cases

  • International considerations: The day of the week label is important because Asia countries may start with the Monday dates in the first column (Mon. - Sun.), whereas Western countries may start with the Sunday dates in the first column (Sun. - Sat.)
  • Yahoo! Research indicates that it is better to launch the calendar picker from a calendar icon than to do so directly from the day/month/year fields or dropdowns, but as long as the calendar doesn't interfere with the ability to directly edit the field, and the field stays in focus, invoking from the date-entry form fields is not a problem. (Users do not expect the calendar widget to be invoked from trying to edit the field and they know to use the icon to invoke it, so this should only be done if it can be done in such a way as to not interfere with the behavior users are expecting when they bring focus to the field.)

Calendar Details

Calendar entry on Google Calendar
Calendar entry on Google Calendar.

  • Provide a title and description field.
  • Provide a notes field for URLs and other information.
  • Allow the user to associate a location to the event.
  • When complete, present the event in all presentations of the calendar; i.e. list view, day view, week view, month view.
  • Present the title, location and as much of a description as appropriate for the display. For example, the list view would display most, if not all, of the description while the month view may only show a truncated title.
  • Use rollover panels to display the full calendar event without forcing the user to click.

Rationale

Events are time constrained and including robust online calendaring tools will make creating parties, events and face-to-face meetings easier to plan.

Provide enough functionality to be useful without creating a whole enterprise level application.


Related Patterns


Source

The calendar picker portion of this pattern comes from the Yahoo! Platform UED team and the Yahoo! Pattern Library.


As Seen On

  • Upcoming
  • Facebook
  • Evite
  • 30 Boxes
  • Google Calendar