This project is a javascript widget that will be incorporated into a larger page and used to display a users google calendar for a specific date. ? The requirement is that this widget be self contained and not require server state data other than communication to google calendar apis and any local state stored in cookies. This widget must be able to respond to api calls from other javascript on the page in order to reconfigure for particular dates and to particular sizes.
General UI flow will be specified and presentation (visual and layout) components will need to be kept separate from javascript ? in order that layout can be adjusted prior to launch. Also included in the project spec is a test web page that will contain the javascript and allow it to be called with different date parameters. ?
## Deliverables
2)Detailed Specification.
Thiswidget will display a list of appointments on a particular day andwill be update based on javascript calls from within the html page.
Thefinal output contains 4 screens of information generated fromjavascript on one actual test page.
Thestates, described in more detail below, are:
1)Unconfigured
2)Configured, with no security token
3)Configured, with security token
4)Configured, with security error
Additionally,a test page surrounding the javascript will be required.
3)Page and Widget State Descriptions
A)Test Page
Testpage will be a framework that has fields for height, width and dateand a “go?? button. User will be able to enter data into thefields and when the button is selected the widget shown within thetest page will adjust to these values.
B)Unconfigured State
Thewidget in the unconfigured state must prompt for the user nameassociated with the google calendar address. This will normally bethe email style calendar address. The widget will show:
-abrief descriptive text (“Shows a gmail calendar for the specifieduser??)
-alabel (“Calendar to Show:??)
-atext entry field
-abutton to trigger the next action (“Go??)
C)Configured No Token State
Thewidget once configured will be unable to access the calendar until itlogs in via google calendar javascript functions. Calling thisfunctions will take the user to a google page which authorizes accessto the calendar.
D)Configured with Token
Thewidget will display the list of events for the day that it was lastconfigured to display (see API below). The document structure foreach event will be organized into divs for easy graphicsmodification. Example configuration:
<divclass=entirewidget>
<!--The following div repeated for each calendar event-->
<divclass=appointmententry>
<divclass=appointmentleftcap/><divclass=appointmentcenter> starttime-stoptime Subject </div><divclass=appointmentleftcap>
</div>
</div>
Each entry must be a link that opens a new browser window to the specific appointment identified. The must also apply for all day and recurring appointments.
Additionally, a link will be provided to “reconfigure?? the widget. This linkwill put the widget back to the unconfigured state.
E)Configured with broken Token
Ifthe user has not just configured the widget (i.e. not just loaded viathe “go?? button from the unconfigured state) and yet the calendarcan not be opened because there is no valid security token ([login to view URL](SCOPE);) then an error page shall bepresented with:
-adescriptive string (“No valid login to view <calendar address>??)
-abutton to go to the configured no token state (i.e. login to google)
-abutton to reconfigure the widget this puts the widget back into theunconfigured state.
4)API requirement
Controlover the display of the widget shall be accomplished via calling ajavascript api “redisplay(parameterstring)??
parameterstringwill be in querystring format, e.g.“datetoshow=1234592234&width=480&height=120&otherparameter=ZZZ??
definedparameters are:
datetoshow??" unix timestamp of a date on the date to show. (default today)
width-width to make widget (default 480)
height- height to make widget (default 320)
Unknownparameters should be skipped. If a required parameter is notsupplied, its default should be used.
5)Resources
<[login to view URL]>
<[login to view URL]>