I've created a few mockups for responsive calendar designs. I'm not sure if it matches all the current features of the Calendar module, but it's a start. It would require some new logic too to organize dates. I'm thinking a way for multi-day events to be spread as compact as possible. Due to the responsive nature of the designs some have limitations, like fixed event height in all-day events and the monthly events on desktop.

The mockups include BEM style classes, no tables, no javascript (though it's possible to add some), and some use of CSS flexbox and calc().

I did take inspiration from the OSX El Capitan Calendar app, though generally I just aimed for a solution that was as minimalistic as possible. I don't what the legal implications would be in light of adding this to an open source project.

I added breakpoints in places that made the most sense, though it may not work as well if they're rendered with a sidebar or something. To customize, you'd almost need to exclude the CSS file, and copy it into your theme.

Year: http://www.sassmeister.com/gist/357441be9d409d4dbe909635bca0ef2b
Calendar mini: http://www.sassmeister.com/gist/8a346729f6db4fb765fe1788073db83a
Month: http://www.sassmeister.com/gist/0a088b3df0f3022dfbf2795e9f67784a
Week: http://www.sassmeister.com/gist/20fbc774fb6f8ffbc06a3b09f7799d57
Day: http://www.sassmeister.com/gist/3dd62cd7a1fbcb8ab8aa4d248e1e6b82

(You may need to check View > HTML to see the rendered result)

Any feedback or suggestions are welcome.

Comments

Danny_Joris created an issue. See original summary.

Danny_Joris’s picture

Issue summary: View changes
Danny_Joris’s picture

Issue summary: View changes
KarenS’s picture

For point of reference, here is some work to make calendar markup responsive in D7: https://www.drupal.org/node/1675894.

Neslee Canil Pinto’s picture

Status: Active » Closed (outdated)