Angular 17中使用angular-calendar遇组件未识别及属性绑定错误求助

问题根源 #

1. Angular 17默认采用独立组件模式，你使用的angular-calendar版本（一年前发布）大概率未适配该模式，仍依赖传统NgModule的导入逻辑。
2. refresh属性已被angular-calendar废弃，且不同视图组件（如day-view和month-view）的属性不通用，你可能在错误的组件上使用了不存在的属性。

具体修复步骤 #

1. 调整组件导入方式 #

如果你的组件是独立组件（@Component中包含standalone: true），放弃CalendarModule导入，直接引入所需的日历组件：

import { Component } from '@angular/core';
import { CalendarMonthViewComponent, CalendarDayViewComponent, DateAdapter } from 'angular-calendar';
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns'; // 按你实际使用的适配器修改

@Component({
  selector: 'app-your-calendar',
  templateUrl: './your-calendar.component.html',
  standalone: true,
  imports: [
    CalendarMonthViewComponent,
    CalendarDayViewComponent,
    // 其他你需要的模块，比如FormsModule、ReactiveFormsModule等
  ],
  providers: [
    {
      provide: DateAdapter,
      useFactory: adapterFactory
    }
  ]
})
export class YourCalendarComponent {
  // 你的组件逻辑代码
}

若仍使用传统NgModule模式，确保组件所在的NgModule中已导入CalendarModule，且组件未设置standalone: true。

2. 移除废弃的refresh属性 #

angular-calendar已取消refresh输入属性，现在要么依赖Angular自动变更检测刷新视图，要么手动调用组件的refreshView()方法：

• 先删除模板中的[refresh]="refresh"绑定：

<mwl-calendar-month-view
  *ngSwitchCase="CalendarView.Month"
  [viewDate]="viewDate"
  [events]="events"
  [activeDayIsOpen]="activeDayIsOpen"
  (dayClicked)="dayClicked($event.day)"
  (eventClicked)="handleEvent('Clicked', $event.event)"
  (eventTimesChanged)="eventTimesChanged($event)">
</mwl-calendar-month-view>

• 如需手动刷新，在组件类中获取组件实例并调用方法：

import { ViewChild } from '@angular/core';
import { CalendarMonthViewComponent } from 'angular-calendar';

export class YourCalendarComponent {
  @ViewChild(CalendarMonthViewComponent) monthView!: CalendarMonthViewComponent;

  refreshCalendar() {
    this.monthView.refreshView();
  }
}

3. 检查版本兼容性 #

尝试升级angular-calendar到最新版，确认是否适配Angular 17：

npm install angular-calendar@latest

若最新版仍不兼容，可临时降级Angular到16，或添加NO_ERRORS_SCHEMA跳过属性检查（不推荐长期使用，会掩盖其他潜在问题）：

import { NO_ERRORS_SCHEMA } from '@angular/core';

@Component({
  // 其他组件配置
  schemas: [NO_ERRORS_SCHEMA]
})

4. 核对视图组件的属性 #

错误提示提到mwl-calendar-day-view，检查你模板中的该组件，避免将month-view的属性（如activeDayIsOpen）误用在day-view上，不同视图组件的支持属性存在差异。

内容的提问来源于stack exchange，提问作者pl-jay