The labels has overflowed the cell when I changed the label height

Event calendars & schedulers
1

Hi, I want to change the label height in the calendar view.

I saw the following topic,
https://forum2.mobiscroll.com/t/change-label-size/1137
and I could change the label height, but the labels has overflowed the cell.

This is a sample of my labelContentTemplate,

<mbsc-eventcalendar
  [options]="options"
  [data]="events"
  [labelContentTemplate]="customLabelTemplate"
>
  <ng-template #customLabelTemplate let-data>
    <div>{{ data.title }}</div>
    <div>{{ data.start }}</div>
  </ng-template>
</mbsc-eventcalendar>

and css.

.mbsc-calendar-cell-inner
  .mbsc-calendar-labels
  .mbsc-calendar-text.mbsc-calendar-label {
  height: 3.6em;
}

I set the labels property to ‘all’, and here is the result.

3

The label has overflowed the cell.

When I change the height of the labels with CSS, can I change the height of the cells so that all the labels fit?

Thank you.

2

Hi @Kimiko

Thanks for the question. In the case of custom templates your css rule should target the .mbsc-calendar-text class, because the eventcalendar will get the height of the events from that element. It might happen, that the element has no other classes at all. So for example:

<mbsc-eventcalendar class="my-event-cal" ...

And then in your global styles:

.my-event-cal.mbsc-ios .mbsc-calendar-text {
  height: 3.6em;
}
1 Like
3

Thank you. I could change the cell height.

HTML

<mbsc-eventcalendar
  [options]="options"
  [data]="events"
  [labelContentTemplate]="customLabelTemplate"
  class="my-event-cal"
>
  <ng-template #customLabelTemplate let-data>
    <div>{{ data.start }}</div>
    <div>{{ data.end }}</div>
  </ng-template>
</mbsc-eventcalendar>

css

.my-event-cal
  .mbsc-calendar-cell-inner
  .mbsc-calendar-labels
  .mbsc-calendar-text {
  height: 3.6em;
}

1

By the way, I challenged to changing the label height dynamically.

<mbsc-eventcalendar
  [options]="options"
  [data]="events"
  [labelContentTemplate]="customLabelTemplate"
  [class]="calendarClass"
>
  <ng-template #customLabelTemplate let-data>
    <div>{{ data.start }}</div>
    <div>{{ data.end }}</div>
  </ng-template>
</mbsc-eventcalendar>

I wanted to change the label height only when calendarClass = "my-event-cal", but this was not working.

It seems that the label height must be fixed when the calendar renders, is it right?

4

Hi @Kimiko,

I’m just jumping in to help you with your question! :wave:

Yes, you are right. The label height should be fixed when the calendar renders, because the calendar uses the label height for internal layout calculations like how many visible label rows will be present.

1 Like
5

Hi @Kimiko :wave:

I have some great news for you! We have just shipped Mobiscroll 5.30 which introduces the long-awaited feature for displaying events with variable heights on the Timeline.
​
This is useful when the content of the events varies, for example, rendering lists with various lengths or supporting multiple event types with different content templates. If you want to keep all content visible, regardless of the event length (width), the height will dynamically change when resized and not truncate depending on the available space.

We launched it as an experimental feature and can be enabled by setting the eventHeight: 'variable' property for the timeline inside the view option. It is experimental since the underlying rendering logic changed a bit, so we are looking for feedback.

You can learn more about variable event heights and see some demos as well: