Our pure JavaScript Scheduler component


Post by bvteam »

We would ask for support on the following issue:

As we try to save the data selected by the user on the POP, we end up with empty data.
We have built the project on plan JS (Scheduler)

The snap of code: is in th

  editorConfig : {
            modal  : true,
            title : "Compila per inviare la richiesta",
            bbar: {
              items: [
                  {
                    reference: 'saveButton',
                    backGround   : 'green',
                    text: 'Salva',
                    handler: 'saveTask',
                    onClick({ source : combo }) {
                      saveAndCloseOnEnter : true;
                    },
                  },
                ]
              }, 
          },
        onSaveClick({ source : editor, record : eventRecord }) {
          console.log("************")
          console.log(editor) //not giving updated data
        },
Attachments
Screen Shot 2022-01-23 at 8.08.21 PM.png
Screen Shot 2022-01-23 at 8.08.21 PM.png (85.68 KiB) Viewed 387 times

Post by mats »

Can you please upload a small runnable test case so we can inspect it?


Post by bvteam »

Sure, there it is:

function schedulerWith(resources, events, stardDateEvent, endDateEvent) {
  $("#loadingDiv").hide();

  scheduler = new bryntum.scheduler.Scheduler({
    appendTo: "container",
    // requires: 'Locale.It',
    autoHeight: true,
    autoWidth: true,
    barMargin: 5,
    eventStyle : 'colored',
    rowHeight: 70,
    startDate: stardDateEvent,
    endDate: endDateEvent,
    resources: resources,
    events: events,
    tickSize: 60,
    snap : true,
    viewPreset: {
      base: "dayAndWeek",
      timeColumnWidth: 30,
    },
    eventStyle: "colored",
    columns : [
      {
          type           : 'resourceInfo',
          width          : '15em'
      }
    ],
    features: {
      eventEdit: true,
      scheduleMenu: true,
      eventEdit  : {
        items : {
            nameField : false,
            resourceField : false,
            noteField : {
                type  : 'text',
                label : 'Inserisci numero',
                name  : 'note',
                placeholder: 'Inserisci numero',
                hidden: true,
            }, 
            eventTypeField : {
                type   : 'combo',
                name   : 'eventType',
                label  : 'Motivo',
                placeholder: 'Seleziona motivo',
                // Provided items start at 100, and go up in 100s, so insert after first one
                weight : 110,
                items  : ['Example 1', 'Example 2', 'Example 3', 'Example 4', 'Example 5'],
                listeners: {
                    change: ({source: combo,value}) => {
                      if (value == 'Example 1') {
                        combo.owner.items.forEach(widget => {
                          if (widget.label == "Inserisci numero") {
                            widget.hidden = false;
                          }
                        });
                      }
                  }
                }
             },    
}, editorConfig : { modal : true, title : "Compila per inviare la richiesta", bbar: { items: [ { reference: 'deleteButton', text: 'Delete', handler: 'deleteTask', hidden : true, }, { reference: 'cancelButton', text: 'Cancella', handler: 'cancelEdit', hidden : true, }, { reference: 'saveButton', backGround : 'green', text: 'Salva', handler: 'saveTask', onClick({ source : combo }) { saveAndCloseOnEnter : true; // console.log((scheduler)); // console.log((scheduler.startDate)); // console.log((scheduler.startCell)); // console.log((scheduler.eventEdit)); }, }, ] }, }, onSaveClick({ source : editor, record : eventRecord }) { console.log("************") console.log(editor) //not giving updated data console.log(eventRecord) }, },
group: "role", headerZoom: true, nonWorkingTime: true, resourceTimeRanges: true, scheduleContext: true, timeRanges : { enableResizing : true, showCurrentTimeLine : true, showHeaderElements : true, tooltipTemplate : ({ timeRange }) => timeRange.name }, timeAxisHeaderMenu : { items : { dateRange : { text : 'Start/End', weight : 190 } } } }, tbar : [ { type : 'combo', width : 200, ref : 'presetCombo', placeholder : 'Preset', editable : false, valueField : 'id', displayField : 'name', value : 'Filtra elementi', items : ['Example 1', 'Example 2', 'Example 3', 'Example 4', 'Example 5'], picker : { maxHeight : 500 }, onChange({ source : combo }) { scheduler.zoomToLevel(combo.selected); } }, { type : 'button', ref : 'zoomInButton', icon : 'b-icon-search-plus', text : 'Zoom in', onClick() { scheduler.zoomIn(); } }, { type : 'button', ref : 'zoomOutButton', icon : 'b-icon-search-minus', text : 'Zoom out', onClick() { scheduler.zoomOut(); } } ] }); }

Post by alex.l »

I used your code snippet and I don't see onSaveClick was ever called.

Btw, since you don't have internal editor's buttons/logic, to collect data from your widgets you may use editor.widgetMap.yourCustomFieldName.value and apply it to the record. But be aware that internal save button don't just apply data on the record.

For more info how to customize EventEditor, please see https://bryntum.com/docs/scheduler/api/Scheduler/feature/EventEdit
https://bryntum.com/docs/scheduler/guide/Scheduler/customization/eventedit

and examples
https://bryntum.com/examples/scheduler/eventeditor/
https://bryntum.com/examples/scheduler/eventeditor-combos/
https://bryntum.com/examples/scheduler/custom-event-editor/

All the best,
Alex


Post Reply