Change label size

Event calendars & schedulers
1

Hey.

Is it possible to change the label height in the calendar view? I was trying to achieve it by providing a custom component via renderLabel function, but it does not affect the height. Is there any way to change the height? I want it to have a fixed height of 24px.

Screenshot for reference attached.

image
image936×464 32.3 KB

2

Hi @Dimi :wave:

To set the height of the labels, you need to use custom CSS coding, and you need to set the calendar height as well with the height option. If you want to set how many labels will be displayed in a cell, use the labels property inside the view option. For example:

.mbsc-calendar-labels .mbsc-ios.mbsc-calendar-text.mbsc-calendar-label {
    height: 24px;
}

<Eventcalendar
    ...
    view={{calendar: { labels: 3 }}}
    height={800}
/>
3

Hey @Elod, thanks for your reply.
I will give it a try, although numeric labels is not supported in the 5.13.5 version :thinking:

image
image1208×272 31.5 KB

Is it possible to increase the cell height for the schedule view? I want to make 15 min events contain more useful data.

4

Hello @Dimi,

In order to update the Mobiscroll version, you need to use the following command:
$ npm update @mobiscroll/react

Regarding your scheduler question, you can use the timeCellStep and timeLabelStep properties (you can find them inside the view option schedule section). Also, here you can find a demo example, where you can see how these properties work: https://demo.mobiscroll.com/react/scheduler/show-hide-hours-days#