垂直网格线为 fullcalendar

Question

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

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

Answer 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.

Answer 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;
}