角度2中的完整日历

Question

我刚接触Angular2。因此，我不知道确切如何使用完整日历。 如果我使用完整日历，则表明完整日历不是功能 。 请帮我。 如何从基本设置为angular2？

我正在使用这个...

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

Answer 1

请安装npm模块

npm install-保存角度日历

然后将两个文件都导入到索引文件中

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

更多信息请检查下面的链接，也可以在angular 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

您需要导入，

从“ ap-angular2-fullcalendar”导入{CalendarModule};

以及

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