1. Home
  2. Forum
  3. Vue
  4. print

print

i want to print a TimeLine WEEK - but the component just print the days I can see - and not all Days!

how can I solve this problem ??

I use Chrome



3 Replies
AK Ashokkumar Karuppasamy Syncfusion Team March 12, 2024 02:23 PM UTC

Hi Isabelle Fuchs,

When the schedule layout is displayed, only the visible layout will be printed. If you want all days of the schedule to be printed, then need to customize the print schedule styles and use the timeScale to meet your requirements. The attached code snippet and sample are provided for your reference.

Sample: https://stackblitz.com/edit/vue-schedule-print-with-option-nuyqxe?file=src%2FApp.vue,src%2Fmain.js

.e-print-schedule.e-schedule .e-timeline-view .e-date-header-wrap table col,

.e-print-schedule.e-schedule .e-timeline-view .e-content-wrap table col {

  width: 15px ;

}


    onPrintIconClick: function () {

      let scheduleObj = this.$refs.ScheduleObj.ej2Instances;

      let printOptions = {

        cssClass: 'e-print-schedule',

        height: 'auto',

        rowAutoHeight: true,

        showHeaderBar: false,

        showTimeIndicator: false,

        showWeekNumber: false,

        width: '100%',

        views: [

          {

            option: scheduleObj.currentView,

            timeScale: { enable: true, interval: 720, slotCount: 6 },

          },

        ],

 


Regards,
Ashok


IF Isabelle Fuchs March 13, 2024 07:14 AM UTC

with the schedule.print -the print is not working..



when I use the HTML PrinT. 

export function printVueElement(element: HTMLElement, printTitle: string, scale: number = 1) {
const winOptions =
"toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=800," +
"height=600,top=100,left=" +
(screen.width - 400) / 2;
const win = window.open("", "Title", winOptions);
if (win) {
const css = [...window.document.head.getElementsByTagName("style")]
.map((cc) => cc.outerHTML)
.join("");
const stylesheets = [...document.head.getElementsByTagName("link")]
.filter((l) => l.rel === "stylesheet")
.map((l) => l.outerHTML)
.join("");

win.document.write(
"<!DOCTYPE html><html><head><title>" +
printTitle +
"</title><meta charset='utf-8'>" +
stylesheets +
css +
"<style>" +
"body { transform: scale(" + scale + "); transform-origin: top left; }" + // Scale the body content
"</style>" +
"</head>"
);
win.document.write(
"<body>" +
element.outerHTML +
"<" +
"script>setTimeout(() => " +
"{" +
" window.print(); window.close();\r\n" +
"}" +
", 100);" +
"</" +
"script>" +
"</body></html>"
);
win.focus();
return true;
} else {
showSnackbar({
text: "Bitte Popups erlauben!",
duration: 3000,
color: "red",
});
}
return false;
}


it is much better - I just need to scale the schedule... can you help me also with this problem?






AK Ashokkumar Karuppasamy Syncfusion Team March 14, 2024 03:32 PM UTC

Hi Isabelle Fuchs,

Q1) with the schedule.print -the print is not working.

Based on the shared details, we were unable to reproduce the issues or problems you mentioned. The default schedule is working properly. We have attached the validated sample. We kindly request that you provide the following details, as this information will greatly assist us in understanding and resolving the issue effectively.


• Shared all schedule-related codes.

• Please share a sample that replicates the issue.

• share issues replicated video.

Sample: https://stackblitz.com/edit/vue-schedule-print-with-option-nuyqxe?file=src%2FApp.vue,src%2Fmain.js

Q2) when I use the HTML PrinT. it is much better - I just need to scale the schedule... can you help me also with this problem?

We've noted that the last update is only visible within the viewport. Additionally, it appears that the time scale does not support HTML printing. If you need the full day to be visible in the schedule, customization of the view layout using the time scale is necessary to ensure that the full day is visible.

Regards,
Ashok


Loader.
Up arrow icon