Hi
I have a mode in my calendar that is implemented from the demo:
https://bryntum.com/products/calendar/examples/calendar-scheduler/
i have also implemented the drag unsceduled events from this demo:
https://www.bryntum.com/products/calendar/examples/frameworks/angular/drag-from-grid/dist/drag-from-grid/
Everything works fine in the normal calendar modes based on this implementation, but it will not work for the scheduler / timeline view.
what do i need to implement for the drag from gid into the timeline / scheduler view ?
Timeline mode Config:
timeline : {
type: 'scheduler',
// Used by the Calendar's mode selector button
displayName: 'Timeline',
// Used by resourceInfo column to base src for image field:
// resourceImagePath: '../_shared/images/users/',
// Change default event style for Scheduler to better match Calendars look
eventStyle: 'calendar',
// Calendar does not use initial animations, match that
useInitialAnimation: false,
columns: [
{type: 'resourceInfo', field: 'name', text: 'Staff/Resource', width: 175}
],
features: {
nonWorkingTime: true,
timeRanges: true,
resourceTimeRanges: true,
},
workingTime: {
fromHour: 7,
toHour: 22
},
// Uncomment to change the date range of the time axis
// range : 'month',
// Uncomment to change how much the next / previous buttons shift the time axis
stepUnit : 'day',
barMargin: 3,
viewPreset: {
base: 'hourAndDay',
headers: [{
unit: 'day',
dateFormat: 'ddd MM/DD'
}, {
unit: 'hour',
dateFormat: 'HH:mm'
}]
},
// Custom eventRenderer to match style used by Calendar
eventRenderer(eventRecord: any, renderData: any) {
if (eventRecord.isInterDay) {
return StringHelper.encodeHtml(eventRecord.eventRecord.name);
}
return {
class: 'b-cal-event-body',
children: [
{
class: 'b-event-header',
children: [
{
class: 'b-event-time',
text: DateHelper.format(eventRecord.startDate, 'LST')
}
]
}, {
class: 'b-cal-event-desc',
text: eventRecord.name
}
]
};
}
}
},Grid config :
export const gridConfig : Partial<GridConfig> = {
id : 'unscheduled',
title : 'Unscheduled Events',
collapsible : true,
flex : '0 0 300px',
ui : 'calendar-banner',
features : {
stripe : true,
sort : 'name',
cellEdit : false,
group : false
},
columns : [
{
text : 'Unassigned tasks',
flex : 1,
field : 'name',
htmlEncode : false,
renderer : ({ record } : { record:EventModel }) =>
StringHelper.xss`<i class="${record.iconCls}"></i>${record.name}`
},
{
text : 'Duration',
width : 100,
align : 'right',
editor : false,
field : 'duration',
renderer : ({ record } : { record:EventModel }) =>
`${record.duration} ${record.durationUnit}`
}
],
rowHeight : 50
};
