Timegrid is a completely client-side Javascript framework that takes event data in some format (iCal, XML, etc.) and renders it out to a number of different, configurable, dynamic views. What kind of views will Timegrid support? For starters, it will support all of the views that Google Calendar is currently capable of: weekly, monthly, etc. Timegrid is more flexible than Google Calendar though. Imagine that you want to render a table of events happening in various locations, and you want each column to represent a different room, and each row to represent a starting time. Timegrid will be able to handle that as well.

Note: Timegrid is a very young project, and is under heavy development. It has not even been released as an alpha version, and so we are not supporting it right now. Please don't use it yet.


Ease of Configuration

Timegrid needs to be, above all, easy to configure. A person, with only experience with HTML, should be able to use Timegrid to create useful and beautiful presentations of temporal data. Configuration should be done through either very obvious Javascript directives, or preferably through DOM elements.


Timegrid was originally conceived as a flexible way to visualize event data; so why should we limit ourselves to the standard weekly, monthly, etc. views that have become so ubiquitous? Timegrid was designed with more exotic configurations in mind. Imagine these possible use cases:

  • For the upcoming Convention for Exquisitely Shiny Objects, you want to post a schedule of events taking place in multiple rooms at various times. You don't want to hand-code the HTML, since there are a lot of events and changing anything would be tedious and error-prone. Instead, you use Timegrid to render out the events as a table with rooms along one axis, and starting times along the other.
  • Perhaps you want to create a table displaying lectures, with their respective professors, locations, starting times, and durations. Timegrid can take your data and construct a table with location along one axis, professor along the other, starting time printed within each cell, and then color each cell according to the duration of the event.

Look and Feel

When released to the public, Timegrid needs to be as pretty, polished, easy to use, and Web 2.0-looking as possible. People have gotten used to glossy, incredibly dynamic interfaces, and we should not disappoint them.


Here I will keep a list of implemented and planned features in Timegrid.

Milestone 1 (Garelick)

  • Separate the events into different weeks rather than projecting them all onto one single week.
  • Render events that span multiple cells properly.
  • Render concurrent events properly.
  • Support a mode in which the height of the grid is fixed and it has its own scrollbar.
  • Implement completely DOM-based creation and configuration

Milestone 2 (Icarus)

  • Display labels for columns and rows (hours, days, etc.)
  • Add controls for navigating to next/previous day/week/month/year.
  • Add controls for switching between views.

Milestone 3 (Mercury)

  1. Make a web site for Timegrid with 5 live examples, including
    • a 3-month academic term calendar
    • a 3-day conference calendar
  2. Build new layouts where necessary
    • n-day layout
    • n-month layout
  3. Fine-tune the look and feel.
    • Watermark indicating month or year
    • Round corners and drop shadows for events
    • Make sure column and row labels are informative

Milestone 4 (Subito)

  1. Make sure timezones work.
  2. Localize Timegrid, including text and date display/parsing.
  3. Support color-coding of events.
  4. Color-coding "today" and "this hour" (good during a conference).

Milestone 4.5 (Peregrine) : 2 days

  1. Support recurrent events.
  2. Make sure if there are several concurrent events the layout still works well.

Milestone 5 (Apollo) : 5 days

  1. Write some basic documentation and tutorials.
  2. Support viewing Google Calendar XML feeds with Timegrid (convert one example to use gCal)
  3. Allow Timegrid to source iCal files (convert one example to use iCal)


  • Add more examples.
  • hCalendar support
  • Editing support, into a copy/paste iCal
  • Drag to select, columns and rows, boxes even?



There are many channels for getting in touch with us and with other people who are interested in Timegrid:

  • Send questions/comments/ideas/discussions/etc. to our mailing list (archive/sign-up)
  • Send an e-mail to Mason Tang, masont at mit dot edu.