Responsive Drupal Calendar

Drupal's calendar module is a great tool for building calendars quickly with views. However, the default theme is still using tables, blech! After some searching, I came across a sandbox module to fix this, https://drupal.org/node/1675894#comment-7903527. Like some of the user's in that thread, I did not want to add another module to my site. So, I set off to theme the calendar in a responsive way. Surprisingly, this was much easier than I anticipated. You only need to override two theme files and add roughly 88 lines of css.

How to make Drupal's calendar responsive.

First, we need to override the calendar-month.tpl.php template file. So, go ahead and add that file to your theme.
Next, we need to add the following code to the above template: foreach ($day_names as $cell): print $cell['class'];">
```
 print $cell['data']; 
```

 endforeach;

 foreach ((array) $rows as $row):

 foreach ($row as $cell):

print $cell['id']; " class="

 print $cell['class'];

">

 print $cell['data'];

 endforeach;

 endforeach;

Next, we override our second file calendar-datebox.tpl.php and add the following code


 print $granularity

 print $class;

">

 print date('D', strtotime($date))

,

 print date('M', strtotime($date))

 print ($selected && $granularity != 'month' ? $link : $day);

Finally, we add the following css to make it all work: .responsive-calendar {} .responsive-calendar ul { list-style: none; padding: 0; margin: 0; clear: both; width: 100%; } .responsive-calendar .weekdays li { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; width: 14.4%; padding: 5px 0; display: block; float: left; border: 1px solid #ccc; margin-right: -1px; margin-bottom: -1px; overflow: visible!important; text-align: center; } .responsive-calendar .days li { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; width: 14.4%; padding: 5px 0; display: block; float: left; border: 1px solid #ccc; margin-right: -1px; margin-bottom: -1px; overflow: visible !important; min-height: 180px; } .responsive-calendar .inner .day { text-align: right; margin:0 5px 5px 0; } .responsive-calendar li.past { background-color: #F5F5F5; color: #666; } .responsive-calendar .view-item { display: block; font-size: 13px; border-radius: 4px; padding: 5px; margin:5px; color: #666; line-height: 14px; background: #f5f5f5; border: 1px solid #333; text-decoration: none; } .responsive-calendar .view-item .calendar { width:auto; } .responsive-calendar .inner span.month {display: none;} .responsive-calendar .inner span.weekday {display: none;} @media only screen and (max-width: 767px) { .responsive-calendar .weekdays li {display: none;} .responsive-calendar .days li {clear: both;width: 100%;min-height: inherit;} .responsive-calendar .inner .month {text-align: center;font-weight: bold; } .responsive-calendar .inner span.month {display: inline-block;} .responsive-calendar .inner span.weekday {display: inline-block;} .responsive-calendar li.past, .responsive-calendar li.empty {display: none;} }

Examples of the Responsive Drupal Calendar

Example #1 in a large browser window:

Example #2 in a small browser window:

There you have it, a responsive calendar using Drupal's calendar module. Thanks goes to the following for inspiration:

How to make Drupal's calendar responsive.

Examples of the Responsive Drupal Calendar

Tags