如何在Angular项目中动态调整mwl-calendar-week-view的事件宽度

你之前直接给<mwl-calendar-week-view>组件绑定width样式不生效，是因为该属性作用的是周视图容器的整体宽度，而单个日历事件是组件内部渲染的子元素，宽度由组件内部默认逻辑控制，外层样式无法直接作用到内部事件元素上。

方案1：CSS变量+样式穿透（轻量实现，无需修改组件结构） #

适合只需要动态调整宽度，不需要复杂定制逻辑的场景。

• 第一步：在父组件的样式文件中添加穿透样式，绑定自定义CSS变量：

/* 你的父组件样式文件 */
:host ::ng-deep mwl-calendar-week-view .cal-event {
  /* 用CSS变量控制宽度，!important 用于覆盖组件内部生成的行内样式 */
  width: calc(var(--event-width-percent, 100) * 1%) !important;
  /* 如有需要也可以同步调整事件的左侧偏移量 */
  /* left: calc(var(--event-offset-percent, 0) * 1%) !important; */
}

• 第二步：在父组件TS中定义宽度控制变量：

// 你的父组件TS文件
// 可根据业务逻辑动态修改该值，单位为百分比
eventWidthPercent: number = 70;

• 第三步：修改周视图组件绑定，把CSS变量透传进去：

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

之后你只要动态修改eventWidthPercent的值，事件宽度就会自动同步更新。

方案2：自定义周视图组件（适配复杂定制逻辑） #

和你参考的示例实现逻辑一致，适合需要对事件渲染逻辑做更多定制的场景。

• 第一步：创建自定义周视图组件，继承官方的CalendarWeekViewComponent：

// custom-week-view.component.ts
import { Component, Input } from '@angular/core';
import { CalendarWeekViewComponent } from 'angular-calendar';

@Component({
  selector: 'app-custom-week-view',
  // 可以直接引用官方模板地址，也可以把官方周视图模板代码复制到本地html文件中使用
  templateUrl: 'https://raw.githubusercontent.com/mattlewis92/angular-calendar/master/projects/angular-calendar/src/modules/week/calendar-week-view.component.html',
  styleUrls: ['./custom-week-view.component.scss']
})
export class CustomWeekViewComponent extends CalendarWeekViewComponent {
  // 自定义输入属性，接收外部传入的宽度比例
  @Input() customWidthRatio: number = 1;

  // 重写官方的事件样式计算方法
  override getEventStyle(event: any): Record<string, any> {
    const baseStyles = super.getEventStyle(event);
    // 在原有宽度计算结果的基础上叠加自定义比例
    if (baseStyles.width) {
      baseStyles.width = `calc(${baseStyles.width} * ${this.customWidthRatio})`;
    }
    return baseStyles;
  }
}

• 第二步：在你的模块中声明该自定义组件：

// 你的模块文件
@NgModule({
  declarations: [CustomWeekViewComponent]
})
export class YourModule { }

• 第三步：替换原有的周视图组件为自定义组件，绑定你的动态变量：

<app-custom-week-view
    *ngSwitchCase="CalendarView.Week"
    [viewDate]="viewDate"
    [events]="events"
    [locale]="locale"
    [refresh]="refresh"
    [customWidthRatio]="yourDynamicVariable" <!-- 这里绑定你TS中的动态变量 -->
    (eventClicked)="handleEvent('Clicked', $event.event)"
    (eventTimesChanged)="eventTimesChanged($event)">
</app-custom-week-view>

注意事项 #

• 方案1中使用:host ::ng-deep是为了突破Angular的样式封装，加:host前缀可以保证样式仅作用于当前组件内部，不会污染全局样式。
• 方案2需要注意Angular Calendar版本升级时，官方周视图模板如果有改动，需要同步更新自定义组件的模板，避免出现兼容性问题。

内容的提问来源于stack exchange，提问作者achref