角度 2 的完整日历

Question

我是角度 2 的新手。 所以，我不知道如何使用完整的日历。如果我使用完整日历，则显示完整日历不是一个函数。请帮助我。如何从基本在 Angular2 中设置它？

我正在使用这个...

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

Answer 1

请安装 npm 模块

npm 安装 --保存角度日历

然后在索引文件的两个文件中导入

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

和

在模块.ts文件中导入模块，例如

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 {}

更多信息请查看下面的链接，也适用于Angular 2.x版本

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

谢谢

Answer 2

这是工作 plunker： http://plnkr.co/edit/eCypVy4l6H9SA9MNrm8w?p=preview

步骤：

1. 安装 npm 包：npm install --保存角度日历
2. 将 CSS 添加到您的应用中：node_modules/角度日历/dist/css/角度日历.css

3. 将日历模块导入您的应用程序模块：

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

这是有效的国际日历示例：

组件.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];
}

模板.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>

模块.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 {}

自定义日期格式化程序：

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

您需要导入，

从"ap-angular2-fullcalendar"导入 { 日历模块 };

也

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 { }