CODEWITHSUNDEEP
angularangular-calendar
Rahman Saleh
Rahman Saleh

Reputation: 1118

How to include angular-calendar (mattlewis92) as an Angular component not as a package

We are using angular-calendar (mattlewis92). As we want to have more control over the calendar, we want to include it as an Angular component, and not as a package.

I included all the modules (in the picture), calendar-utils folder, but there are endless number of errors, I fix one, I get another 10 errors.

was anyone able to create an Angular Component out of the packages smoothly? is there a tuturial somewhere I can read?

enter image description here

Edit: The app is finally compiling, however I am getting the following error: enter image description here

Upvotes: 0

Views: 932

Answers (3)

ng-hobby
ng-hobby

Reputation: 2199

In your app.module.ts and in the providers add this:

providers: [
  CalendarUtils
]

Upvotes: 0

Rahman Saleh
Rahman Saleh

Reputation: 1118

The problem was that I wasn't including the right calendar-utils.ts file. the source file is here You can include the whole file or just what you want from it; in my case for example I just wanted to include the MonthView functions, because I am only interested in a monthly view calendar. So I just included MonthViewDay, MonthView, GetMonthViewArgs, ViewPeriod, getMonthView.

Also he uses dateAdaptor classes which gives you the possiblity to choose between date-fns and moment.js I removed the whole folder and replaced it everywhere with the corresponding date-fnsfunctions.

The last step I did was to include the pipes for date formatting.

Upvotes: 1

zerocewl
zerocewl

Reputation: 12804

If you get a NullInjectorError properly your provider for CalendarUtils is missing in your module.

Have a look at the original calendar.module.ts impl. where the provider is defined.

E.g.:

      providers: [
        dateAdapter,
        config.eventTitleFormatter || CalendarEventTitleFormatter,
        config.dateFormatter || CalendarDateFormatter,
        config.utils || CalendarUtils,
        config.a11y || CalendarA11y,
      ],

Upvotes: 0

Related Questions