Installation with Angular 2

[mastarenee]

I have installed the plugin and then I have imported the component into my ngmodule

import { CalendarComponent } from "angular2-fullcalendar/src/calendar/calendar";

declarations: [ ..... CalendarComponent,

After placing the <angular2-fullcalendar [options]="calendarOptions"> tag into my template file I get the following error:

npm version 4.3.0 node version 6.9.0

error_handler.js:54 EXCEPTION: Uncaught (in promise): Error: Template parse errors: Can't bind to 'options' since it isn't a known property of 'angular2-fullcalendar'.

1. If 'angular2-fullcalendar' is an Angular component and it has 'options' input, then verify that it is part of this module.

2. If 'angular2-fullcalendar' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("

   ][options]="calendarOptions">

[jhenrich]

Did you specify the options in the code in the DashboardComponent? Please show us the code of your DashboardComponent

[tavomoya]

Getting the exact same error...

[jhenrich]

Without some more code its hard to reproduce the origin of the error

[mastarenee]

@jhenrich Yes I have the options code in my component, please see below:

import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { UserService } from 'app/_services/user.service'; import { RotationService } from 'app/rotations/rotation.service'; import { DatePipe } from '@angular/common'; import { FormBuilder, Validators } from '@angular/forms'; import { PaginationInstance} from 'ng2-pagination/dist/ng2-pagination';

import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/catch'; import 'rxjs/add/operator/map';

@Component({ templateUrl: 'dashboard.component.html', providers: [UserService, RotationService, DatePipe], }) export class DashboardComponent implements OnInit {

/* Calendar */
calendarOptions:Object = {
    height: 'parent',
    fixedWeekCount : false,
    defaultDate: '2016-09-12',
    editable: true,
    eventLimit: true, // allow "more" link when too many events
    events: [
      {
        title: 'All Day Event',
        start: '2016-09-01'
      },
      {
        title: 'Long Event',
        start: '2016-09-07',
        end: '2016-09-10'
      },
      {
        id: 999,
        title: 'Repeating Event',
        start: '2016-09-09T16:00:00'
      },
      {
        id: 999,
        title: 'Repeating Event',
        start: '2016-09-16T16:00:00'
      },
      {
        title: 'Conference',
        start: '2016-09-11',
        end: '2016-09-13'
      },
      {
        title: 'Meeting',
        start: '2016-09-12T10:30:00',
        end: '2016-09-12T12:30:00'
      },
      {
        title: 'Lunch',
        start: '2016-09-12T12:00:00'
      },
      {
        title: 'Meeting',
        start: '2016-09-12T14:30:00'
      },
      {
        title: 'Happy Hour',
        start: '2016-09-12T17:30:00'
      },
      {
        title: 'Dinner',
        start: '2016-09-12T20:00:00'
      },
      {
        title: 'Birthday Party',
        start: '2016-09-13T07:00:00'
      },
      {
        title: 'Click for Google',
        url: 'http://google.com/',
        start: '2016-09-28'
      }
    ]
  };

constructor(private userService: UserService, private rotationService: RotationService, private datePipe:DatePipe, public fb: FormBuilder) {}

/ Pagination / private pageSize = 10; public config: PaginationInstance = { id: 'customerListTable', itemsPerPage: this.pageSize, currentPage: 1 };

onPageChange(number: number) { console.log('change to page', number); this.config.currentPage = number; }

convertStatus(status){ if( status == 1){ return " Active"; }else{ return " Pending"; } }

convertDate(date){ if(date!= "0000-00-00 00:00:00"){ return this.datePipe.transform(date, 'fullDate'); } }

ngOnInit(): void {

this.userService.getDashInformation()
  .subscribe(result => {
    console.log(result);
  });

} }

[mastarenee]

@jhenrich I got it working, Error on my part as I thought. I have a ng module for my dashboard so I had to place the code in there rather than in the main app.module.ts

[Nikpds]

This issue should closed

[ghost]

Facing same issue

[laura-rodriguez]

Hi,

I am facing the same issue. My code is exactly the same described in the installation section. I have tried @mastarenee workaround without success. Any ideas? Thanks!

[AltRoot17]

try to put your app.module.ts like this import {CalendarComponent} from "ap-angular2-fullcalendar";

[Harshad-Akhani]

how can i set theme and theme style using calendar options

calendarOptions = { ThemeSystem: 'Bootstrap3', ThemeName : 'Flatly', height: 'auto', contentHeight: 'auto', fixedWeekCount: false, defaultDate: '2016-09-12', selectable: true, editable: true, ...... }

i tried this but it's not working