In this video, I will show you how to make the month display responsive. We'll do this with a CSS media query, and a minor adjustment to our calendar view.

Before we start, I want to be clear that it's not a good idea to make changes to core or contributed themes directly. You should either create a sub-theme or a completely custom theme. This is because any changes you make to the theme will be overwritten when you update that theme. With that said, since the site I've built during this series won't ever be live or updated, I'm just going to use the Seven theme because it's fluid, and will work to get the point across.

The first thing I'll do is set the Seven theme as the default theme.

  • Go to "Appearance" (admin/appearance)
  • Click "Set default" next to the "Seven" theme

Now, I'll edit the CSS of my theme.

  • Go to the CSS directory for your theme
  • Open the "style.css" file in the editor of your choice
  • Add the following css to the end of the file
/* Make the Month view responsive */
 
@media screen and ( max-width: 760px ) {
.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: center;
}
.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(headers) ",\0000a0" attr(data-day-of-month);
font-weight: bold;
text-align: center;
}
.calendar-calendar .month-view .full tr td.no-entry,
.calendar-calendar .month-view .full tr td.empty {
content: attr(headers) ",\0000a0" attr(data-day-of-month);
font-weight: bold;
text-align: center;
}
 
.calendar-calendar .month-view .full tr th.days,
.calendar-calendar .month-view .full tr td.date-box,
.calendar-calendar .month-view .full thead tr{
display:none;
}
 
.calendar-calendar .month-view .full td.single-day div.monthview,
{
background: none repeat scroll 0 0 #fff;
overflow: hidden;
padding: 0;
width: 100%;
text-align: center;
 
}
.calendar-calendar .month-view .full tr td.single-day.today {
border: 2px solid #7C7F12;
}
 
 
.calendar-calendar .month-view .full td.single-day .inner div,
.calendar-calendar .month-view .full td.single-day .inner div a,
.calendar-calendar .month-view .full td.multi-day .inner div,
.calendar-calendar .month-view .full td.multi-day .inner div a,
.calendar-calendar .month-view .full td .inner div.calendar.monthview div,
.calendar-calendar .month-view .full td .inner div.calendar.monthview div a {
display: inline;
background: #B5DBDC;
padding: 2px;
}
}
  • Save the file

Right now, if we take a look at the calendar, and scale it down, you can see the basic changes take effect, but multi-day events break the layout. We need to make one adjustment to our format settings to fix this.

  • Go to "Structure => Views => Calendar" (admin/structure/views/view/calendar/edit)

Format

  • Format
  • Click "Settings"
  • Multi-day style: Choose "Display multi-day item as single column"
  • (Apply(this display))
  • (Save) (Save the view)

Now, when we take a look at the calendar, multi-day events are simply listed on each day that they take place. Note that this affects the "regular" display as well as the "small" display.