Our pure JavaScript Scheduler component


Post by pmiklashevich »

Please copy all code above. This line does what you want!

const resources = eventRecord.resources?.length ? eventRecord.resources : (resourceRecord ? [resourceRecord] : []);
Pavel Miklashevich - Core Developer

Post by eugenem »

yes!


Post by eugenem »

thank you for your assistance!

I'll probably have more questions on Sunday...


Post by pmiklashevich »

Feel free to ask. Just create a new thread for each new question you have and we are glad to help! Cheers!

Pavel Miklashevich - Core Developer

Post by eugenem »

Something broke with this custom editor, and don't understand what. I've even downloaded 4.0.8 and connected everything from scratch, and it still fails when I open the editor. I don't know even how to debug this...

If I disable the custom editor it works fine.

I get this error:
https://www.dropbox.com/s/vv1s6hvh80ysrh6/annotation%202021-02-11%20181258.jpg?dl=0

And this is my code:

    <bry-scheduler #scheduler2
                   [height]="height - 50"
                   [columns]="schedulerConfig.columns"
                   [timeRangesFeature]="schedulerConfig.features.timeRanges"
                   [eventEditFeature]="schedulerConfig.eventEditFeature"
                   [crudManager]="schedulerConfig.crudManager"
                   [startDate]="range.startDate"
                   [endDate]="range.endDate"
                   [headerZoomFeature]="true"
                   [stripeFeature]="true"
                   mode="horizontal"></bry-scheduler>


  schedulerConfig = {
    crudManager: {
      resourceStore : {
        // Add some custom fields
        groupers: [
          // type could be 'Machines', 'Operators', etc
          { field: 'type', ascending: false }
        ]
      },
      eventStore: {
        // Add a custom field and redefine durationUnit to default to hours
        //fields: ['dt', { name: 'durationUnit', defaultValue: 'hour' }]
        fields: ['companyId']
    },
      autoLoad: true,
      //autoSync: true,
      transport: {
        load: {
          url: '/api/Scheduler/GetB',
          headers: {
            'Authorization': `Bearer `
          },
        }, sync: {
          url: '/api/Scheduler/SaveB',
          headers: {
            'Authorization': `Bearer `
          },
        }
      }
    },

resourceImagePath: '../_shared/images/users/',
appendTo: 'container',
eventStyle: 'rounded',
startDate: '2020-03-23',
endDate: '2020-03-26',
features: {
  timeRanges: {
    narrowThreshold: 10,
    enableResizing: true,
    showCurrentTimeLine: true,
    showHeaderElements: true
  },
  resourceNonWorkingTime: true,
  cellEdit: true,
  filter: true,
  regionResize: true,
  dependencies: true,
  dependencyEdit: true,
  percentBar: true,
  group: 'type',
  sort: 'name',
  eventTooltip: {
    header: {
      title: 'Information',
      titleAlign: 'start'
    },
    tools: [
      {
        cls: 'b-fa b-fa-trash',
        handler: function () {
          this.eventRecord.remove();
          this.hide();
        }
      },
      {
        cls: 'b-fa b-fa-edit',
        handler: function () {
          this.schedulerPro.editEvent(this.eventRecord);
        }
      }
    ]
  }
},
nonWorkingTimeFeature: {
  highlightWeekends: true
},
eventEditFeature: {
  // Add extra widgets to the event editor
  items: {
    resourceField: false,
    
    facilities: {
      label: 'Facilities',
      type: 'combo',
      store: null,
      name: 'facilities',
      valueField: 'id',
      displayField: 'name',
      multiSelect: false,
      weight: 220,
      highlightExternalChange: false
    }
  }
},

columns: [
  {
    type: 'resourceInfo',
    text: 'Name',
    showEventCount: true,
    width: 220,
    validNames: null
  },
],
  };

  constructor(
    private backend: BackendService,
    private console: ConsoleLoggerService,
    private auth: AuthenticationService
  ) {
    const token = this.auth.currentUserValue.token;

// var url = "/api/Scheduler";

this.schedulerConfig.crudManager.transport.load.headers.Authorization = 'Bearer ' + token;
this.schedulerConfig.crudManager.transport.sync.headers.Authorization = 'Bearer ' + token;
  }

  async ngOnInit() {
    if (!this.immLookups) this.immLookups = await this.backend.loadImmutableLookupsAsync();

this.lookups = await this.backend.loadSchedulerLookupsAsync();

this.facilities = [...this.immLookups.testFacilities];
this.facilities.splice(0, 4);

this.resourceStore = new ResourceStore({
  data: [
    ...this.immLookups.testFacilities.map(m => ({ ...m, id: 'F_' + m.id, type: 'facilities' })),
    ...this.immLookups.staff.map(m => ({ ...m, id: 'S_' + m.id, type: 'staff' }))
  ],
});

this.schedulerConfig.eventEditFeature.items.facilities.store = this.resourceStore.makeChained(
  record => !record.isSpecialRow && record.type === 'facilities',
  null,
  {
    // Need to show all records in the combo. Required in case resource store is a tree.
    excludeCollapsedRecords: false
  }
);
  }

  ngAfterViewInit() {
    // install beforeEventEdit listener
    /*
    this.schedulerPro.schedulerInstance.addListener('beforeEventEditShow', ({ eventRecord, resourceRecord, editor }) => {
      const { facilities, staff } = editor.widgetMap;
      const resources = eventRecord.resources?.length ? eventRecord.resources : (resourceRecord ? [resourceRecord] : []);

  facilities.value = resources.filter(r => r.type === 'facilities');
  staff.value = resources.filter(r => r.type === 'staff');
});
*/
this.schedulerPro.schedulerInstance.addListener('beforeEventSave', ({ source: scheduler, eventRecord, values, resourceRecords }) => {
  const selectedFacilities = [values.facilities]; // single select
  const selectedStaff = values.staff; // multi select
  const selectedResourceIds = [...selectedFacilities, ...selectedStaff];

  // Assigning resources to event does not work here, because event editor reassigns the resources internally.
  // Therefore mutate the resourceRecords param which is used internally.
  const selectedResources = this.schedulerPro.schedulerInstance.resourceStore.query(record => selectedResourceIds.includes(record.id), true);
  resourceRecords.splice(0, resourceRecords.length, ...selectedResources);
});
  }


Post by alex.l »

Hi eugenem,

Please open a new thread for your question. Here is our Support policy: viewtopic.php?f=35&t=772

Thank you,
Alex


Post by eugenem »

you're right, I can try to break your samples...

but my trial expired and now I can't do anything :(

any way to extend the trial?

I really love the library, but I need to make a POC before presenting it to management to approve buying. And I didn't even get to Scheduler Pro features to evaluate.


Post by mats »

Please email sales@bryntum.com and we’ll help you extend the trial

Tired of debugging javascript errors in web applications? Try our powerful error logging service RootCause


Post by eugenem »

ok, I've found an error. strange, I thought it was working like this before...


Post Reply