Angular-Calendar: No provider for DateAdapter

Question

In my newly created Angular app, I'm trying to use the angular-calendar by mattlewis92 to create his calendar. I've taken copied all of the steps and code listed on his github: https://mattlewis92.github.io/angular-calendar/#/kitchen-sink but I keep getting an error that says Error: StaticInjectorError(AppModule)[CalendarDayViewComponent -> Date Adapter]: NullInjectorError: No provider for DateAdapter!

In my app.module.ts, I have this, and have imported all of them also:

imports: [
    CalendarModule.forRoot({
        provide: DateAdapter,
        useFactory: adapterFactory
    })
]

the only thing that I can see being a problem is that I use Moment also, so I have this in my providers:

{ provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] }

Any help would be greatly appreciated on why this is happening or how I would go about fixing it, thanks!

Huntingdonshire

Answer 1

try this. worked for me. Calendar need some form of dateAdapter you can use moment as shown below.

import { CalendarModule, DateAdapter } from 'angular-calendar';
import { adapterFactory } from 'angular-calendar/date-adapters/moment';
import * as moment from 'moment';

export function momentAdapterFactory() {
  return adapterFactory(moment);
};
imports: [
    CalendarModule.forRoot({ provide: DateAdapter, useFactory: momentAdapterFactory })
]

Hittite

Answer 2

I guess you are mixing the DateAdapter symbols.

In your calendar module, use:

import { DateAdapter } from "angular-calendar";

In your angular material module, use:

import { DateAdapter } from '@angular/material/core';

Secondly, if you want to use angular-calendar with date-fns, your current code should be alright. If you want to use angular-calendar with moment, you should refer to this official demo.

The calendar module would look like:

export function momentAdapterFactory() {
  return adapterFactory(moment);
}

@NgModule({
  imports: [
    CommonModule,
    CalendarModule.forRoot(
      {
        provide: DateAdapter,
        useFactory: momentAdapterFactory,
      },
      {
        dateFormatter: {
          provide: CalendarDateFormatter,
          useClass: CalendarMomentDateFormatter,
        },
      }
    )
  ],
  providers: [
    {
      provide: MOMENT,
      useValue: moment,
    },
  ],
})
export class MyCalendarModule {}

Consumer