Angular-calendar: issue with angular 6 calender

[amanritesh94]

Describe the bug

core.js:15713 ERROR TypeError: dateAdapter.startOfWeek is not a function
at getWeekViewHeader (calendar-utils.js:174)
at CalendarUtils.push../node_modules/angular-calendar/fesm5/angular-calendar.js.CalendarUtils.getWeekViewHeader (angular-calendar.js:1145)
at CalendarMonthViewComponent.push../node_modules/angular-calendar/fesm5/angular-calendar.js.CalendarMonthViewComponent.refreshHeader (angular-calendar.js:1854)
at CalendarMonthViewComponent.push../node_modules/angular-calendar/fesm5/angular-calendar.js.CalendarMonthViewComponent.ngOnChanges (angular-calendar.js:1744)
at checkAndUpdateDirectiveInline (core.js:21996)
at checkAndUpdateNodeInline (core.js:23264)
at checkAndUpdateNode (core.js:23226)
at prodCheckAndUpdateNode (core.js:23767)
at Object.eval [as updateDirectives] (CalendarComponent.ngfactory.js:185)
at Object.updateDirectives (core.js:23555)
defaultErrorLogger @ core.js:15713
push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:15761
(anonymous) @ core.js:18027
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:17247
push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:18027
(anonymous) @ core.js:17911
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
onInvoke @ core.js:17288
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:390
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
push../node_modules/@angular/core/fesm5/core.js.NgZone.run @ core.js:17202
next @ core.js:17911
schedulerFn @ core.js:13504
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:194
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:132
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:76
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:53
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:13488
checkStable @ core.js:17257
onHasTask @ core.js:17301
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.hasTask @ zone.js:443
push../node_modules/zone.js/dist/zone.js.ZoneDelegate._updateTaskCount @ zone.js:463
push../node_modules/zone.js/dist/zone.js.Zone._updateTaskCount @ zone.js:291
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:212
drainMicroTaskQueue @ zone.js:601
Promise resolved (async)
scheduleMicroTask @ zone.js:584
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:413
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:258
scheduleResolveOrReject @ zone.js:879
ZoneAwarePromise.then @ zone.js:1012
push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:17792
./src/main.ts @ main.ts:18
__webpack_require__ @ bootstrap:78
0 @ main.ts:19
__webpack_require__ @ bootstrap:78
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
core.js:15713 ERROR TypeError: Cannot read property 'rowOffsets' of undefined
at Object.eval [as updateDirectives] (CalendarMonthViewComponent.ngfactory.js:140)
at Object.updateDirectives (core.js:23555)
at checkAndUpdateView (core.js:23208)
at callViewAction (core.js:23449)
at execComponentViewsAction (core.js:23391)
at checkAndUpdateView (core.js:23214)
at callViewAction (core.js:23449)
at execEmbeddedViewsAction (core.js:23412)
at checkAndUpdateView (core.js:23209)
at callViewAction (core.js:23449)

Minimal reproduction of the problem with instructions

Screenshots

Versions

• @angular/core: "^7.2.4",
• angular-calendar: "^0.26.6"
• Browser name and version: chrome

[mattlewis92]

Sorry, from the information that you posted I can't tell what the issue is, please file a new issue with a minimal repro that I can run that demonstrates your problem. Thanks! 😄

[alex7egli]

I ran into the same issue, it's caused by using MomentDateAdapter as the universal DateAdapter which you do to be able to use moment formatting and locales on mat-datepicker throughout your project. Reference: https://material.angular.io/components/datepicker/overview#localizing-labels-and-messages

MomentDateAdapter doesn't have all the functions DateAdapter does (e.g. startOfWeek). I don't think angular-calendar supports using MomentDateAdapter currently.

[mattlewis92]

@alex7egli this project doesn't have any dependency on material, it provides it's own date adapter for moment:

import moment from 'moment';
import { adapterFactory } from 'angular-calendar/date-adapters/moment';

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

There's an e2e example of using moment with the calendar here: https://mattlewis92.github.io/angular-calendar/#/moment

Hope that helps! 😄

[alex7egli]

Yup, it's because the angular-calendar DateAdapter has the same class name as the global material DateAdapter so if they are in the same module and you provide MaterialDateAdapter for the DateAdapter the angular-calendar uses that instead of adapterFactory. So the angular-calendar has to be declared in a submodule of the main module, so that the global material DateAdapter can be overridden in the app's main module and the angular-calendar DateAdapter can be provided by adapterFactory in its own submodule.

[mattlewis92]

Ahhh, I see now, you can workaround it by doing import { DateAdapter as CalendarDateAdapter } from 'angular-calendar'. I suppose I could export it as CalendarDateAdapter and update the docs to use that instead which might solve the UX issue.

[Generic1]

I was also running in this issue:

ERROR TypeError: dateAdapter.startOfWeek is not a function
at getWeekViewHeader (calendar-utils.js:176)

and I actually don't know how to solve this issue.
I understand why this ERROR happens but actually I dont know what to do.
Where I have to put this line:
import { DateAdapter as CalendarDateAdapter } from 'angular-calendar
Thanks a lot for help!