Angular 5中angular-calendar无DateAdapter导出成员问题求助

Got it, let's tackle this issue step by step. Since you're using angular-calendar@0.24.1 with Angular 5, the DateAdapter export doesn't exist in this older version—it's a newer addition introduced in later releases. Here's how to set up and use the module correctly:

1. Correct Module Import & Configuration #

First, forget about DateAdapter—it's not part of this version. Instead, import the core AngularCalendarModule and use the date formatting utilities that come with v0.24.1. Here's how to set up your app module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AngularCalendarModule, CalendarDateFormatter } from 'angular-calendar';

// Optional: If you want to use moment.js instead of date-fns, import MomentModule
// import { MomentModule } from 'angular2-moment';
// import { CalendarMomentDateFormatter } from 'angular-calendar';

import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    AngularCalendarModule.forRoot(),
    // MomentModule // Uncomment if using moment.js
  ],
  declarations: [AppComponent],
  providers: [
    // Optional: Configure custom date formatting (use CalendarMomentDateFormatter if using moment)
    // {
    //   provide: CalendarDateFormatter,
    //   useClass: CalendarMomentDateFormatter
    // }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Import Required Styles #

angular-calendar needs its base styles to render properly. Add this line to your global styles.css (or styles.scss):

@import '~angular-calendar/css/angular-calendar.css';

Alternatively, if you're using Angular CLI, you can add the stylesheet path directly to the styles array in angular-cli.json:

"styles": [
  "styles.css",
  "../node_modules/angular-calendar/css/angular-calendar.css"
]

3. Basic Component Usage Example #

Here's a minimal working example to test the calendar in your component:

Component Class (app.component.ts) #

import { Component } from '@angular/core';
import { CalendarEvent } from 'angular-calendar';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  viewDate: Date = new Date();
  events: CalendarEvent[] = [
    {
      title: 'Team Meeting',
      start: new Date(),
      end: new Date(new Date().setHours(new Date().getHours() + 1.5)),
      color: { primary: '#1976d2', secondary: '#bbdefb' }
    }
  ];
}

Component Template (app.component.html) #

<mwl-calendar
  [view]="'month'"
  [viewDate]="viewDate"
  [events]="events"
></mwl-calendar>

4. Why You Encountered the Error #

The DateAdapter is a feature added in later angular-calendar versions (to align with Angular Material's date handling pattern). Since you're on v0.24.1 (compatible with Angular 5), this export doesn't exist. You were likely referencing documentation for a newer version of the library—stick to the patterns above for this specific release.

If you need to customize date parsing or formatting, create a custom implementation of CalendarDateFormatter instead of trying to use DateAdapter.

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