angular-calendar subFn is not a function

Question

I having troubles using the angular 5 calendar component https://mattlewis92.github.io/angular-calendar

The calendar renders perfectly, including events etc. However, Using mwlCalendarPreviousView and mwlCalendarNextView directives do not work.

Clicking on then do give the following error:

ERROR TypeError: subFn is not a function
    at CalendarPreviousViewDirective.onClick (angular-calendar.js:239)
    at Object.eval [as handleEvent] (PlanningOverview.html:58)
    at handleEvent (core.js:13581)
    at callWithDebugContext (core.js:15090)
    at Object.debugHandleEvent [as handleEvent] (core.js:14677)

Navigating to the source of that onClick method shows me the following:

 /**
  * @hidden
  * @return {?}
  */
  CalendarNextViewDirective.prototype.onClick = function () {
        var /** @type {?} */ addFn = {
            day: addDays,
            week: addWeeks,
            month: addMonths
        }[this.view];
        this.viewDateChange.emit(addFn(this.viewDate, 1));
    };
    return CalendarNextViewDirective;

Which shows that subFn is indeed not a function.

I must be doing something wrong, but I can't find what...

(I'm using angular-calendar 0.23.2 on Angular 5.0.00)

Foreskin

I don't understand the question. You've shown that the code has bug. You've found it and stated it. What do you want to do now? – Harbert

I'm using the angular-calender library in my angular app. So am I using the directives of that library. The clicking on the directives do give an error. On the demo site, the directives do work. – Foreskin

And the library has a bug. You've found it. Without changing the library code, you cannot do anything. – Harbert

The library seems to work perfectly on their demo site. That's why I think it's something on my end... – Foreskin

For the record, the solution is really simple: the above code shows that addFn will result in a function if this.view resolves to either 'day', 'week' or 'month'. In my case, just adding this field as a string in my component, and initializing it with the value 'month' solved my problem. – Indigested

Answer 1

I had the same issue using Angular 6 and angular-calendar 0.25.2. I was setting the [view] attribute incorrectly. I had [view]="month", but the [view] MUST be set to a variable in the controller, e.g. in the HTML: [view]='myView' and in the controller myView: string = 'month'

Purusha

Answer 2

[view]="month" change to view="month"

Bolanos

[view]="'month'" should also work, note the next single quotes to ensure its a string – Sanctify