B2G CalendarMONTH VIEW

Page 1 of 17B2G CalendarMONTH VIEW

Status DRAFTB2G CalendarMONTH VIEW Date May 3, 2012

Days in the past are in shadow

Today is highlighted with a boxBusy bar timeline represent approximately when during the day you are busy at a glance

[+] Add new event

Swipe left/right to navigate months

Tap on a day to see preview

Selected day is highlighted

Show all events on selected day. Tap to open event.

Scroll to see more

Tap [Today] to select today in the current view

Select Calendar accounts to show

Tapping [Week] or [Day] will change views for the selected day

B2G CalendarMONTH VIEW - Selected day with no events

Page 2 of 17B2G CalendarMONTH VIEW - Selected day with no events

Status DRAFTB2G CalendarMONTH VIEW - Selected day with no events Date May 3, 2012

If the day has no events the preview is blank. If you tap here,

go to the New Event screen.

B2G CalendarCALENDAR DRAWER - Select Calendars

Page 3 of 17B2G CalendarCALENDAR DRAWER - Select Calendars

Status DRAFTB2G CalendarCALENDAR DRAWER - Select Calendars Date May 3, 2012

Select which calendars to show

Calendars should be color coded

Calendar account settings

B2G CalendarDAY VIEW

Page 4 of 17B2G CalendarDAY VIEW

Status DRAFTB2G CalendarDAY VIEW Date May 3, 2012

Meeting conflicts

Drag to change starting time

Swipe up and down to scroll

Tap event to open details

Tap open slot to add eventDefault top to the current hour

All Day events at the top

Swipe left and right to change days

B2G CalendarDAY VIEW - with no events

Page 5 of 17B2G CalendarDAY VIEW - with no events

Status DRAFTB2G CalendarDAY VIEW - with no events Date May 3, 2012

Tap on an empty slot to add a new event starting on that hour

B2G CalendarWEEK VIEW

Page 6 of 17B2G CalendarWEEK VIEW

Status DRAFTB2G CalendarWEEK VIEW Date May 3, 2012

Swipe left and right to scroll days

All Day row grows in height as needed

Tap an event to see a preview bubble

Tap bubble to open Event viewTap anywhere else to dismiss

bubble

Tap an empty slot to create a new event

Swipe up and down to scroll

Drag and drop events to move them

If the week spans two months, then change title to “April - May 2012”, or “December - January 2013”

Tap on Day box to go to its day view

B2G CalendarNEW EVENT

Page 7 of 17B2G CalendarNEW EVENT

Status DRAFTB2G CalendarNEW EVENT Date May 3, 2012

Cancel / Save for modal window

Tap on fields to start editing

Default to today, next hour from now

B2G CalendarVIEW / EDIT EVENT

Page 8 of 17B2G CalendarVIEW / EDIT EVENT

Status DRAFTB2G CalendarVIEW / EDIT EVENT Date May 3, 2012

Tap on fields to start editing

Tap on Day and Hour boxes to change them

Use the system Time Picker

This design makes the event very easy to read because it only shows the event data without cluttering up the UI with labels and such.

There also are no read-only and edit modes to make it very quick to make changes with a tap.

Invite field grows as necessary

Swipe to see more notes if full

Invite field works exactly as in email:

B2G CalendarSELECT EVENT DATE

Page 9 of 17B2G CalendarSELECT EVENT DATE

Status DRAFTB2G CalendarSELECT EVENT DATE Date May 3, 2012

This is the exact same UI as in Month view that shows today highlighted and busy timeline overview bar to give you a bit more information for selecting

dates.

B2G CalendarVIEW / EDIT ALL DAY EVENT

Page 10 of 17B2G CalendarVIEW / EDIT ALL DAY EVENT

Status DRAFTB2G CalendarVIEW / EDIT ALL DAY EVENT Date May 3, 2012

When [All Day] is selected, the date fields change to first and last days of event.

B2G CalendarSELECT START AND END DATES

Page 11 of 17B2G CalendarSELECT START AND END DATES

Status DRAFTB2G CalendarSELECT START AND END DATES Date May 3, 2012

Tap [From] and [To] to select start and end dates

Default to either [From] or [To] depending whether you tapped on

the From or To date on the Event details screen.

Regardless of how you arrived on this dialog you can always change

both From and To dates.

B2G CalendarSELECT START AND END DATES

Page 12 of 17B2G CalendarSELECT START AND END DATES

Status DRAFTB2G CalendarSELECT START AND END DATES Date May 3, 2012

Drag start and end handles to change days

B2G CalendarREPEAT EVENT

Page 13 of 17B2G CalendarREPEAT EVENT

Status DRAFTB2G CalendarREPEAT EVENT Date May 3, 2012

Tap [Repeat] to see menu for event repeat options

B2G CalendarSET ALERT

Page 14 of 17B2G CalendarSET ALERT

Status DRAFTB2G CalendarSET ALERT Date May 3, 2012

Tap [Alert] to see reminder times.

Scroll menu to see more if they don’t fit.

B2G CalendarREPEATING EVENT WITH ALERT SET

Page 15 of 17B2G CalendarREPEATING EVENT WITH ALERT SET

Status DRAFTB2G CalendarREPEATING EVENT WITH ALERT SET Date May 3, 2012

B2G CalendarEVENT VIEW: DELETE EVENT

Page 16 of 17B2G CalendarEVENT VIEW: DELETE EVENT

Status DRAFTB2G CalendarEVENT VIEW: DELETE EVENT Date May 3, 2012

Swiping the event page up a bit reveals the [Delete] button

B2G CalendarMONTH VIEW: DELETE EVENT

Page 17 of 17B2G CalendarMONTH VIEW: DELETE EVENT

Status DRAFTB2G CalendarMONTH VIEW: DELETE EVENT Date May 3, 2012

Press and hold to get the [Delete] function. Same on Week and Day views when pressing and holding

on any event.