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.