I am working on angular7 project and having the issue with full calendar. I want to show the calendar on tabs but angular full calendar is not initialize on tab active. please refer the following screenshot
I am using material tab https://material.angular.io/components/tabs/overview and for full calendar i have integrated https://github.com/fullcalendar/fullcalendar-example-projects/tree/master/angular this.
Code
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>
Please suggest
After doing the investigation I found that this issue is related to css. So I just put the .fc-widget-content .fc-scroller {height: auto !important;} in style.css and resolved the issue