Drupal, PHP, Open Source and anything else I feel like sharing
Ceiling of the Pantheon

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.

  1. First, we need to override the calendar-month.tpl.php template file. So, go ahead and add that file to your theme.
  2. Next, we need to add the following code to the above template: 

    1. <div class="responsive-calendar clearfix">
    2.   <ul class="weekdays">
    3.     <?php foreach ($day_names as $cell): ?>
    4.       <li class="<?php print $cell['class']; ?>">
    5.         <?php print $cell['data']; ?>
    6.       </li>
    7.     <?php endforeach; ?>
    8.   </ul>
    9.  
    10.   <?php foreach ((array) $rows as $row): ?>
    11.     <ul class="days">
    12.       <?php foreach ($row as $cell): ?>
    13.         <li id="<?php print $cell['id']; ?>" class="<?php print $cell['class']; ?>">
    14.           <?php print $cell['data']; ?>
    15.         </li>
    16.       <?php endforeach; ?>
    17.     </ul>
    18.   <?php endforeach; ?>
    19.  
    20. </div>

  3. Next, we override our second file calendar-datebox.tpl.php and add the following code
    1. <div class="<?php print $granularity ?> <?php print $class; ?>"> <span class="weekday"><?php print date('D', strtotime($date)) ?>,</span> <span class="month"><?php print date('M', strtotime($date)) ?></span> <?php print ($selected && $granularity != 'month' ? $link : $day); ?> </div>
  4. Finally, we add the following css to make it all work:
    1. .responsive-calendar {}
    2.  
    3. .responsive-calendar ul {
    4.   list-style: none;
    5.   padding: 0;
    6.   margin: 0;
    7.   clear: both;
    8.   width: 100%;
    9. }
    10.  
    11. .responsive-calendar .weekdays li {
    12.   -webkit-box-sizing: border-box;
    13.   -moz-box-sizing: border-box;
    14.   -ms-box-sizing: border-box;
    15.   box-sizing: border-box;
    16.   width: 14.4%;
    17.   padding: 5px 0;
    18.   display: block;
    19.   float: left;
    20.   border: 1px solid #ccc;
    21.   margin-right: -1px;
    22.   margin-bottom: -1px;
    23.   overflow: visible!important;
    24.   text-align: center;
    25. }
    26.  
    27. .responsive-calendar .days li {
    28.   -webkit-box-sizing: border-box;
    29.   -moz-box-sizing: border-box;
    30.   -ms-box-sizing: border-box;
    31.   box-sizing: border-box;
    32.   width: 14.4%;
    33.   padding: 5px 0;
    34.   display: block;
    35.   float: left;
    36.   border: 1px solid #ccc;
    37.   margin-right: -1px;
    38.   margin-bottom: -1px;
    39.   overflow: visible !important;
    40.   min-height: 180px;
    41. }
    42.  
    43. .responsive-calendar .inner .day {
    44.   text-align: right;
    45.   margin:0 5px 5px 0;
    46. }
    47.  
    48. .responsive-calendar li.past {
    49.   background-color: #F5F5F5;
    50.   color: #666;
    51. }
    52.  
    53. .responsive-calendar .view-item {
    54.   display: block;
    55.   font-size: 13px;
    56.   border-radius: 4px;
    57.   padding: 5px;
    58.   margin:5px;
    59.   color: #666;
    60.   line-height: 14px;
    61.   background: #f5f5f5;
    62.   border: 1px solid #333;
    63.   text-decoration: none;
    64. }
    65.  
    66. .responsive-calendar .view-item .calendar {
    67.   width:auto;
    68. }
    69.  
    70. .responsive-calendar .inner span.month {display: none;}
    71. .responsive-calendar .inner span.weekday {display: none;}
    72.  
    73.  
    74. @media only screen and (max-width: 767px) {
    75.   .responsive-calendar .weekdays li {display: none;}
    76.  
    77.   .responsive-calendar .days li {clear: both;width: 100%;min-height: inherit;}
    78.  
    79.   .responsive-calendar .inner .month {text-align: center;font-weight: bold;  }
    80.   .responsive-calendar .inner span.month {display: inline-block;}
    81.   .responsive-calendar .inner span.weekday {display: inline-block;}
    82.   .responsive-calendar li.past,
    83.   .responsive-calendar li.empty  {display: none;}
    84. }

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:

Comments