Responsive Fullscreen Fullcalendar with p-schedule

Post Reply
gozde
Posts: 3
Joined: 08 Jun 2018, 11:09

25 Jul 2018, 12:46

We use Morpheus theme and we have a problem with p-shedule tag. We want to be fullscreen fullcalendar with using p-schedule tag in responsive mode. But height:'parent' feature of fullcalendar is not working with p-schedule . How can we fix this issue? Our code is below:

Code: Select all

this.calendarOptions = {

	  defaultView: 'agendaWeek',
          height:'parent',
      }

Code: Select all

 
 .calendar-container {
   position: relative;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   height: 100%;
 }
 

Code: Select all

<div class="calendar-container">
  <p-schedule id="calendar" locale="en" [events]="events" [options]="calendarOptions" i18n-locale></p-schedule>
</div>

merve7
Posts: 251
Joined: 12 Sep 2017, 10:44

01 Aug 2018, 08:38

Firstly, please see the example of fullcalendar in https://codepen.io/pen/
Please try again with the below codes;

Code: Select all

<div #calendar id="calendar-container">
    <p-schedule id="calendar" [events]="events" locale="en" [options]="calendarOptions" i18n-locale></p-schedule>
</div>
for css

Code: Select all

#calendar-container {
    position: fixed;
    top: 70px;
    left: 70px;
    right: 0;
    bottom: 0;
}
and for dynamic height

Code: Select all


    calendarOptions: any;
    
    @ViewChild('calendar') calendarViewChild: ElementRef;
    -------------------------------------------------------------------------------------------
    
        this.calendarOptions = {
            defaultView: 'agendaWeek',
            height: this.calendarViewChild.nativeElement
        };

Post Reply

Return to “Morpheus - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest