Angular - css resize column

Event calendars & schedulers
1

Hi

What is the proper way to override default css for timeline with ‘week’ resolution?
We want to reduce week column width (make it narrower).
Setting class like below in Angular component does not seem to have any effect:

.mbsc-material.mbsc-timeline-column , 
.mbsc-timeline-header-column,
.mbsc-timeline-day {
    width: 3em;
}

Any recommendation how to make it clean way via component css?

I refer to a view evample we want to modify:

mbscr-header
mbscr-header745×244 29.2 KB

timeline: { 
      type: 'month'
      size: 3,
      resolutionHorizontal: 'week',
      eventList: true,
}
2

Hi @Agnieszka_Baranowska :wave:

Please check the relevant part in the docs.

3

Hi
Thank you for your reply!

Forgive me simple question but the docs say:

image
image1940×178 16.2 KB

How in practice can I apply my custom css after default rules in Angular component?
Putting it in component css has no effect unfortunately…

Thanks, Agnieszka

4

Hi,
Try to set the encapsulation to None at your component level:

@Component({
  selector: 'my-selector',
  styleUrl: './my-component.css',
  encapsulation: ViewEncapsulation.None,
  templateUrl: './my-component.html',
})