0

I'm using Angular Calendar and displaying Calendar events , for the week view I want to change the events width dynamically depending on variable in ts component , but I failed to achieve this .

this the code for the week view

  <mwl-calendar-week-view
    *ngSwitchCase="CalendarView.Week"
    [viewDate]="viewDate"
    [events]="events"
    [locale]="locale"
    [refresh]="refresh"
    (eventClicked)="handleEvent('Clicked', $event.event)"
    (eventTimesChanged)="eventTimesChanged($event)">
  </mwl-calendar-week-view>

I tried adding some style proprety to the calendar week element like [style.width.%]="value" or [style.width.px]="value" but the event width remains fix .

What I want to achieve exactly is the same with this stackblitz project in line 169 :https://stackblitz.com/edit/angular-ukwpj8-xjmtxl?file=demo%2Fcustom-week-view.component.ts

but this project structure is a little bit diffrent from my project structure so how I can achieve this in my project

achref
  • 1
  • 1

1 Answers1

0

Without seeing the rest of your code it's hard to tell what the issue is. I can tell you, however, that Angular components typically encapsulate their CSS classes, meaning that if one Angular component contains another Angular component, then CSS defined in the parent has no effect on the child.

The calendar you are using is an Angular component, so you wont' be able to affect any styles of the calendar from your component that contains the calendar.

To break this encapsulation, you'll need to use the ::ng-deep pseudo class within your parent. Something like this:

::ng-deep .css-class-you-want-to-change: {
    width: 400px;
  }

What I typically do is use Chrome's Inspect Element function to get to the thing I want to change, and try altering the style right within Chrome developer tools. If that works, I just grab the name of the CSS class I'm trying to change (or a more specific selector if necessary) and then I put that within an ::ng-deep.

Finally, I should mention that just modifying the width of the whole Angular component probably isn't the correct way to achieve your result, although sometimes it will work. Usually, you need to spelunk into the components constituent Divs to find the thing that affects the style you want to change.

FunkMonkey33
  • 1,956
  • 2
  • 16
  • 24