I need the calendar to be flexible and responsive. It need to work for all thinkable screen sizes. Today it looks really odd as the buttons are floating over the year and if some dates are inside the calendar it may overflows the screen size and other stuff. This has major usability issues, see below:

I'm myself currently not sure how to solve this with day thead's, but maybe some brainstorming can help finding the way to go.

Files: 

Comments

I have some responsive css that I haven't had time to finish up.

The idea I started working with was adding the following css, which should make the calendar collapse down into a list in a small window:

@media all and (max-width: 959px) {
  .calendar-calendar .month-view table.full {
    position: relative;
  }
  .calendar-calendar .month-view .full tr td {
    width: 100%;
    float: left;
    text-align: left;
  }
  .calendar-calendar .month-view .full tr td.single-day:before {
    content: attr(data-day-of-month);
    font-weight: bold;
  }
  .calendar-calendar .month-view .full thead tr,
  .calendar-calendar .month-view .full tr th.days,
  .calendar-calendar .month-view .full tr td.date-box,
  .calendar-calendar .month-view .full tr td.no-entry,
  .calendar-calendar .month-view .full tr td.empty {
    display: none;
  }
}

I haven't had time to get back to this idea.

Forgive me as this may be obvious, but is this something that should exist within the module itself or at the theme level?

Well... That's not so easy to answer. On one side it's theme level, but on the other side if the module code does not work it can be overridden. We are on the way to make all core themes responsible with D8. Therefore i think it should be part of module code. The yaml theme as example is flexible and responsive for very many years, but today it becomes more and more standard. The max-width may be discussable...

I hope i can try karens example code by the end of this week.

#1 looks very useful to me. I wondered first why you remove all empty days, but that's perfect on mobiles with limited display space. I hope to find some time soon to solve the button and year display issues. I just think the (max-width: 959px) may be too large value, but it works nevertheless.

Thank you very much for sharing this!

I'm sharing my latest version now. It aligns the centered month name to the left and also adds the full day name to the column. It only becomes a problem after the CSS is compressed as the CSS compressor in core has a followup bug #1686178: CSS compressor destroys valid css "content" attribute values here as it removes the space in ", ". I've added a Unicode workaround below.

@media screen and ( max-width: 740px ) {
  .view .date-nav-wrapper .date-heading {
    text-align: left;
  }
  .calendar-calendar .month-view table.full {
    position: relative;
  }
  .calendar-calendar .month-view .full tr td {
    width: 100%;
    float: left;
    text-align: left;
  }
  .calendar-calendar tbody tr:hover td {
    background: none;
  }
  .calendar-calendar .month-view .full tr.single-day {
    border-top: 1px solid #ccc;
  }
  .calendar-calendar .month-view .full tr td.single-day:before {
    content: attr(data-day-of-month) ",\0000a0" attr(headers);
    font-weight: bold;
  }
  .calendar-calendar .month-view .full thead tr,
  .calendar-calendar .month-view .full tr th.days,
  .calendar-calendar .month-view .full tr td.date-box,
  .calendar-calendar .month-view .full tr td.no-entry,
  .calendar-calendar .month-view .full tr td.empty {
    display: none;
  }
}

Thanks for sharing!
Works great, but if there are multi-day events in your calendar, the day (start date) is not displayed.
I'm trying to figure out how to solve that.

One possible solution is to set the "Multi-day style" option in the calendar settings to "Display multi-day item as a single column".
Contra:
1. Obviously, you can't display them as a multiple column row.
2. When the calendar is displayed as a list, there are three lines for a three day event, like:

  • 27. Thursday
  • 3 Day Event
  • 28. Thursday
  • 3 Day Event
  • 29. Thursday
  • 3 Day Event

It would be better if you had just one line, like:

  • 27.-29
  • 3 Day Event

But that's no CSS problem.

Bump!
Any further developments regarding the responsive design?

:-)

