Custom formatting of date and time for events in in Squarespace blocks

January 14th, 2014  |  Published in Work

I’ve recently done a little bit of front-end development work on a Squarespace website.  This is my first experience with the platform, and it’s been generally positive.  It starts out with a sane content model and makes all the content available as JSON.

The system provides a number of predefined blocks that let you expose content from  collections on other pages in the site.  Unfortunately, as of January 2014, you can’t customize the markup of items in a block.

This was a problem for us because the default summary block for event content only showed the event date and we wanted to also show the start time.  Luckily, the JSON feed of the events collection provided timestamps for the start and end date/time.

I wrote Squarespace Event List, a YUI3 plugin that fetches the event collection JSON with AJAX and overwrites a block’s content with a custom-formatted event list.  You can find the JavaScript and some brief documentation on GitHub.