Page 1 of 1

[ANGULAR] Event Resize snaps to quater, but not from StartDate

Posted: Thu Aug 01, 2024 12:50 pm
by valereimann

I have a scheduler and when i move events, it snaps to 3, 7 ,11 (months). How it should.
When I resize an event it also snaps, but to 4, 8, 12.

I want that the resize also snap to 3, 7, 11.

My Config File has this:

  
timeResolution: { unit: 'month', increment: 4 }

And:

  snap: true

My Start Date is:

new Date(2023, 2, 1)

So for the moving of Events it works, but not for the resize. Is there any solution to this?


Re: [ANGULAR] Event Resize snaps to quater, but not from StartDate

Posted: Thu Aug 01, 2024 8:08 pm
by marcio

Hey valereimann,

Thanks for reaching out.

Could you please provide a runnable test case and some recording of the behavior that you're experiencing? By the snippets that you provided, it's difficult to point out what could be causing that behavior.


Re: [ANGULAR] Event Resize snaps to quater, but not from StartDate

Posted: Mon Aug 05, 2024 8:30 am
by valereimann

I can't really provide a runnable Test, but i can give more context:

component.html

<bryntum-scheduler-pro
  #schedulerpro
  [project]="project"

  [startDate]="getStartDate()"
  [endDate]="getEndDate()"
  
[listeners]="schedulerProConfig.listeners" [snapRelativeToEventStartDate]="schedulerProConfig.snapRelativeToEventStartDate" [snap]="schedulerProConfig.snap" [columns]="schedulerProConfig.columns!" [height]="schedulerProConfig.height" [viewPreset]="viewPreset" [features]="schedulerProConfig.features" [createEventOnDblClick]="schedulerProConfig.createEventOnDblClick" [eventRenderer]="schedulerProConfig.eventRenderer" [overlappingEventSorter]="schedulerProConfig.overlappingEventSorter" [eventLayout]="schedulerProConfig.eventLayout" [rowHeight]="schedulerProConfig.rowHeight" [tbar]="schedulerProConfig.tbar" </bryntum-scheduler-pro>

config.ts

export const configurationScheduler = new ViewPreset({
  snap: true,
  id: 'configurationSchedulerView',
  name: 'configurationSchedulerView',

  displayDateFormat: 'MM/YY',

  headers: [
    {
      unit: 'year',
      dateFormat: 'YYYY'
    },
    {
      unit: 'month',
      dateFormat: 'M'
    }
  ],

  timeResolution: {
    unit: 'month',
    increment: 4
  }
});

