Getting Started with Timegrid

From SIMILE Widgets
Revision as of 00:53, 22 October 2009 by Toaster (Talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Contents

Creating Data

Timegrid is a tool for visualizing event data, so the first step in creating a Timegrid is creating a file containing event data in a format that Timegrid can understand. Luckily, if you have any event source files for Timeline, Timegrid by default uses both Timeline's XML and JSON formats.

XML

Here is an example of a Timegrid XML event source file: <source lang="xml" lines=0> <data dateTimeFormat="iso8601">

 <event 
   start="2007-08-29" 
   end="2007-08-30" 
   title="Event #1 Title">
   This event is a simple multi-day event.
 </event>
 <event
   start="2007-09-01T09:00" 
   end="2007-09-01T13:00" 
   title="Event #2 Title">
   This event starts at 9am and ends at 1pm, local time.
 </event>
 <event
   start="2007-09-02T10:00-05:00" 
   end="2007-09-02T12:00-05:00" 
   title="Event #3 Title">
   This event has timezone information provided with the times.
 </event>

</data> </source>

JSON

Here is an example of a Timegrid JSON event source file: <source lang="javascript" lines=0> {

 dateTimeFormat: 'iso8601',
 events: [
   {
     start:       '2007-08-29',
     end:         '2007-08-30',
     title:       'Event #1 Title',
     description: 'This event is a simple multi-day event.'
   },
   {
     start:       '2007-09-01T09:00',
     end:         '2007-09-01T13:00',
     title:       'Event #2 Title',
     description: 'This event starts at 9am and ends at 1pm, local time.'
   },
   {
     start:       '2007-09-02T10:00-05:00',
     end:         '2007-09-02T12:00-05:00',
     title:       'Event #3 Title',
     description: 'This event has timezone information provided with the times.'
   }
 ]

} </source>

Adding a Timegrid

Timegrid is an entirely client-side application and requires no special configuration (unlike CGI-based applications), and can even be run from your local file system. In addition to the data file that we just wrote, you'll need an HTML page for the Timegrid to display in. You can either create a new page, or simply use an existing page.

You need 2 things to add a timegrid into your page:

  • the timegrid-api.js in the head, and
  • a div element in the body annotated with timegrid attributes.
 <html>
 
 <head>
   
   <script
     type="text/javascript" 
     src="http://static.simile.mit.edu/timegrid/api-1.0/timegrid-api.js">
   </script>
 
 </head>
 
 <body>
   
   <div tg:role="grid" tg:views="week,month" tg:src="data.xml"></div>
   
 </body>
 
 </html>
Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox