Designing a Calendar For Every Width

Implementation of a custom calendar solution that can be reached and understood no matter the screen size.


  • Health Services Advisory Group


The most complicated modeling exercise of any website comes when it’s time to design and implement the calendar. How do we handle days versus weeks? Do we show it in a grid or as a list? Do we handle multi-day events any differently than single-day events, and what comes first — something with a time or something that’s all day long?

We worked with the Health Services Advisory Group to develop a custom solution for their calendar, from responsive and adaptive design that automatically changed the shape and layout of the calendar as screen width adjusted, to how events were handled within the CMS. The result was a usable calendar that provided information no matter the width of the viewport.

Related Stories