Content Cut Off and Blank Second Page when print with big datasets

[taauntik]

Forum Post

I hope this message finds you well. I am writing to report an issue I have encountered with the calendar print feature in your product.

Issue Description:

When attempting to print a calendar that contains a large number of events, I have observed that the content on the first page is cut off, and the second page appears blank. This issue significantly impacts the usability of the print feature, as important information is lost and the output is not as expected.

Steps to Reproduce:

1. Populate the calendar with a large number of events.
2. Use the print feature to print the calendar.
3. Observe that the content on the first page is cut off and the second page is blank.

Expected Behavior:

• The calendar should be printed across multiple pages if necessary, with all events properly displayed and no content cut off.

Actual Behavior:

• The first page contains cut-off content.
• The second page is blank.

Related screenshot:

Reproducible here https://bryntum.com/products/calendar/examples/bigdataset/

1. Select Month View
2. Check the Auto Row Height checkbox in the toolbar
3. Click on the Print Button

Ues this Code to reproduce the issue

import { Calendar } from '../../build/calendar.module.js?477294';
import shared from '../_shared/shared.module.js?477294';

const calendar = new Calendar({
    appendTo : 'container',

    // Start life looking at this date
    date : new Date(2020, 9, 12),

    features : {
        weekExpander : true,
        print : true,

        // In our event editor, we'd like to match-any resource names
        // not just match from start.
        eventEdit : {
            items : {
                resourceField : {
                    primaryFilter : {
                        operator : '*'
                    }
                }
            }
        }
    },

    // A block of configs which is applied to all modes.
    modeDefaults : {
        // Allows us to see details in a crowded day
        zoomOnMouseWheel : true
    },

    // List isn't included by default.
    // Include it using its default configuration.
    modes : {
        list : true,
        year : {
            // When hovering a date, show a tip which shows the event count count or "No events".
            // Align it on the right side.
            eventCountTip : {
                showNoEvents : true,
                align        : 'l-r'
            }
        }
    },

    // Add a new item to the top toolbar.
    // Weight controls the order it is inserted at.
    tbar : {
        items : {
            autoRowHeight : {
                type     : 'checkbox',
                label    : 'Auto row height',
                weight   : 600,
                disabled : true,

                // "up." means resolve in owner will call on the Calendar
                onChange : 'up.onAutoRowHeightChanged'
            },
            print : {
                type    : 'button',
                text    : 'Print',
                color   : 'b-orange b-raised',
                icon    : 'b-fa b-fa-print',
                cls     : 'b-print-button',
                tooltip : 'Print the currently active view',
                // "up" means it is resolved on an ancestor. Will find on the Calendar
                onClick : 'up.print'
            }
        }
    },

    // CrudManager arranges loading and syncing of data in JSON form from/to a web service
    crudManager : {
        transport : {
            load : {
                url : 'data/data.json'
            }
        },
        autoLoad : true
    },

    sidebar : {
        items : {
            datePicker : {
                showEvents : 'dots',
                maxDots    : 12,

                // When hovering a date with events, a tip shows the count
                eventCountTip : true
            },

            // This is the "ref" of the new field
            resourceFilterFilter : {
                // Inserts just before the resourceFilter List
                weight : 190,

                // Shows a clear trigger
                clearable : true,

                label                : 'Filter resources',
                placeholder          : 'Filter resources',
                labelPosition        : 'above',
                type                 : 'textfield',
                keyStrokeChangeDelay : 100,

                // "up." means resolve in owner will call on the Calendar
                onChange : 'up.onResourceFilterFilterChange'
            }
        }
    },

    // Called as the resourceFilterFilter's onChange handler
    onResourceFilterFilterChange({ value }) {
        // A filter with an id replaces any previous filter with that id.
        // Leave any other filters which may be in use in place.
        this.widgetMap.resourceFilter.store.filter({
            id       : 'resourceFilterFilter',
            filterBy : r => r.name.toLowerCase().startsWith(value.toLowerCase()) // a function which returns true to include the record
        });
    },

    onActiveItemChange({ activeItem }) {
        // Only meaningful if we are on the month view
        this.widgetMap.autoRowHeight.disabled = activeItem.modeName !== 'month';
    },

    // If it gets set programatically, sync the UI
    onAutoRowHeightChanged({ checked }) {
        this.modes.month.autoRowHeight = checked;
    },

    // Collapsing a week row back to its flexed height turns off the autoRowHeight
    // setting, ensure our UI reflects this so user is able to turn it back on.
    onWeekFlex() {
        const { autoRowHeight } = this.widgetMap;

        // Suspend events so that this doesn't go through to onAutoRowHeightChanged.
        autoRowHeight.suspendEvents();
        autoRowHeight.checked = false;
        autoRowHeight.resumeEvents();
    }
});

[ghulamghousdev]

+1 here: https://forum.bryntum.com/viewtopic.php?p=154349#p154349