Getting Started with Timegrid

From SIMILE Widgets

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: 

<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>

JSON

Here is an example of a Timegrid JSON event source file: 

{
  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.'
    }
  ]
}

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>
Retrieved from "http://www.simile-widgets.org/wiki/Getting_Started_with_Timegrid"
Personal tools
TOOLBOX
LANGUAGES