Making the Calendar Widget Responsive

Thu Apr 5, 2018

Love the calendar widget, but want to know how to make it responsive?

There really isn't much that you need to do. The first thing that you need to do is make sure that the region that the calendar widget is in is at least responsive on a mobile device - otherwise, no content would ever be responsive.

The second piece is that you need to add one extra chunk of CSS to your CSS file. I have pasted this code below for you to use in your own CSS file. My code below has the controls at the top of the calendar only becoming responsive at 600px screen size or smaller as I think the controls fit well when the screen size is larger than that.

/* styling the controls at the top of the calendar */
@media screen and (max-width: 600px) {
.fc-header td {
white-space: nowrap;
display: block;
width: 100%;
text-align: center;


**Keep in mind that this may not work for your specific website implementation. There could be other pieces of your CSS that would keep the calendar widget from being responsive. So, if adding the above code doesn't work right away for you, start by making sure that everything else on your page doesn't have a fixed width to begin with.

Casey Aiello
Casey Aiello
Professional Services Manager | Web Consultant/Designer | Percussion Software

Along with being a Consultant, Casey is also the Professional Services Team Lead at Percussion and our in-house designer. She has a strong background in responsive web design and development. Casey knew that she wanted to work in the tech field ever since she was in elementary school. That strong passion led her to be a volunteer and strong advocate of various organizations that work to get more young women involved and excited about science and technology careers. In her free time, Casey enjoys spending time relaxing with family and friends.