不使用angular2-fullcalendar [英] not use an angular2-fullcalendar

问题描述

我指的是 https://www.npmjs.com/package/angular2-fullcalendar . 但是，它将无法正确显示. 仅显示日历的标题部分. 错误在哪里?

I referred to https://www.npmjs.com/package/angular2-fullcalendar. But, It will not be displayed properly. Only the header part of calendar is displayed. Where is the mistake?

npm install ap-angular2-fullcalendar --save

app.module.ts

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

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

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

style.css

style.css

@import "../node_modules/fullcalendar/dist/fullcalendar.min.css";

app.component.html

app.component.html

<angular2-fullcalendar [options]="calendarOptions"></angular2-fullcalendar>

app.component.ts

app.component.ts

import {Component, ViewChild} from '@angular/core';
import {CalendarComponent} from "ap-angular2-fullcalendar";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';


  @ViewChild(CalendarComponent) myCalendar: CalendarComponent;

  changeCalendarView(view) {
    this.myCalendar.fullCalendar('changeView', view);
  }

  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: 'Click for Google',
        url: 'http://google.com/',
        start: '2016-09-28'
      }
    ]
  };

}

在此处输入图片描述

推荐答案

您可以在选项中使用height:parent配置将日历主体的高度设置为0，以便您将其注释掉以查看日历.

Somehow using the height:parent config in your options setting the height of the calendar body to 0 so you need to comment that out to see the calendar.

这篇关于不使用angular2-fullcalendar的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！