Our pure JavaScript Scheduler component


Post by Exigo »

Hi Bryntum

When exporting to pdf the last row is cut off (multi-page scaled to page export). Looking through the html sent to the export server, then it seems that the style "#b-schedulerpro-1" has a height that is to low, about 13px's lower than needed. Setting this to 100% or just adding the 13px fixes the issue for us, however this breaks other export types (single page etc) + all grid exports.

We have tried following your demo for exporting without luck.

Attachments
pdf_pages.pdf
(409.57 KiB) Downloaded 73 times
Last edited by Exigo on Wed Dec 08, 2021 2:20 pm, edited 1 time in total.

Post by Maxim Gorkovsky »

Hello.

it seems that the style "#b-schedulerpro-1" has a height that is to low, about 13px's lower than needed

Hard to tell what's wrong just by looking at the PDF result and I cannot replicate this behavior locally. Please provide runnable test case. You can try modifying one of our angular demos.


Post by Exigo »

Hi Maxim, I have tried adding our code to your code editor but it wont allow me to make the resources nested, so I haven't tested it with your export server. Below I have added our scheduler config (with your export server attached) + a quick fn for generating some nested data that follow a basic structure of our resources.

    const scheduler = new Scheduler({
        appendTo   : 'container',
        weekStartDay: 1,
        eventStyle: 'none',
        readOnly: true,
        workingTime: { fromDay: 0, toDay: 7 },
        fillTicks: false,
        forceFit: false,
        multiEventSelect: false,
        useInitialAnimation: false,
        createEventOnDblClick: false,
        eventRenderer: ({ eventRecord, resourceRecord, renderData }) => {
          const name = eventRecord?.name ?? '';
          const showPct = true;
          const pct = (Math.random() * 100).toFixed(0) + '%'; 
          const html = `
            ${name} ${showPct ? pct : ''}
            ${
              showPct ?
              `<span style="position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: linear-gradient(to right, rgba(0, 0, 0, 0.7) ${pct}, rgba(0, 0, 0, 0.1) 0%);"></span>` :
              ''
            }
          `;
    
return html; }, responsiveLevels: { small: { levelWidth: 600, rowHeight: 25, barMargin: 2, resourceMargin: 2 }, normal: { levelWidth: '*', rowHeight: 35, barMargin: 3, resourceMargin: 3 } }, columns : [ { type: 'tree', tree: true, text: 'Locations', field: 'name', width: 200 } ], eventStore: new EventStore({ data: events }), resourceStore: new ResourceStore({ tree: true, transformFlatData: true, data: resources }), features : { stickyEvents: false, timeAxisHeaderMenu: false, dependencies: false, eventEdit: false, tree: true, stripe: false, eventDrag: { constrainDragToResource: true }, taskEdit: false, eventDragCreate: false, nonWorkingTime: true, group: false, eventResize: { showExactResizePosition: true }, timeRanges: { showCurrentTimeLine: true }, scheduleMenu: { disabled: true }, eventTooltip: true, dependencies : { disabled : true }, pdfExport : { exportServer: 'https://dev.bryntum.com:8082', headerTpl, footerTpl } }, tbar : [ { type : 'button', toggleable : true, icon : 'b-fa-square', pressedIcon : 'b-fa-check-square', text : 'Show dependencies', onToggle({ pressed }) { scheduler.features.dependencies.disabled = !pressed; } }, { ref : 'exportButton', type : 'button', icon : 'b-fa-file-export', text : 'Export', onClick() { scheduler.features.pdfExport.showExportDialog(); } } ] });
const nestedGenerator = (count) => {
    const res = [];

for (let j = 0; j < count; j++) {
    const id = (j+1).toString();
    const next = {
        id: id,
        parentId: null,
        expanded: true,
        name: 'Location ' + id
    };

    res.push(next);

    console.log(next)

    for (let k = 0; k < 5; k++) {
        const childId = (j+1) + '.' + (k+1);
        const nextChild = {
            id: childId,
            parentId: id,
            expanded: true,
            name: 'Location ' + childId
        }

        res.push(nextChild);

        console.log(nextChild);
    }
}

return res;
}

Another thing to note is that we have added some custom paperFormats to fit our needs.

    PaperFormat.A2 = { width : 16.54, height : 23.4 };
    PaperFormat.A1 = { width : 23.4, height : 33.1 };
    PaperFormat.A0 = { width : 16.54, height : 23.4 };

This is the default export config we are using to create the bug.

  const exportConfig = {
    scheduleRange: 'currentview',
    rowsRange: 'all',
    exporterType: 'multipagevertical',
    paperFormat: 'A3',
    orientation: 'landscape',
    sendAsBinary: true,
    repeatHeader: true,
    fileFormat: 'pdf',
    columns: component.columns.map(c => { return { id: c.id, hidden: c.hidden } }).filter(c => !c.hidden).map(c => c.id)
    ...etc with header, footer and exportServer
  };

We use the material theme with this extra css on top (mostly to get a different color) (code below is in scss)

@import "@bryntum/schedulerpro/schedulerpro.material.css";
@import '@bryntum/grid/grid.material.css';

.b-mask-content {
    background-color: var(--color-primary);
}

// * SCHEDULER
.b-tree-leaf-cell, .b-tree-parent-cell {
    .b-tree-cell-inner, .b-tree-expander {
        .b-tree-icon, .b-icon-tree-expand, .b-icon-tree-collapse {
            &::before {
                color: var(--color-primary) !important;
            }
        }
    }
}

.b-grid-body-container {
    outline: none !important;
}

.b-highlighting .b-sch-event-wrap .b-sch-event {
    opacity: 0.2;
}

.b-highlighting .b-sch-event-wrap .b-sch-event.b-match {
    opacity: 1;
}

.b-sch-event-wrap {
    overflow: visible !important;
}

.b-hover .b-sch-event-wrap .b-sch-event.b-match {
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.b-active {
    color: var(--color-primary);
}

.b-grid-cell.b-focused::after {
    border: 2px solid var(--color-primary) !important;
}

.b-sch-event-wrap:not(.b-milestone-wrap).b-active .b-sch-event {
    outline: 1px solid var(--color-primary);
    outline-offset: 2px;
}

// * GRID
.b-grid-header-container {
    z-index: 2;
}

.b-panel-body-wrap {
    display: flex;
    flex: 1;
}

.b-grid-panel-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

Lastly we dont use your angular components for our project, but instead have opted for the base js implementation. I have removed the "angular" tag from the ticket.

Hope this information helps a bit more :)


Post by Maxim Gorkovsky »

I tried applying your code and styles but it didn't help. Rows are exported fine, sometimes too much even and footer is out of the view. I opened a ticket for this: https://github.com/bryntum/support/issues/3874
Could you try modifying not the online demo but one from the distibution? Like examples/export one?
Also if you disable repeatHeaderoption do you still see the issue?


Post by Exigo »

Hi Maxim, we have tried removing the repeat header without any luck. I will try to recreate it in a new project using the example. Do you know if the server code has been updated within the last 2 months, since we haven't updated our server?


Post by Maxim Gorkovsky »

Server code was not updated recently, no


Post Reply