Printing Schedule - Landscape option not displayed in Chrome print

[Janice OLeary]

Hi,

I'm evaluating the scheduler Vue component and so far so good but I am experiencing an issue with the print function. 

When I click on a print button in which I have set up in Google Chrome, it opens the print window but the landscape option only displays briefly and then disappears. 

My print button is outside the scheduler component, and I have a bound a click function to triggers the component print() function.  

I looked at the demo code but that sets up a print button when the scheduler is rendered. However, my button is outside the scheduler component. I have set the cssClass property to 'print' of the scheduler component and have imported the Print module.  Am I missing something?

Thanks

[Ravikumar Venkatesan]

Hi Janice, 

Greetings from Syncfusion support. 

We have validated your reported query “Landscape option not displayed in Chrome print” at our end based on your shared details. But, we are unable to reproduce the problem at our end for the same, we have prepared a video demo and sample for your reference which can be available from the below link. 

Sample: https://codesandbox.io/s/ej2-vue-schedule-add-remove-resource-on-printing-forked-x72zo?file=/src/App.vue 

Video demo: https://www.syncfusion.com/downloads/support/forum/163957/ze/ej2-vue-schedule-print-demo-103368811 

Kindly try the above sample and if you still facing the same problem share the below details to serve you better. 

• Share full schedule rendering code or
• Reproduce the problem in the above-shared sample or
• Share a sample that illustrates the problem which would help us to proceed further.

Regards, 

Ravikumar Venkatesan

[Janice OLeary]

Thank you and I will try out your code. It looks very similar to what I have already but I could be missing something. 

[Nevitha Ravi]

Hi Jancie, 

You are most welcome..! please try the sample and get back to us if you need any further assistance. 

Regards, 

Nevitha 

[Janice OLeary]

Hi Nevitha,

I'm afraid that I am still experiencing problems with the landscape view not appearing in my set up.  I have customised the quick information pop up and also hook into when certain actions have been completed by the scheduler but I don't believe that these should be an issue for printing.

My button looks like:

<button class="btn btn-success text-white" @click="printCalendar"><i class="fa fa-print" aria-hidden="true"></i> Print Calendar</button>

My scheduler looks like:

<ejs-schedule id='scheduler' ref="scheduleObj"
              :quickInfoTemplates='quickInfoTemplates'
              :popupOpen='onPopupOpen'
              :popupClose='onPopupClose'
              :current-view="currentView"
              :height='height' :width='width'
              :eventSettings='eventSettings'
              :dateFormat="'dd MMM yyyy'"
              :timezone="'UTC'"
              v-on:actionComplete="handleActionCompleted">

I call the function using this:

printCalendar() {
  this.$refs.scheduleObj.print();
},

Please see the attached video at what I see when I click the print button (on Chrome, but no landscape option is seen on Microsoft edge too).

Attachment: PrintCalendar_ff94b8e3.zip

[Ravikumar Venkatesan]

Hi Janice, 

Thanks for the update. 

We have validated your reported problem “I am still experiencing problems with the landscape view not appearing in my set up” at our end and regret to let you know we are unable to reproduce the problem at our end and it works as expected for the same, we have prepared a sample which can be downloaded from the below link. 

Sample: https://www.syncfusion.com/downloads/support/forum/163957/ze/ej2-vue-schedule-print-sample-953667817 

If you still facing the same problem we suggest you add the below style to resolve the problem. 

[App.vue] 

<style> 

@page { 

  size: auto; 

} 

</style> 

Kindly try the above solution and if you still facing the same problem share the below details to serve you better. 

• Reproduce the problem in the above-shared sample or
• Share a sample that illustrates the problem which would help us to proceed further.

Regards, 

Ravikumar Venkatesan 

[Janice OLeary]

The @page update did the trick!

Thank you!

[Nevitha Ravi]

Hi Janice, 

You are most welcome..! please get back to us if you need any further assistance. 

Regards, 

Nevitha