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?
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'}
]
};
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.
All the best,
Alex
