角全日历的上一个下一个按钮CSS

时间:2019-04-01 10:38:25

标签: angular

当我在角度项目中导入全日历css时,上一个和下一个按钮css不会改变。

See here

上面的图片是我的html视图,默认情况下,上一个和下一个按钮css不会在侧面显示小箭头。我认为将fullcalendar.min.css导入到style.css失败。而且我也将其添加到angular.json中,我已经在网络中搜索了很多解决方案,但是它也不起作用。

import { Component, OnInit, ViewChild } from '@angular/core';
import {EventService} from './event.service';
import { OptionsInput } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';
import {CalendarComponent} from 'ng-fullcalendar';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  constructor(protected eventService: EventService) {}
  options: OptionsInput;
  modal: any;
  display: any;
  @ViewChild('fullcalendar') fullcalendar: CalendarComponent;
  ngOnInit(): void {
    this.eventService.getEvents().subscribe(data => {
      this.options = {
        editable: true,
        events: data,
        handleWindowResize: true,
        height: 800,
        themeSystem: 'standard' ,
        header: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
        },
        plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin]
      };
    });
    // console.log(this.fullcalendar)
  }

  updateEvent(model) {
    model = {
      event: {
        id: model.event.id,
        start: model.event.start,
        end: model.event.end,
        title: model.event.title
      },
      duration:
        model.delta
    };
    this.display = model;
  }
}
@import '~bootstrap/dist/css/bootstrap.min.css';
@import "~font-awesome/css/font-awesome.min.css";
@import "~fullcalendar/dist/fullcalendar.min.css";
{{this.display|json}}
<h1 class="text-danger">afsda</h1>
<div class="align-content-center pl-3 pr-3">
  <ng-fullcalendar
    #fullcalendar
    [options]="options"
    (eventDrop)="updateEvent($event)"
  >
  </ng-fullcalendar>
</div>

0 个答案:

没有答案