Full Calendar in angular 2

Question

I am new to angular 2. so, I don't know exactly how to use full calendar. if I use full calendar it shows full calendar is not a function. please help me. how to set it in angular2 from basic?

i am using this...

import {CalendarComponent} from "ap-angular2-fullcalendar";

Answer 1

Please install npm module

npm install --save angular-calendar

then import in both file in your index file

<link href="./node_modules/angular-calendar/dist/css/angular-calendar.css">
<script src="./node_modules/angular-calendar/dist/umd/angular-calendar.js"></script>

and

import module in module.ts file like

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CalendarModule } from 'angular-calendar';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    CalendarModule.forRoot()
  ]
})
export class MyModule {}

more information check below link & also work in angular 2.x version

https://www.npmjs.com/package/angular-calendar

Thanks,

Answer 2

Here is working plunker: http://plnkr.co/edit/eCypVy4l6H9SA9MNrm8w?p=preview

Steps:

1. install npm package : npm install --save angular-calendar
2. include css into your app: node_modules/angular-calendar/dist/css/angular-calendar.css

3. import calendar module into your apps module:

   import { CalendarModule } from 'angular-calendar'; @NgModule({ imports: [ BrowserAnimationsModule, CalendarModule.forRoot() ] })

Here is working international calendar example:

component.ts:

import { Component, ChangeDetectionStrategy } from '@angular/core';
import {
  CalendarEvent,
  CalendarDateFormatter,
  DAYS_OF_WEEK
} from 'angular-calendar';
import { CustomDateFormatter } from './custom-date-formatter.provider';
@Component({
  selector: 'mwl-demo-component',
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: 'template.html',
  providers: [
    {
      provide: CalendarDateFormatter,
      useClass: CustomDateFormatter
    }
  ]
})
export class DemoComponent {
  view: string = 'month';
  viewDate: Date = new Date();
  events: CalendarEvent[] = [];
  locale: string = 'fr';
  weekStartsOn: number = DAYS_OF_WEEK.MONDAY;
  weekendDays: number[] = [DAYS_OF_WEEK.FRIDAY, DAYS_OF_WEEK.SATURDAY];
}

template.html:

<mwl-demo-utils-calendar-header
  [(view)]="view"
  [(viewDate)]="viewDate"
  [locale]="locale">
</mwl-demo-utils-calendar-header>
<div [ngSwitch]="view">
  <mwl-calendar-month-view
    *ngSwitchCase="'month'"
    [viewDate]="viewDate"
    [events]="events"
    [locale]="locale"
    [weekStartsOn]="weekStartsOn"
    [weekendDays]="weekendDays">
  </mwl-calendar-month-view>
  <mwl-calendar-week-view
    *ngSwitchCase="'week'"
    [viewDate]="viewDate"
    [events]="events"
    [locale]="locale"
    [weekStartsOn]="weekStartsOn"
    [weekendDays]="weekendDays">
  </mwl-calendar-week-view>
  <mwl-calendar-day-view
    *ngSwitchCase="'day'"
    [viewDate]="viewDate"
    [events]="events"
    [locale]="locale">
  </mwl-calendar-day-view>
</div>

module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CalendarModule } from 'angular-calendar';
import { DemoUtilsModule } from '../demo-utils/module';
import { DemoComponent } from './component';
@NgModule({
  imports: [
    CommonModule,
    CalendarModule.forRoot(),
    DemoUtilsModule
  ],
  declarations: [DemoComponent],
  exports: [DemoComponent]
})
export class DemoModule {}

custom-date-formatter:

import { CalendarDateFormatter, DateFormatterParams } from 'angular-calendar';
import { getISOWeek } from 'date-fns';
export class CustomDateFormatter extends CalendarDateFormatter {
  public weekViewTitle({ date, locale }: DateFormatterParams): string {
    const year: string = new Intl.DateTimeFormat(locale, {
      year: 'numeric'
    }).format(date);
    const weekNumber: number = getISOWeek(date);
    return `Semaine ${weekNumber} en ${year}`;
  }
}

Answer 3

You need to import,

import { CalendarModule } from "ap-angular2-fullcalendar";

as well

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { MaterializeModule } from 'angular2-materialize';
import { CalendarComponent } from "ap-angular2-fullcalendar";
import { AppComponent } from './app.component';
import { CalendarModule } from "ap-angular2-fullcalendar";

@NgModule({
  declarations: [
    AppComponent,
    CalendarComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }