Scheduler print view settings and virtualization
Hello Syncfusion team,
I am currently struggling with the print options of your scheduler control. Therefore I have a few questions:
1. Is there a documentation that explains each property of the print options? Some of them are not self-explanatory, but I can't find proper descriptions in your API documentation. I am speaking about these:
function onPrintIconClick(): void { let printModel: ScheduleModel = { agendaDaysCount: 14, cssClass: 'e-print-schedule', currentView: scheduleObj.currentView, dateFormat: 'dd-MMM-yyyy', enableRtl: false, endHour: '18:00', firstDayOfWeek: 1, firstMonthOfYear: 0, group: {}, height: 'auto', locale: scheduleObj.locale, maxDate: scheduleObj.selectedDate, minDate: scheduleObj.getCurrentViewDates()[0], readonly: true, resources: [], rowAutoHeight: false, selectedDate: new Date(), showHeaderBar: false, showTimeIndicator: false, showWeekNumber: false, showWeekend: false, startHour: '06:00', timeFormat: 'HH', timeScale: { enable: true }, width: 'auto', workDays: [1, 2, 3, 4, 5], workHours: { highlight: true, start: '10:00', end: '20:00' } }; scheduleObj.print(printModel); }
2. In your examples here https://ej2.syncfusion.com/documentation/schedule/exporting?_gl=1*1qths02*_gcl_au*NjQ2NDk5MTEzLjE3MjI5MjUxNTY.*_ga*NzAyMDQ3MzUyLjE3MjI5MjUxNTY.*_ga_41J4HFMX1J*MTcyMzAxMTIyOC42LjEuMTcyMzAxMTQ2MS4wLjAuMA..#using-a-print-method-with-options the print preview doesn't show all the appointments and some of your examples (at other demo pages) are showing an empty page first and only at the second page appointments are visible.
3. I had to tweak the scheduler a bit to be able to implement it for my use case. The scheduler is set to 5 (or 7) days, starting at 0:00 and ending at 23:59, with an interval of 1440, display type of "TimelineWeek" and active virtualization. Unfortunately I can't manage to fit the scheduler on a landscape A4 paper. I tried several things:
- in the printModel I set the width to 100%
- force the width with CSS: .e-print-schedule .e-resource-cells, .e-print-schedule .e-work-cells { width: calc(100% / 242) !important; } (242 is the amount of individual cells based on my example view's days, timespan and interval).
- Tried different combinations of the printModel properties
var printModel = {
dateFormat: 'dd-MMM-yyyy',
enableRtl: false,
firstDayOfWeek: 1,
firstMonthOfYear: 0,
height: 'auto',
readonly: true,
showHeaderBar: false,
showTimeIndicator: false,
showWeekNumber: false,
showWeekend: false,
timeScale: { enable: true },
width: '100%',
workDays: [1, 2, 3, 4, 5],
};
Is there anything else I need to add to show everything properly?
3. The scheduler has a lot of resource groups and a lot of appointments. When I click on print, I only see a page that is half filled with only some of the resource groups and appointments.
Actual scheduler:
I can't provide images of my scheduler example view, as I can't get the screenshots under 100kb unfortunately, so I can only describe you, that the scheduler has 6 parent resource cells and a total of 10 child resource cells. For a performance test, 500 appointments have also been added to the view and virtualization has been activated.
Without scrolling in my native resolution, the first parent resource cell I am seeing is "Abf. Konserve Geld", but the print preview starts with "Abf. Konserve Grün", which is the second parent resource cell. Also 3 parent resource cells and 4 child resource cells after "KEL - Abf. Cons. ENT Lila" (which are outside of the visible area) are ignored in the print view.
Scheduler in print preview:
Here you can see, that only some of the resource cells and appointments are printed. 500 appointments distributed over 5 days should cause more than one page that is only half filled.
To summarize: despite virtualization and the high number of appointments, how can I configure the print view to display the week in such a way that the width fits on an A4 sheet and all appointments and resource cells are taken into account?
Please note that the scheduler is deeply embedded in my project and therefore I cannot provide a code example.
Thanks in advance.
Kind regards
Hi ZMI Dev,
Query 1:
Is there a documentation that explains each property of the print options? Some
of them are not self-explanatory, but I can't find proper descriptions in your
API documentation. I am speaking about these:
Refer the below
shared api links for properties In print options.
print with options UG: https://ej2.syncfusion.com/javascript/documentation/schedule/exporting#using-a-print-method-with-options
Schedule
Api’s: https://ej2.syncfusion.com/javascript/documentation/api/schedule
Query 2: The print preview doesn't show all the
appointments and some of your examples (at other demo pages) are showing an
empty page first and only at the second page appointments are visible.
We suspect that you
are using a lower version of Syncfusion packages. You can upgrade the
Syncfusion packages to the latest version to resolve the blank page issue while
printing the scheduler. Refer the below shared image and sample for your
reference.
Output screenshot:
note: empty blank page does not occur.
Query 3: I had to tweak the scheduler a bit to be able to implement it
for my use case. The scheduler is set to 5 (or 7) days, starting at 0:00 and
ending at 23:59, with an interval of 1440, display type of
"TimelineWeek" and active virtualization. Unfortunately I can't
manage to fit the scheduler on a landscape A4 paper. I tried several things:
You can set the
timeScale interval to "1440" while printing the scheduler with the
print model to show all days in the timelineWeek view as shown in the below
shared code snippet. Refer to the image below for your reference.
[app.component.ts]
|
function onPrintIconClick(): void { let printModel: ScheduleModel = { timeScale: { enable: true, interval:1440 }, }; scheduleObj.print(printModel); }
|
Query 4:
The scheduler has a lot of resource groups and a lot of appointments. When I
click on print, I only see a page that is half filled with only some of the
resource groups and appointments.
In your sample, you
have enabled virtualization. When printing, only the virtual rows rendered in
the DOM will be printed. Therefore, you can disable virtualization while
printing the scheduler to show all resources and dates. Please refer to the
image below for your reference.
[app.component.ts]
|
function onPrintIconClick(): void { let printModel: ScheduleModel = { views: [{ option: 'TimelineWeek', allowVirtualScrolling: false, enableLazyLoading: false }], }; scheduleObj.print(printModel); }
|
Sample
link: https://stackblitz.com/edit/drwcrm-2nqdeq?file=index.ts,index.html
Don't hesitate to get in touch if you require further help or more information.
Regards,
Vijay
Thank you for your reply. I tried your suggestions, unfortunately that made everything worse.
My print options now look like this:
function onRotatedRosterPrintClick() {
var printModel = {
views: [{ option: 'TimelineWeek', allowVirtualScrolling: false, enableLazyLoading: false }],
dateFormat: 'dd-MMM-yyyy',
enableRtl: false,
firstDayOfWeek: 1,
firstMonthOfYear: 0,
height: 'auto',
readonly: true,
showHeaderBar: false,
showTimeIndicator: false,
showWeekNumber: false,
showWeekend: false,
timeScale: { enable: true, interval: 1440 },
width: '100%',
workDays: [1, 2, 3, 4, 5],
};
window.PerfScheduleObj.print(printModel);
}
Now the print preview looks like this:
The problems are:
- The scheduler's width still doesn't fit to the page. I can still only see until 13:00 instead of the whole day.
- the appointment names got removed and (I think) replaced by default values?
- The appointment colors are gone
- The print view only has one page. The rest is missing. Instead a horiziontal and a vertical scrollbar is visible now.
Hi ZMI Dev,
Thanks for reaching out to us.
Query 1: The scheduler's
width still doesn't fit to the page. I can still only see until 13:00 instead
of the whole day.
Query 4: The print view only
has one page. The rest is missing. Instead a horiziontal and a vertical
scrollbar is visible now.
we tried and checked our last shared sample with your shared print model
options. If Interval can be applied while print the scheduler dates can be
properly visible in printing.
.Refer
the shared sample for your reference. Therefore, we kindly request that you
provide the following details, as this information will greatly assist us in
understanding and resolving the issue effectively.
- Could you share the issue replicating sample?
- Replicate the issue in our below shared sample.
- Could you share the entire schedule related code snippet,
Query 2: the appointment names got removed and
(I think) replaced by default values?
Appointment data in
the schedule can be rendered correctly. Please provide a detailed explanation
of your query, as it is unclear what you are referring to. If possible, share
any relevant screenshots or images to facilitate further validation and understanding.
Query 3: The appointment colors are
gone
In the print window you can enable the Background graphics to show the
appointment with respective color.
Sample link: https://stackblitz.com/edit/drwcrm-f263zw?file=index.ts,datasource.json
Don't hesitate to get in touch if you require further help or more
information.
Regards,
Vijay
Thank you for your reply. I will need time to try your suggestions and I'm unsure if I can provide a sample.
In your example are appointments heavily shifted:
I've added a few appointments manually and after clicking on print you can see, that the appointments for Steven2, Michael2 and Nancy3 are not aligned with the columns. They are shifted to the right.
in the non print view the appointments are aligned correctly:
Is it possible to automatically enable Background graphics within the print settings?
Further Infos:
In the following example there is also a problem with the Portrait print function. In the preview you can't see the appointments. If you switch to landscape they are shown.
https://stackblitz.com/edit/drwcrm-biabzm?file=index.ts
Hi ZMI Dev,
The issue occurs because the print width option is set to 100%, causing the schedule in the print window to also scale to 100%, adjusting to the available width and impacting the resizing of the work cells. To address this, we recommend setting the width of the schedule in pixels (px) rather than using percentage (%) or auto. This adjustment ensures that appointments are correctly positioned in the print preview.
Sample link:
https://stackblitz.com/edit/print-isssues-qcl9cx?file=index.ts
https://stackblitz.com/edit/drwcrm-loof8a?file=index.ts
Regards,
Vijay
A4 format in print view:
A3 format in print view:
Hi Mario Maier,
In the cases of A4 and A3, we suggest adjusting the print window with
more options, such as customizing the scale value, to better meet your
requirements. Please try this suggestion and let us know if you need any
further assistance.
Before:
After:
Regards,
Ashok
