Question

我正在研究angular7项目，并且遇到了完整日历的问题。我想在选项卡上显示日历，但是在选项卡处于活动状态时，角全日历未初始化。请参考以下截图

我正在使用“物料”标签https://material.angular.io/components/tabs/overview，对于完整的日历，我已经集成了https://github.com/fullcalendar/fullcalendar-example-projects/tree/master/angular。

代码

appointment-Calendar.Component.ts

 export class AppointmentCalendarComponent implements OnInit {

        @ViewChild('calendar', {static: true}) calendarComponent: FullCalendarComponent; // the #calendar in the template


        calendarPlugins = [dayGridPlugin, timeGrigPlugin, interactionPlugin];
        calendarWeekends = true;

       calendarEvents: EventInput[] = [{"title":"Dr. Helen Jones 07:20 PM","start":"2019-07-31 19:20:00"},{"title":"Dr. Jonathan 07:20 PM","start":"2019-08-07 19:20:00"}];


      constructor() { }

       ngOnInit() {}


    }

Appointments.component.ts

<mat-tab-group [selectedIndex]="selectedTab" [disableRipple]="true" animationDuration="0ms">
        <mat-tab label = "List View"> 
             <app-appointment-listing (selectTab)="getOutputval($event)" ></app-appointment-listing>
        </mat-tab>
        <mat-tab label = "Calendar">
           <app-appointment-calendar (selectTab)="getOutputval($event)"></app-appointment-calendar> 
        </mat-tab>
    </mat-tab-group>

appointment-calendar.component.html

<div class="card card-box">
   <div class="card-box-content">
      <div class="row">
         <div class="col-sm-12 text-right btn-wrap margin-btm20">
            <a [routerLink]="['/appointment/create']" class="btn btn-primary">
            <i class="fas fa-plus-circle"></i> Add New
            </a>
         </div>
      </div>
      <div class="row">
         <div class="col-md-12 col-sm-12">
            <full-calendar
            #calendar
            defaultView="dayGridMonth"
            [header]="{
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
            }"
            [plugins]="calendarPlugins"
            [weekends]="calendarWeekends"
            [events]="calendarEvents"
            (dateClick)="handleDateClick($event)"
            ></full-calendar>   
         </div>
      </div>
   </div>
</div>

请建议

Answer 1

我已经解决了这个问题，只需解决以下几点即可。

安装正确的插件

npm install --save @ fullcalendar / timegrid @ fullcalendar / interaction
导入约会-Calendar.Component.ts文件

从'@ fullcalendar / timegrid'导入timeGrid；

从“ @ fullcalendar / interaction”导入交互；
使用以下更新您的calendarPlugins列表：

calendarPlugins = [dayGridPlugin，timeGrid，交互];

Answer 2

进行调查后，我发现此问题与CSS有关。因此，我只是将.fc-widget-content .fc-scroller {height：auto！important;}放入style.css中，并解决了问题

Answer 3

这是全日历功能。当日历不可见时，Fullcalender不会渲染日历。唯一的解决方案是在选项卡更改事件上手动呈现日历。

https://fullcalendar.io/docs/render

选项卡上的角全压光机初始化问题

3 个答案: