'Vertical grid lines for fullcalendar

I'm using fullcalendar.io I wonder, how can I make it show the vertical grid, table lines?

enter image description here

I added a css style so now its horizontal lines are visible. How to do the same thing for the vertical ones?

Solution 1:^[1]

Make a css class something like:

.fc .fc-agendaWeek-view .fc-bg tr > td{
    border: 2px solid grey;
}

The vertical lines are in the .fc-bg (background) table of the fullcalendar.

Solution 2:^[2]

You're likely using another library that's overriding your table styles or you just have other css in general that's overriding the styles of the table.

Currently in fullcalendar v5, the styles that control this are:

.fc-theme-standard td, .fc-theme-standard th {
  border: 1px solid #ddd;
  border: 1px solid var(--fc-border-color, #ddd);
}

If those styles are present, then your issue lies with other css.

For example, in my app, the following css removed the background colors and the lines:

thead, tbody, tfoot {
  border: 1px solid #f1f1f1;
  background-color: #fefefe;
}

And I added the following to fix fullcalendars styling and get my column borders back:

.fc thead, .fc tbody, .fc tfoot {
  border: inherit;
  background-color: inherit;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	DanielST
Solution 2	akaspick

'Vertical grid lines for fullcalendar

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]