Hi,
I work with scheduler 4.3.0 and angular 13.
I get some bug when I drag multi events in the scheduler.
I select 2 events for example and start drag one of them, when I drag I can see only the event that I drag with the mouse, and the other is go out the scheduler inside some window overflow.
- drag.png (102.66 KiB) Viewed 640 times
This is my configuration of the scheduler.
initConfig<TJob extends EventModel, TJobClass extends typeof EventModel, TResource extends typeof ResourceModel, TResourceTimeRange extends typeof ResourceTimeRangeModel, TDependency extends typeof DependencyModel>(
jobClass: TJobClass,
resourceClass: TResource,
resourceTimeRangeClass: TResourceTimeRange,
dependencyClass: TDependency,
eventBodyTemplate: (job: TJob) => string
): IPlanitSchedulerConfig {
return {
project: {
eventStore: {
modelClass: jobClass
},
resourceStore: {
modelClass: resourceClass
},
// resourceTimeRangeStore: {
// modelClass: resourceTimeRangeClass
// },
dependencyStore: {
modelClass: dependencyClass
},
// Instantiate store for time ranges using our new classes
timeRangeStore: this.createGanttRecurringTimeRangeStore() as Store,
},
infiniteScroll: true,
fillLastColumn: true,
destroyStores: true,
useInitialAnimation: 'fade-in',
startDate: new Date(new Date().getTime() - 1 * this.month),
endDate: new Date(new Date().getTime() + 1 * this.month),
multiEventSelect: true,
createEventOnDblClick: false, // Stop the create event ondouble click.
zoomOnTimeAxisDoubleClick: false,
eventStyle: 'border',
// Columns parameters.
columns: [
{
type: 'resourceInfo',
field: 'name',
text: 'Resources',
cls: 'resource-column',
showImage: false,
showEventCount: false,
allowOverlap: false,
enableHeaderContextMenu: false,
headerRenderer: (event: { column: ResourceInfoColumn, headerElement: HTMLElement }) => {
event.headerElement.innerHTML = '<filter-header class="header"></filter-header>';
},
renderer(event: { cellElement: HTMLElement, row: Row, record: GanttResource, value: string }) {
event.cellElement.style.fontSize = event.record.fontSize;
event.cellElement.style.fontWeight = '400';
event.cellElement.style.paddingLeft = event.record.paddingLeft;
event.cellElement.style.paddingRight = event.record.paddingRight;
event.cellElement.innerHTML = `<div class="resource-bullet"></div> <span class="scheduler-resource-name">${event.value}</span>`;
const child = (event.cellElement.firstElementChild as HTMLElement);
child.style.backgroundColor = event.record.color;
},
}
],
eventBodyTemplate,
selectionMode: {
row: true,
cell: true,
multiSelect: true,
rowCheckboxSelection: false,
checkbox: false,
showCheckAll: false
},
features:
{
timeAxisHeaderMenu: {
processItems: (event: { contextRecord, eventElement, items }) => {
event.items.dateRange = false;
event.items.currentTimeLine = false;
event.items.eventsFilter = false;
}
},
eventCopyPaste: false,
rowCopyPaste: false,
resourceTimeRanges: true,
cellEdit: false, // Not allow edit resource.
eventEdit: false,
sort: false,
dependencies:
{
allowCreate: false, // Not allow create dependencies.
},
dependencyEdit: {
showLagField: false
},
cellTooltip: false,
scheduleTooltip: false, // Mouse move on scheduler tooltip.
eventDragCreate: false, // Not create job in drag event.
eventDrag: {
constrainDragToTimeline: false,
showTooltip: false// Disable job drag tooltip.
},
// Create a hover jobs tooltip new format.
eventTooltip: {
template: (
event: {
tip: Tooltip,
eventRecord: EventModel,
startDate: Date,
endDate: Date,
startText: string,
endText: string,
startClockHtml: string,
endClockHtml: string,
}) => {
return `<div class="b-sch-event-tooltip">
${event.eventRecord.get('toolTiptext')}
</div>`;
}
},
timeRanges: {
showCurrentTimeLine: false,
},
stickyEvents: false,
scheduleContext: false
}
};
The scheduler initialize:
<bryntum-scheduler
*ngIf="schedulerConfig"
[id]="windowState.id"
[ngClass]="'window-main-content scheduler'+windowState.id"
[class.idle-up]="idleInFront"
[columns]="schedulerConfig.columns"
[multiEventSelect]="schedulerConfig.multiEventSelect"
[infiniteScroll]="schedulerConfig.infiniteScroll"
[eventStyle]="schedulerConfig.eventStyle"
[eventBodyTemplate]="schedulerConfig.eventBodyTemplate"
[startDate]="schedulerConfig.startDate"
[endDate]="schedulerConfig.endDate"
[createEventOnDblClick]="schedulerConfig.createEventOnDblClick"
[zoomOnTimeAxisDoubleClick]="schedulerConfig.zoomOnTimeAxisDoubleClick"
[fillLastColumn]="schedulerConfig.fillLastColumn"
[selectionMode]="schedulerConfig.selectionMode"
[useInitialAnimation]="schedulerConfig.useInitialAnimation"
[destroyStores]="schedulerConfig.destroyStores"
[timeAxisHeaderMenuFeature]="schedulerConfig.features.timeAxisHeaderMenu"
[resourceTimeRangesFeature]="schedulerConfig.features.resourceTimeRanges"
[cellEditFeature]="schedulerConfig.features.cellEdit"
[eventEditFeature]="schedulerConfig.features.eventEdit"
[sortFeature]="schedulerConfig.features.sort"
[dependenciesFeature]="schedulerConfig.features.dependencies"
[dependencyEditFeature]="schedulerConfig.features.dependencyEdit"
[cellTooltipFeature]="schedulerConfig.features.cellTooltip"
[scheduleTooltipFeature]="schedulerConfig.features.scheduleTooltip"
[eventDragCreateFeature]="schedulerConfig.features.eventDragCreate"
[eventDragFeature]="schedulerConfig.features.eventDrag"
[eventTooltipFeature]="schedulerConfig.features.eventTooltip"
[stickyEventsFeature]="schedulerConfig.features.stickyEvents"
[eventCopyPasteFeature]="schedulerConfig.features.eventCopyPaste"
[rowCopyPasteFeature]="schedulerConfig.features.rowCopyPaste"
[timeRangesFeature]="schedulerConfig.features.timeRanges"
[project]="schedulerConfig.project"
[resources]="resources"
[events]="events"
[resourceTimeRanges]="resourceTimeRanges"
[dependencies]="dependencies"
[timeRanges]="timeRanges"
[presets]="presets"
(mousemove)="zoomScrollAction($event)">
</bryntum-scheduler>
After deep debug I found that if I turn the constrainDragToTimeline flag to true it works fine.
- constrainDragToTimeline false.png (46.18 KiB) Viewed 640 times
I tried to create a demo for you without success.
Please I must your help I can't understand what I do wrong (maybe it angular 13).