I've been neck deep in calendar code lately and was wondering the same about responsive design. I think a big problem with RD and calendar is the fact that calendar depends on tables. Tables are hard to bend into new shapes with CSS. I think you'd need to use a new type of div-based style plugin so you could really play with the appearance.

I recently built a table-like div view that collapses on mobile devices:
http://www.kenyaschoolreport.com/schools/find-school/results?s=location&...

I think you'd need something similar for calendar. It's a standard table-like grid in large windows, but it collapses to a list format on small devices.

I will probably start working on this in the near future as I need a responsive calendar. I've been talking to myself on this issue #1908018: Break up large functions of calendar_plugin_style into smaller functions for a while, which could be a first step in breaking down the calendar plugin to something that could be extended into new style plugins.

Here's a great example of a responsive calendar:

http://www.atlantaballet.com/calendar/

Albeit a really different approach in its markup.

Also, an example using Drupal Calendar can be found here:

http://www.stlouissabres.com/calendar/month/2012-10

Referenced from: http://groups.drupal.org/node/266223

thanks stephen good stuff. do you know if atlanta ballet is using some kind of open source plugin?

I'm really not sure. Also, i was trying to discover who developed the site, but with no luck.

I can only share what i see in the source:

http://www.atlantaballet.com/css/responsive-tables.css
http://www.atlantaballet.com/css/jqtransform.css
http://www.atlantaballet.com/css/flexslider.css

So the responsive-table stuff comes from Foundation. I don't know, maybe that's a starting point?

Regarding the Atlanta Ballet calendar, the creator (Search Discovery) posted about it here:
http://www.searchdiscovery.com/blog/tutorial-creating-a-responsive-calendar

Cheers Geijutsuka! Thanks for sharing that link!

Thanks too.
It got me interested.

Integrating the calendar with Calendario from Tympanus would give a great flexible solution ... I guess that would need to be made as a new module or a addon for this module... or at least it could be a good starting point for someone who wants to get a nice flexible/responsive calendar

http://tympanus.net/codrops/2012/11/27/calendario-a-flexible-calendar-pl...

StatusFileSize
new36.88 KB

The last posted code is awesome! However, using the code with or without the unicode hack both produced the same gray comma. My CSS files are not compressed via config > performance FYI.

How do I use this code in order to make the calendar responsive? I have copied it and pasted at the end of "calendar.css" but it didn't work.

Bethel Church in Redding, CA recently launched a new, Drupal-based site, including a responsive, very attractive calendar, which can be viewed here:

http://www.bethelredding.com/calendar

The theme is based on Zen. You can read a little more about it here:

https://groups.drupal.org/node/299938

The author, toddtomlinson, plans to release his solution as a contrib module.

FYI... there is a drop-in (sandbox) module that alters the output of calendar so that it can be responsive without css hacking an html table.

https://drupal.org/node/2098587
https://drupal.org/sandbox/iconify/2087897

Calendar Plus is a companion module for Calendar. Calendar Plus runs invisibly along-side of Calendar and converts the output to responsive HTML/CSS. The module is completely self-contained so there are no files to place in your theme directory (except to style the calendar like your site theme). Additionally, Calendar Plus doesn't interfere with the normal operation of Calendar. You still manage your calendars and events using the Calendar admin tool.

The module uses an unordered list to render the month views rather than tables. When displaying on a full-sized screen, the calendar will look almost identical to the table-based display except that multi-day events won't span multiple calendar days. When viewing a month-view calendar on a tablet or smart phone, the days are displayed as a list.

Can you create a patch for calendar module, please. Do not like to install extra modules.

@hass... it's not my sandbox module. It would make sense to merge it into Calendar. Reach out to the two module maintainers and see what they say.

@hass I do not come across the compression issue on my site. I am running with jquery update jquery version 1.7.1. All js and css files have been aggregated.

@caschbre - thanks for the post. The module does only display the start date though not end date which is a bit of an issue but there's a work around and discussion on this in the 1 open issue.

Issue summary:View changes

Hi @hass

Where can I add the code to make my calendar responsive?

Thanks caschbre.