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