As you should know full well by now, I’m a member of an amateur theatre group in Wimbledon, London, and I run the website. As an aid to visualising the events calendar, I’ve written a script in PHP which takes a CSV file of dated events (example), and generates a nice Gantt chart using a HTML table with ‘colspan’ attributes (scroll down). It’s a bit clunky, but it works. It shows you what’s coming up, and allows you to see how things overlap.
The CSV file containing the event information contains the following fields:
- Start Year
- Start Month
- Start Day
- End Year
- End Month
- End Day
- Event Title
- Event Location
- Event URL (optional)
The script works in the following way:
- Import CSV into an array.
- Sort by start date, ascending. This involves combining the date fields.
- Loop through, outputting a dictionary term (DT) / dictionary definition (DD) tag pair for each event: example.
- The DT contains the event start date, and the end date if different.
- The DD contains the Event Title with a hyperlink to the URL (if present), and the Event Location.
- At the same time as you loop through, find the Earliest Date and Latest Date. That is, the start date of the earliest event, and the end date of the latest event.
- Start a table in HTML.
- Make the first row a left-justified marker stating the start date.
- Make the second row a right-justified marker stating the end date.
- Loop through the event array creating a table row for each event containing the following 4 table cells.
- The first table cell just contains the event title.
- The second table cell has a ‘colspan’ attribute equal to the number of days between the Earliest Date and the first day of the current event. N.B. for the earliest event, this will be 0. This cell should be empty.
- The third table cell has a ‘colspan’ attribute equal to the number of days in the event. This would be Event Start Date minus Event End Date plus 1, so that single-day (or ‘zero-length’) events show up as one day long. This cell should contain a non-breaking space.
- The fourth table cell has a ‘colspan’ attribute equal to the number of days between the Latest Date and the last day of the current event. N.B. for the latest event, this will be 0. This cell should be empty.
- Ensure that all your HTML tags are assigned useful CSS style classes, so you can style the whole table later.
- And that’s yer lot.
The advantages of the script are that it is simple (ha), and the HTML can then be copied and pasted elsewhere. For example, The calendar is generated on this page, and then I copy and paste to the newsletter I also write. Good eh? Also, the CSV can be easily edited online by using WEB2FTP or it’s German sister site WWW2FTP.DE, which isn’t blocked by WebSense! 😉
- Dates attached to the events in the Gantt chart?
- A date scale along the top?
- Some tweaking required at the end and start dates.