Search code examples
javascriptcssfullcalendarfullcalendar-3

FullCalendar agendaWeek/agendaDay view, width of time row

I have a probleme of the setting of my calendar now. I want to make first row which is the time in AgendaWeek view and AgendaDay view a little wider, but i can't find the corresponding css code in fullcalendar.css. Can someone help me?enter image description here

Solution

  • By inspecting the source of a calendar of mine I can see the following code for each time displayed in the left-hand column:

    <td class="fc-axis fc-time fc-widget-content" style="width: 55px;">
  <span>12:35am</span>
</td>

    The width appears to be set inline. Presumably this is done via some code in fullCalendar.

    You can override it in CSS, but you also need to shift all the other <td>s in the column as well, not of all which have the same combination of classes.

    Fortunately, they do all have the same root class - .fc-axis. Therefore, if you add this to the end of your CSS, it should adjust the width for you quite happily.

    .fc-axis { width: 100px !important;}

    Having said that, beware of fixed widths and how fullCalendar will react if you resize it, or resize the browser window, depending whether you've given your calendar a fixed width/height, or messed with the aspectRatio settings.