Change the calendar view based on responsive design

Our new website is using responsive design to accommodate the 80% of our visitors coming from mobile devices.

With that being said, I’ve gotten almost everything setup the way I want it to look on different screen sizes except for the calendar.

Is there any way that I can change the default view of the calendar from (month/week/day) by using javascript to watch the size of the screen???

Hi Matt,

Try adding this code to your calendar page’s “Code insert before body close” meta-data insertion point:

jQuery('.perc-full-calendar').fullCalendar('changeView', 'agendaWeek','gotoDate', startDate); <br /> } <br /> else { <br />
jQuery('.perc-full-calendar').fullCalendar('changeView', 'month','gotoDate', startDate); <br /> } <br /> </script>```   
 
This should all be pretty self explanatory. If the user’s window width is less than 640 pixels when the page first loads, the calendar will default to the week view, otherwise you’ll see the usual default month view. These views, “agendaWeek” and “month” can be swapped for any of the FullCalendar jQuery plugin’s default views:   
 
[http://arshaw.com/fullcalendar/docs/v...](http://arshaw.com/fullcalendar/docs/views/Available_Views/)   
 
So long as we don’t change the class name of the Div which contains the calendar’s contents (“perc-full-calendar”) in a future release -- which I don’t see why we would -- you shouldn't have much trouble with this approach.

Okay, so I got the code that you supplied to work and thanks for that. I really appreciate it.

I’m trying to figure out how I can turn certain items of the calendar off when it goes to a mobile device. I’m trying to turn different parts of the table above the calendar off (example: day, week, month buttons). I tried the code below but it did not work.

$(window).resize(function(){   
if($(window).width() \<= 600) {   
$('.perc-full-calendar').fullCalendar('changeView', 'agendaDay','gotoDate', startDate);   
$('.fc-header-right').style('display', 'none', 'important');   
} else if($(window).width() \< 748 ) {   
$('.perc-full-calendar').fullCalendar('changeView', 'agendaDay','gotoDate', startDate);   
} else {   
$('.perc-full-calendar').fullCalendar('changeView', 'month','gotoDate', startDate);   
}   
});   

Hey Matt,

Would it be easier to simply hide those controls using your responsive CSS file? For example, a rule set such as this would hide the “Month / Week / Day” controls:

display: none;   
} ```

Is there a way to make the times on the calendar view to not show?

Are you looking to hide the time of your events? If so, this topic outlines some options:

Let me know if this isn’t what you’re looking for.