Angular-calendar: TypeError: Object(...) is not a function while using angular-calendar

Created on 22 May 2018  路  2Comments  路  Source: mattlewis92/angular-calendar

Describe the bug
I am using angular-5.2.I want to use angular-calendar in my project.
I followed instructions as stated in "https://mattlewis92.github.io/angular-calendar/#/kitchen-sink".
CSS is rendering fine ,but there is a error in console stating
"CalendarMonthCellComponent.html:18 ERROR TypeError: Object(...) is not a function"
And also my calendar is not working properly when i am adding any event to it.
The component file is as follows:-

import { Component, OnInit } from '@angular/core';
import { CustomDateFormatter } from './custom-date-formatter.provider';
import { ChangeDetectionStrategy,ViewChild,TemplateRef } from '@angular/core';
import { CalendarEvent,  CalendarEventAction,CalendarEventTimesChangedEvent,CalendarDateFormatter } from 'angular-calendar';

import {startOfDay,endOfDay,subDays,addDays,endOfMonth,isSameDay,isSameMonth,addHours} from 'date-fns';
import { Subject } from 'rxjs';
const colors: any = {
  red: {
    primary: '#ad2121',
    secondary: '#FAE3E3'
  },
  blue: {
    primary: '#1e90ff',
    secondary: '#D1E8FF'
  },
  yellow: {
    primary: '#e3bc08',
    secondary: '#FDF1BA'
  }
}; 
@Component({
  selector: 'app-graph2',
  templateUrl: './graph2.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,

  styleUrls: ['./graph2.component.css'],
  providers: [
    {
      provide: CalendarDateFormatter,
      useClass: CustomDateFormatter
    }
  ]
})
export class Graph2Component implements OnInit {
  view: string = 'month';

  viewDate: Date = new Date();

  events: CalendarEvent[] = [
    {
      title: 'Has custom class',
      color: colors.yellow,
      start: new Date(),

    }

  ];
  constructor() { }

  ngOnInit() {
  }

}

`
the html file is as follows:-

````
[(view)]="view"
[(viewDate)]="viewDate">

````

Versions (please complete the following information):

  • @angular/core: 5.0.0
  • angular-calendar:0.25.2
  • Browser name and version:google chrome
    screenshot 43

Most helpful comment

I think this is because you're using angular 5 which isn't compatible with the latest version of this package.

npm i [email protected]

should fix your problem 馃槃

All 2 comments

I think this is because you're using angular 5 which isn't compatible with the latest version of this package.

npm i [email protected]

should fix your problem 馃槃

Thank you very much.It works for me.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

oldschoolbg picture oldschoolbg  路  4Comments

sylvain-fr picture sylvain-fr  路  3Comments

Novabllast picture Novabllast  路  3Comments

PrasannaKolla picture PrasannaKolla  路  4Comments

mattlewis92 picture mattlewis92  路  3Comments