角度2的完整日历

Question

我是角度2的新手。所以，我不知道如何使用完整的日历。 如果我使用完整日历，则显示完整日历不是功能。请帮我。如何从基本角度设置角度？

我正在使用这个...

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

Answer 1

请安装npm模块

  

npm install --save angular-calendar

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

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

和

在module.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 {}

更多信息请查看以下链接＆amp;也适用于角度2.x版本

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

谢谢，

Answer 2

以下是工作人员：http://plnkr.co/edit/eCypVy4l6H9SA9MNrm8w?p=preview

步骤：

1. 安装npm包： npm install --save angular-calendar
2. 将css包含到您的应用中： node_modules / angular-calendar / dist / css / angular-calendar.css

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

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

这是工作国际日历示例：

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

自定义最新格式化器：

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

您需要导入

导入{CalendarModule}来自＆＃34; ap-angular2-fullcalendar＆＃34;;

以及

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