p-schedule inside p-tabPanel does not render calendar view

[aaronj314]

Hi.
I'm setting an issue with p-schedule inside of a p-tabPanel component. The calendar view does not show, but only the calendar toolbar shows. If you do click the 'today' button it will show the calendar.

Here's the specs on the project:

"fullcalendar": "^2.7.2",
"moment-timezone": "^0.5.4",
"primeng": "1.0.0-beta.5",
"primeui": "4.1.10",
"@angular/common": "2.0.0-rc.1",
"@angular/compiler": "2.0.0-rc.1",
"@angular/core": "2.0.0-rc.1",
"@angular/http": "2.0.0-rc.1",
"@angular/platform-browser": "2.0.0-rc.1",
"@angular/platform-browser-dynamic": "2.0.0-rc.1",
"@angular/router": "2.0.0-rc.1",
"@angular/router-deprecated": "2.0.0-rc.1",

Here's a simple test to reproduce the issue:

import {Component, OnInit, AfterViewInit} from '@angular/core';
import {Schedule, Fieldset, TabView, TabPanel} from "primeng/primeng";

@Component({
    selector: 'test',
    template: `
        <div>
        <p-tabView>
         <!--<div class="row">-->
            <!--<div >-->
                <!--<p-schedule [events]="events" [header]="header"  [eventLimit]="4" [editable]="true" defaultDate="2016-06-12"-->
                            <!--(onDayClick)="handleDayClick($event)" (onEventClick)="handleEventClick($event)"></p-schedule>-->
                <!--</div>-->
            <!--</div>-->
    <p-tabPanel header="Profile">
        <p-fieldset legend="Bio">
            Some Bio...
        </p-fieldset>
    </p-tabPanel>
    <p-tabPanel header="Calendar">
        <div class="row">
            <div >
                <p-schedule [events]="events" [header]="header"  [eventLimit]="4" [editable]="true" defaultDate="2016-06-12"
                            (onDayClick)="handleDayClick($event)" (onEventClick)="handleEventClick($event)"></p-schedule>
                </div>
            </div>
    </p-tabPanel>
</p-tabView>
</div>
    `,
    directives: [TabPanel,TabView,Fieldset,Schedule]
})

export class TestComponent implements OnInit {
    events: any[];

    ngOnInit() {
        this.events = [
            {
                "title": "All Day Event",
                "start": "2016-06-01"
            },
            {
                "title": "Long Event",
                "start": "2016-06-07",
                "end": "2016-06-10"
            },
            {
                "title": "Repeating Event",
                "start": "2016-01-09T16:00:00"
            },
            {
                "title": "Repeating Event",
                "start": "2016-01-16T16:00:00"
            },
            {
                "title": "Conference",
                "start": "2016-01-11",
                "end": "2016-01-13"
            }
        ];
    }

    header = {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    };

    handleDayClick(){}
    handleEventClick(){}
}

If you uncomment the p-schedule inside the p-TabView the full calendar is rendered.

[NayabHussain]

@aaronj314 p-schedule is not working... it is showing blank page

[aaronj314]

Yep that's the issue. Now uncomment the p-schedule right under the p-tableView.

[ajaydev12]

@cagataycivici

I'm using v1.0.0 and p-schedule works when it is placed in the first tab. However, it does not work on other tabs. I can force it to render on the second tab by clicking on the today or by clicking on the navigation buttons,

[Ajax-ua]

Yes, it is rendered in the first (default) tab and doesn't always rendered in others. Any suggestions?

[Tracksport]

i have the same issue in angular using tabview, if i use fullcalendar in my default tab which is opened it gets rendered without a problem. But if i want to use it in a other tab is does not render correctly