2

I am wondering how I can change height of time slots in Fullcalendar V5?

John S
  • 21
  • 1
  • 3
  • https://fullcalendar.io/docs/sizing is probably a good place to start looking. If those settings can't fulfill your requirements then have a look at https://fullcalendar.io/docs/css-customization . What have you researched or tried so far before asking? – ADyson Jul 14 '20 at 06:22
  • @ADyson If you have read through the material you provided you will find out there's nothing can help on this subject. Update the height of timeslot by CSS won't work because the events height won't updated accordingly since hight of events are calculated based on original time slot height. – Egist Li Oct 02 '20 at 02:25
  • Surely you could just increase them both using CSS by the same %? – ADyson Oct 02 '20 at 08:10
  • 1
    P.S. the point of the https://fullcalendar.io/docs/sizing link was to say if you just want to change the shape/size of the whole calendar, this can coincidentally change the slot sizes. It depends what overall effect you're going for. – ADyson Oct 02 '20 at 08:12

2 Answers2

1

use css

.fc-timegrid-slot {
    height: 30px !important
}

replace 30px with the size you want

Mohammad Reza
  • 693
  • 9
  • 16
0

In Fullcalendar v5.0, in timeline view, you need to override this two CSS classes:

.fc-datagrid-cell-frame {height: 35px !important}
.fc-timeline-lane-frame {height: 35px !important}

The first one is for the resource column, the second one is for the events grid.

To fix the height header of the resource column you also need to override this classes (where #calendar is the id of your calendar):

#calendar > div.fc-view-harness.fc-view-harness-active > div > table > thead > tr > td:nth-child(1) > div > div > table > tbody > tr > th:nth-child(1) > div {height: 55px !important}
#calendar > div.fc-view-harness.fc-view-harness-active > div > table > thead > tr > td:nth-child(1) > div > div > table > tbody > tr > th:nth-child(2) > div {height: 55px !important}
Channel
  • 2,183
  • 21
  • 16