export const schedulerProConfig: Partial<SchedulerProConfig> = {
  snapRelativeToEventStartDate: true,
  snap: true,
  resourceStore: {
    sorters: [
      {field: 'field7'}
    ]
  },

  listeners: {
    //@ts-ignore
    beforeEventResizeFinalize: async ({context, eventRecord}) => {
      Component.updateData(
        context.startDate, context.endDate, eventRecord._data.resourceId, false, undefined, eventRecord.id, eventRecord._data.name
      );
    },
    //@ts-ignore
    beforeEventDropFinalize: async ({context}) => {
      Component.updateData(
        context.startDate, context.endDate, context.record._data.resourceId, false, undefined, context.record._data.id, context.record._data.name
      );
    },
    //@ts-ignore
    beforePaste: async ({eventRecords, assignmentRecords, resourceRecord}) => {
      const originalData = eventRecords["0"].originalData;
      const originalResourceId = assignmentRecords["0"].originalData.resourceId;

  return Component.updateData(
    originalData.startDate, originalData.endDate, resourceRecord._id, true, originalResourceId, originalData.name
  );
},
//@ts-ignore
beforeEventDelete: async ({eventRecords}) => {
  let originalDataId = eventRecords["0"].originalData.resourceId;
  Component.updateData(null, null, originalDataId, false, undefined);
},
//@ts-ignore
beforeEventSave: async ({values}) => {
  let originalDataId = values.resource._id;

  if (Component.updateData(values.startDate, values.endDate, originalDataId, true, undefined)) {
    Component.events.add(new EventElement(values.resource._id, 'Hell', values.launchBack, values.startDate));
    const resourceToUpdate = Component.resourceStore.getById(originalDataId);
    resourceToUpdate.set('launchBack', values.launchBack);
    return true;
  }
  return false;
},
  },
  
height: '350px', createEventOnDblClick: true, fillLastColumn: false, features: { eventMenu: { items: { copyEvent: { text: 'Konfiguration kopieren' }, deleteEvent: { text: 'Konfiguration löschen' }, cutEvent: false, splitEvent: false } }, eventResize: true, scheduleTooltip: false, dependencies: { allowCreate: false }, scheduleMenu: { items: { addEvent: false } }, eventDragCreate: false, eventDrag: { constrainDragToResource: true }, eventDragSelect: false, taskEdit: false, tree: true, cellEdit: false, eventEdit: { items: { nameField: false, endTimeField: false, startTimeField: false, resourceField: { weight: 2 }, field2: { type: 'date', label: 'field2', name: 'field2', weight: 3, required: false }, field3: { label: 'field3', weight: 4 }, field4: { label: 'field4', weight: 5 }, field5: { type: 'combo', label: 'field5', weight: 5, items: ['A', 'P'] } } }, cellMenu: { items: { removeRow: false } } }, rowHeight: 50, eventLayout: { type: 'none' }, barMargin: 0, resourceMargin: 0, columns: [ { field: 'field6', text: '', width: 30, sortable: false, readOnly: true, type: 'template', // @ts-ignore template: ({record}) => { if (record.inconsistency === true) { return `<svg width="30px" id="Layer_1" data-name="Layer 1" viewBox="0 0 122.89 111.55"><defs><style>.cls-1{fill:#b71616;}.cls-2{fill:#e21b1b;fill-rule:evenodd;}.cls-3{fill:#fff;}</style></defs><title>Inkonsistenz</title><path class="cls-1" d="M2.35,84.43,45.29,10.2l.17-.27h0a22.92,22.92,0,0,1,7-7.23A17,17,0,0,1,61.58,0a16.78,16.78,0,0,1,9.11,2.69,22.79,22.79,0,0,1,7,7.26c.13.21.25.42.36.64l42.24,73.34.23.44h0a22.22,22.22,0,0,1,2.37,10.19,17.59,17.59,0,0,1-2.16,8.35,16,16,0,0,1-6.94,6.61l-.58.26a21.34,21.34,0,0,1-9.11,1.74v0H17.62c-.23,0-.44,0-.66,0a18.07,18.07,0,0,1-6.2-1.15A16.46,16.46,0,0,1,3,104.26a17.59,17.59,0,0,1-3-9.58,23,23,0,0,1,1.57-8.74,8.24,8.24,0,0,1,.77-1.51Z"/><path class="cls-2" d="M9,88.76l43.15-74.6c5.23-8.25,13.53-8.46,18.87,0l42.44,73.7c3.38,6.81,1.7,16-9.34,15.77H17.62c-7.27.18-12-6.19-8.64-14.87Z"/><path class="cls-3" d="M57.57,82.7a5.51,5.51,0,0,1,3.48-1.58,5.75,5.75,0,0,1,2.4.35,5.82,5.82,0,0,1,2,1.31,5.53,5.53,0,0,1,1.62,3.55,6.05,6.05,0,0,1-.08,1.4,5.54,5.54,0,0,1-5.64,4.6,5.67,5.67,0,0,1-2.27-.52,5.56,5.56,0,0,1-2.82-2.94,5.65,5.65,0,0,1-.35-1.27,5.83,5.83,0,0,1-.06-1.31h0a6.19,6.19,0,0,1,.57-2,4.57,4.57,0,0,1,1.13-1.56Zm8.16-10.24c-.2,4.79-8.31,4.8-8.5,0-.82-8.21-2.92-29.39-2.85-37.1.07-2.38,2-3.79,4.56-4.33a12.83,12.83,0,0,1,5,0c2.61.56,4.65,2,4.65,4.44v.24L65.73,72.46Z"/></svg>`; } else { return ''; } } }, {field: 'field7', text: 'field7', width: 50, readOnly: true, sortable: false, cellCls: 'notChangable'}, {field: 'field8', text: 'field8', width: 90, sortable: false, readOnly: true, cellCls: 'notChangable'}, { collapseMode: 'toggleAll', collapsible: true, autoWidth: true, children: [ { field: 'field9', text: 'field9', width: 60, sortable: false, readOnly: true, cellCls: 'notChangable', // @ts-ignore renderer: ({value}) => { return convertDateValues(value); } }, { field: 'field10', text: 'field10', width: 100, sortable: false, readOnly: true, cellCls: 'notChangable', // @ts-ignore renderer: ({value}) => { let lciStrings: string = ''; value.forEach((e: any, index: number) => { if (e) { if (index > 0) { lciStrings += '/'; } lciStrings += convertDateValues(e); } }); return lciStrings; } }, { field: 'field11', text: 'field11', width: 60, sortable: false, readOnly: true, cellCls: 'notChangable', // @ts-ignore renderer: ({value}) => { return convertDateValues(value); } } ] }, { collapsible: true, collapseMode: 'toggleAll', autoWidth: true, children: [ { field: 'field2', text: 'field2', width: 70, sortable: false, readOnly: true, // @ts-ignore renderer: ({value}) => { return convertDateValues(value); } }, { field: 'field3', text: 'field3', width: 60, sortable: false, readOnly: true, // @ts-ignore renderer: ({value}) => { return convertDateValues(value); } }, { field: 'field4', text: 'field4', width: 70, sortable: false, readOnly: true, // @ts-ignore renderer: ({value}) => { return convertDateValues(value); } }, ] }, {field: 'field5', text: 'Status', width: 30, sortable: false, readOnly: true, cellCls: 'notChangable'} ] };

Re: [ANGULAR] Event Resize snaps to quater, but not from StartDate

Posted: Mon Aug 05, 2024 5:26 pm
by alex.l

Hi,

I reproduced in our demos, thanks for the report. We will check that deeply.
Ticket https://github.com/bryntum/support/issues/9751
You can subscribe on ticket updates to be notified when it's done.