Our pure JavaScript Scheduler component


Post by dev team »

Issue.
We're currently having an issue regarding the excel export functionality.

The filters applied to the Scheduler work just fine to filter out events and resources (i.e. the Scheduler only shows the filtered resources and events as desired), however, we find the events and resources unfiltered when in the excel document once exported.

We would like to have the filtered exported data.

Here is the Scheduler specified like this (there are lots of properties defined here, however for now I've omitted most of them), we have the excelExporter configuration defined here:

    this.scheduler = new Scheduler({
      appendTo: this.host,
      startDate,
      endDate,
      height,
      crudManager,
      listeners: { ... },
      features: {
        eventEdit: true,
        dependencies: false,
        dependencyEdit: false,
        eventCopyPaste: false,
        eventDrag: true,
        eventResize: true,
        headerZoom: true,
        eventTooltip: { ... },
        eventMenu: { ... },
        excelExporter: {
          zipcelx
        },
      },

});

Additionally, we have a button that triggers a flow to perform the export, we currently just export all the data fields from the event instances.

  private excelExport(): Promise<void> {
    const fields = [];

for (const fieldName in this.scheduler.eventStore.modelClass.fieldMap) {
  if (this.scheduler.eventStore.modelClass.fieldMap[fieldName].persist !== false) {
    fields.push({text: fieldName, field: fieldName});
  }
}

return this.scheduler.features.excelExporter.export({
  filename : 'JobScheduleResults',
  exporterConfig: {
    columns: this.schedulerConfiguration.columns.map((column) => {
      return {
        text: column.text,
        field: column.field,
      }
    }),
    eventColumns : fields
  }
});
  }

Post by marcio »

Hey dev team,

I added your configuration to our basic Angular demo, like this

app.component.html

<!-- BryntumDemoHeader component is used for Bryntum example styling only and can be removed -->
<bryntum-demo-header></bryntum-demo-header>

<div class="demo-toolbar align-right">
    <bryntum-checkbox
        label="Stripe Feature"
        checked="false"
        (onAction)="handleToggle($event, 'stripe')"
    ></bryntum-checkbox>
    <bryntum-checkbox
        label="Column Lines Feature"
        checked="true"
        (onAction)="handleToggle($event, 'columnLines')"
    ></bryntum-checkbox>
    <button text="" (click)="handleExport($event)">
        Export Excel
    </button>
</div>
<bryntum-scheduler
    #scheduler
    [barMargin]                 = "schedulerConfig.barMargin"
    [columns]                   = "schedulerConfig.columns"
    [endDate]                   = "schedulerConfig.endDate"
    [events]                    = "schedulerConfig.events"
    [mode]                      = "schedulerConfig.mode"
    [resourceImagePath]         = "schedulerConfig.resourceImagePath"
    [resources]                 = "schedulerConfig.resources"
    [resourceTimeRanges]        = "schedulerConfig.resourceTimeRanges"
    [resourceTimeRangesFeature] = "schedulerConfig.features.resourceTimeRanges"
    [rowHeight]                 = "schedulerConfig.rowHeight"
    [startDate]                 = "schedulerConfig.startDate"
    [viewPreset]                = "schedulerConfig.viewPreset"
    [stripeFeature]             = "stripe"
    [columnLinesFeature]        = "columnLines"
    [excelExporterFeature]      = "schedulerConfig.features.excelExporter"
    [filterFeature]             = "true"
</bryntum-scheduler>

app.component.ts

/**
 * App component script
 */
import { AfterViewInit, Component, ViewChild, ViewEncapsulation } from '@angular/core';
import { BryntumSchedulerComponent } from '@bryntum/scheduler-angular';
import { Scheduler } from '@bryntum/scheduler';
import { schedulerConfig } from './app.config';

@Component({
    selector      : 'app-root',
    templateUrl   : './app.component.html',
    styleUrls     : ['./app.component.scss'],
    encapsulation : ViewEncapsulation.None
})
export class AppComponent implements AfterViewInit {

public schedulerConfig: any = schedulerConfig;
private scheduler: Scheduler;

columnLines = { disabled : false };
stripe = { disabled : true };

@ViewChild(BryntumSchedulerComponent, { static : true }) schedulerComponent: BryntumSchedulerComponent;

ngAfterViewInit(): void {
    // Store Scheduler instance
    this.scheduler = this.schedulerComponent.instance;
}

handleToggle({ checked } : {checked : boolean}, feature : string): void {
    this[feature] = { disabled : !checked };
}

handleExport() {
    const fields = [];

    for (const fieldName in this.scheduler.eventStore.modelClass.fieldMap) {
        if (this.scheduler.eventStore.modelClass.fieldMap[fieldName].persist !== false) {
            fields.push({ text : fieldName, field : fieldName });
        }
    }

    return this.scheduler.features.excelExporter.export({
        filename       : 'JobScheduleResults',
        exporterConfig : {
            columns : this.schedulerConfig.columns.map((column) => {
                return {
                    text  : column.text,
                    field : column.field
                };
            }),
            eventColumns : fields
        }
    });
}
}

app.config.ts

import { SchedulerConfig } from '@bryntum/scheduler';
import zipcelx from 'zipcelx';

/**
 * Scheduler config file
 */

const
    resources          = [
        { id : 'r1', name : 'Mike' },
        { id : 'r2', name : 'Linda' },
        { id : 'r3', name : 'Don' },
        { id : 'r4', name : 'Karen' },
        { id : 'r5', name : 'Doug' },
        { id : 'r6', name : 'Peter' },
        { id : 'r7', name : 'Sam' },
        { id : 'r8', name : 'Melissa' },
        { id : 'r9', name : 'John' },
        { id : 'r10', name : 'Ellen' }
    ],
    events             = [
        {
            resourceId : 'r1',
            startDate  : new Date(2017, 0, 1, 10),
            endDate    : new Date(2017, 0, 1, 12),
            name       : 'Click me',
            iconCls    : 'b-fa b-fa-mouse-pointer'
        },
        {
            resourceId : 'r2',
            startDate  : new Date(2017, 0, 1, 12),
            endDate    : new Date(2017, 0, 1, 13, 30),
            name       : 'Drag me',
            iconCls    : 'b-fa b-fa-arrows-alt'
        },
        {
            resourceId : 'r3',
            startDate  : new Date(2017, 0, 1, 14),
            endDate    : new Date(2017, 0, 1, 16),
            name       : 'Double click me',
            eventColor : 'purple',
            iconCls    : 'b-fa b-fa-mouse-pointer'
        },
        {
            resourceId : 'r4',
            startDate  : new Date(2017, 0, 1, 8),
            endDate    : new Date(2017, 0, 1, 11),
            name       : 'Right click me',
            iconCls    : 'b-fa b-fa-mouse-pointer'
        },
        {
            resourceId : 'r5',
            startDate  : new Date(2017, 0, 1, 15),
            endDate    : new Date(2017, 0, 1, 17),
            name       : 'Resize me',
            iconCls    : 'b-fa b-fa-arrows-alt-h'
        },
        {
            resourceId : 'r6',
            startDate  : new Date(2017, 0, 1, 16),
            endDate    : new Date(2017, 0, 1, 19),
            name       : 'Important meeting',
            iconCls    : 'b-fa b-fa-exclamation-triangle',
            eventColor : 'red'
        },
        {
            resourceId : 'r6',
            startDate  : new Date(2017, 0, 1, 6),
            endDate    : new Date(2017, 0, 1, 8),
            name       : 'Sports event',
            iconCls    : 'b-fa b-fa-basketball-ball'
        },
        {
            resourceId : 'r7',
            startDate  : new Date(2017, 0, 1, 9),
            endDate    : new Date(2017, 0, 1, 11, 30),
            name       : 'Dad\'s birthday!',
            iconCls    : 'b-fa b-fa-birthday-cake',
            style      : 'background-color : teal; font-size: 18px'
        }
    ],
    resourceTimeRanges = [
        {
            id         : 1,
            resourceId : 'r1',
            startDate  : '2017-01-01T13:00',
            endDate    : '2017-01-01T14:00',
            name       : 'Lunch'
        },
        {
            id             : 7,
            resourceId     : 'r2',
            startDate      : '2017-01-01T06:00',
            endDate        : '2017-01-01T11:00',
            name           : 'AFK (uses timeRangeColor)',
            timeRangeColor : 'red'
        },
        {
            id         : 9,
            resourceId : 'r9',
            startDate  : '2017-01-01T06:00',
            endDate    : '2017-01-01T20:00',
            name       : 'Parental leave (custom CSS)',
            cls        : 'custom'
        }
    ]
;

export const schedulerConfig: Partial<SchedulerConfig> = {

resources        : resources,
events           : events,
startDate        : new Date(2017, 0, 1, 6),
endDate          : new Date(2017, 0, 1, 20),
viewPreset       : 'hourAndDay',
rowHeight        : 50,
barMargin        : 5,
multiEventSelect : true,

mode : 'horizontal',
// mode : 'vertical',

columns : [
    { text : 'Name', field : 'name', width : 130 }
],

resourceImagePath : 'assets/users/',

features : {
    resourceTimeRanges : true,
    excelExporter      : {
        zipcelx
    }
},
resourceTimeRanges : resourceTimeRanges
};

And the export worked correctly with filtered data (export only filtered data). So, would you please assemble a sample project with your configuration with the issue that you described and share it here for us to check?? We couldn't reproduce it in our demos.

Best regards,
Márcio


Post by dev team »

Hi,

Thank's for the reply.

I have put together a sample project regarding the issue, specifically with the eventStore (we found the filters applied to the ResourceStore that filters out resources does match what's exported)

We have replication steps here additionally to outline the issue:
1) initialize and populate EventStore with events
2) apply a filter to eventStore via addFilter function
3) attach EventStore to Scheduler
4) export excel via Scheduler

Expected Results:
An excel document containing event store items filtered by filters applied to the eventStore.

Actual Results:
An excel document containing all unfiltered events.

Note That we applied a dummy filter in the sample project to the eventStore on lines 250-253 in src/components/job-scheduler/job-scheduler.tsx.

Also to make you aware this is a StencilJS project.

bryntum-scheduler-pro-stenciljs.zip
Sample Project
(95.69 KiB) Downloaded 24 times

Post by marcio »

Hey dev team,

Thanks for the example, I created a ticket to investigate and fix if needed something on our side, check the updates here https://github.com/bryntum/support/issues/6035

Best regards,
Márcio


Post by dev team »

Hi,

Just wondering if there has been any update on this, the GitHub issue has been open since January and is still an issue for us.


Post by alex.l »

Hi,

Sorry for delay, we've marked the issue as high-prio and notified a developer to check that. From now the process should go much faster.

All the best,
Alex


Post Reply