Hello,
I'm trying to accomplish this: (https://bryntum.com/examples/calendar/dragfromgrid) using the Angular framework. Is there a full example somewhere of how to achieve this? The example above is using plain JavaScript. I'm looking for the same example but using Angular components. In the mean time, I'll try and post the relevant code below and wait for a response.
Package.json:
"@angular/core": "~13.1.1",
"@bryntum/calendar": "npm:@bryntum/calendar-trial@^5.0.0",
"@bryntum/calendar-angular": "^5.0.0",
"@bryntum/grid": "npm:@bryntum/grid-trial@5.0.3",
"@bryntum/grid-angular": "5.0.3",
HTML:
<div class="calendar-container" id="bryntum-container" *ngIf="calendarModel && calendarConfig">
<bryntum-calendar
#calendar
[project] = "calendarModel"
[config] = "calendarConfig"
[crudManager] = "calendarModel.crudManager!"
(onBeforeEventEditShow)="beforeEventEditShow($event)"
(onCatchAll) ="logChanges($event)"
</bryntum-calendar>
<bryntum-grid
#grid
[data]="unplannedEvents"
[config]="gridConfig"
</bryntum-grid>
</div>
unplanned-events.ts
export const unplannedEvents = [
{
id : 1,
name : 'Maintenance',
//type : 'Misc',
duration : 1,
durationUnit : 'day',
iconCls : 'b-fa b-fa-fw b-fa-cog',
eventStyle : 'colored',
cls : '',
exceptionDates: [],
allDay: false,
siteId: null,
resourceId: null,
startDate: null
},
{
id : 2,
name : 'Cleaning',
//type : 'Misc',
duration : 1,
durationUnit : 'day',
iconCls : 'b-fa b-fa-fw b-fa-broom',
eventStyle : 'colored',
cls: '',
exceptionDates: [],
allDay: false,
siteId: null,
resourceId: null,
startDate: null
},
{
id : 3,
name : 'Receiving',
//type : 'Misc',
duration : 1,
durationUnit : 'day',
iconCls : 'b-fa b-fa-fw b-fa-book',
eventStyle : 'colored',
cls: '',
exceptionDates: [],
allDay: false,
siteId: null,
resourceId: null,
startDate: null
},
{
id : 4,
name : 'Scheduled Downtime',
//type : 'Misc',
duration : 1,
durationUnit : 'day',
iconCls : 'b-fa b-fa-fw b-fa-calendar-days',
eventStyle : 'colored',
cls: '',
exceptionDates: [],
allDay: false,
siteId: null,
resourceId: null,
startDate: null
},
{
id : 5,
name : 'Repairs',
//type : 'Misc',
duration : 1,
durationUnit : 'day',
iconCls : 'b-fa b-fa-fw b-fa-tools',
eventStyle : 'colored',
cls: '',
exceptionDates: [],
allDay: false,
siteId: null,
resourceId: null,
startDate: null
},
{
id : 6,
name : 'Inspection',
//type : 'Misc',
duration : 1,
durationUnit : 'day',
iconCls : 'b-fa b-fa-fw b-fa-magnifying-glass',
eventStyle : 'colored',
cls: '',
exceptionDates: [],
allDay: false,
siteId: null,
resourceId: null,
startDate: null
}
];
Grid Config:
this._gridConfig = {
id : 'unscheduled',
title : 'Unscheduled Events',
collapsible : true,
flex : '0 0 300px',
ui : 'calendar-banner',
store : {
//readUrl : 'assets/data/unplanned.json',
autoLoad : true,
modelClass : EventModel,
durationUnit : 'h'
},
//stripeFeature : true,
//sortFeature : 'name',
features : {
sort : 'name',
group : {
field : 'type'
},
stripe : true,
cellEdit : false
},
columns : [
{
text : 'Unassigned tasks',
flex : 1,
field : 'name',
htmlEncode : false,
renderer : (data: { record: { iconCls: any; name: any; }; }): string => `<i class="${data.record.iconCls}"></i>${data.record.name}`
},
{
text : 'Duration',
width : 100,
align : 'right',
editor : false,
field : 'duration',
renderer : (data: { record: { duration: any; durationUnit: any; }; }): string => `${data.record.duration} ${data.record.durationUnit}`
}
],
rowHeight : 50
};
Here is a screenshot of what I have so far, the issue is that clicking on, dragging, and dropping, does nothing as of yet. If you need to see any additional code, please let me know.
Thank you