Your forum won't let me upload the mp4 so here is a link to it.
https://www.softwareanswers.com/bryntum/bryntum.mp4
function ScheduleBoardController()
{
this.Scheduler = null;
}
ScheduleBoardController.prototype.init = function ()
{
var self = this;
bryntum.scheduler.PresetManager.registerPreset('oscar',
{
displayDateFormat: 'DD-MMM-YY h:mm a',
shiftIncrement: 1,
shiftUnit: 'day',
tickWidth: 20,
timeResolution: {
unit: 'minute',
increment: 5
},
headerConfig: {
bottom: {
unit: 'day',
renderer(start,end,headerConfig,index)
{
var weekday = bryntum.scheduler.DateHelper.format(start, 'dd');
if (weekday == 'Su')
{
return '<font style="color:red">' + weekday.substring(0, 1) + '</font>';
}
return weekday.substring(0, 1);
}
},
middle: {
unit: 'day',
renderer(start, end, headerConfig, index)
{
var day = bryntum.scheduler.DateHelper.format(start, 'D');
switch (day)
{
case '10':
case '20':
case '30':
return '<span style="writing-mode: vertical-rl;text-orientation: upright;">' + day + '</span>';
default:
return '<span style="padding-top:17px">' + day + '</span>';
}
}
},
top: {
unit: 'month',
renderer(start, end, headerConfig, index)
{
return '<span style="padding-top:3px">' + bryntum.scheduler.DateHelper.format(start, 'MMMM YYYY') + '</span>';
}
}
},
columnLinesFor: 'bottom'
});
self.Scheduler = new bryntum.scheduler.Scheduler(
{
appendTo: self.ParentContainerID,
minHeight: '10em',
rowHeight: 40,
startDate: new Date(2018, 11, 1),
endDate: new Date(2019, 1, 31),
viewPreset: 'oscar',
resourceMargin: 2,
features:
{
stripe: true,
eventResize:
{
validatorFn: function (e)
{
console.log('validating resize'); return true;
}
},
eventEdit:
{
eventdblclick: function (e)
{
alert('test');
}
}
},
columns: [{
type: 'rownumber',
hidden:true
}, {
text: 'Id',
field: 'id',
width: 50,
hidden: true
}, {
text: 'Unit',
field: 'UnitCode',
flex: 1
}, {
text: 'Type',
field: 'UnitType',
width: 30
}
],
listeners:
{
beforeLoadApply: function beforeLoadApply(_ref)
{
var response = _ref.response;
response.events.rows.forEach(function (event)
{
return event.agenda.forEach(function (nestedEvent)
{
nestedEvent.startDate = new Date(nestedEvent.startDate);
nestedEvent.endDate = new Date(nestedEvent.endDate);
nestedEvent.startOffset = bryntum.scheduler.DateHelper.diff(new Date(event.startDate), nestedEvent.startDate);
nestedEvent.endOffset = bryntum.scheduler.DateHelper.diff(nestedEvent.startDate, nestedEvent.endDate);
});
});
}
},
eventBodyTemplate: function eventBodyTemplate(values)
{
return values.map(function (value)
{
return "\n <div class=\"nested\" style=\"left: ".concat(value.left, "px;width: ").concat(value.width, "px\">\n ").concat(value.name, "\n </div>\n ");
}).join('');
},
eventRenderer: function eventRenderer(_ref2)
{
var _this = this;
var eventRecord = _ref2.eventRecord;
var tplData = _ref2.tplData;
// getCoordinateFromDate gives us a px value in time axis, subtract events left from it to be within the event
var dateToPx = function dateToPx(date)
{
return _this.getCoordinateFromDate(date) - tplData.left;
}; // Calculate coordinates for all nested events and put in an array passed on to eventBodyTemplate
return (eventRecord.agenda || [eventRecord]).map(function (nestedEvent)
{
return {
left: dateToPx(bryntum.scheduler.DateHelper.add(eventRecord.startDate, nestedEvent.startOffset)),
width: dateToPx(bryntum.scheduler.DateHelper.add(eventRecord.startDate, nestedEvent.endOffset)),
name: nestedEvent.name
};
});
}
});
self.loadData();
}
ScheduleBoardController.prototype.loadData = function ()
{
var self = this;
try
{
self.Scheduler.resources = [
{ id: 1, UnitCode: 'UAB-001', UnitType: '1/1' },
{ id: 2, UnitCode: 'UAB-002', UnitType: '2/1' },
{ id: 3, UnitCode: 'UAB-003', UnitType: '1/2' },
{ id: 4, UnitCode: 'UAB-004', UnitType: '2/3' },
{ id: 5, UnitCode: 'UAB-005', UnitType: '3/3' },
{ id: 6, UnitCode: 'UAB-006', UnitType: '3/3' },
{ id: 7, UnitCode: 'UAB-007', UnitType: '3/2' },
{ id: 8, UnitCode: 'UAB-008', UnitType: '3/1' },
{ id: 9, UnitCode: 'UAB-009', UnitType: '2/2' },
{ id: 10, UnitCode: 'UAB-010', UnitType: '2/2' },
{ id: 11, UnitCode: 'UAB-011', UnitType: '2/2' },
{ id: 12, UnitCode: 'UAB-012', UnitType: '3/3' },
{ id: 13, UnitCode: 'UAB-013', UnitType: '3/3' },
{ id: 14, UnitCode: 'UAB-014', UnitType: '3/3' },
{ id: 15, UnitCode: 'UAB-015', UnitType: '3/3' },
{ id: 16, UnitCode: 'UAB-016', UnitType: '3/3' },
{ id: 17, UnitCode: 'UAB-017', UnitType: '3/3' },
{ id: 18, UnitCode: 'UAB-018', UnitType: '3/3' },
{ id: 19, UnitCode: 'UAB-019', UnitType: '3/3' },
{ id: 20, UnitCode: 'UAB-020', UnitType: '3/3' },
{ id: 21, UnitCode: 'UAB-021', UnitType: '3/3' },
{ id: 22, UnitCode: 'UAB-022', UnitType: '3/3' },
{ id: 23, UnitCode: 'UAB-023', UnitType: '4/1' },
{ id: 24, UnitCode: 'UAB-024', UnitType: '1/1' },
{ id: 25, UnitCode: 'UAB-025', UnitType: '1/1' }
];
self.Scheduler.events = [
{
resourceId: 1, startDate: new Date(2018, 11, 01), endDate: new Date(2018, 11, 20), stuff: 'stuff 1', name: 'Make coffee', eventColor: 'cyan', eventStyle: 'colored',
agenda: []
},
{
resourceId: 2, startDate: new Date(2018, 11, 04), endDate: new Date(2018, 11, 06), stuff: 'stuff 2', name: 'Meeting', eventColor: 'green', eventStyle: 'colored',
agenda: []
},
{
resourceId: 6, startDate: new Date(2018, 11, 04), endDate: new Date(2018, 11, 06), stuff: 'stuff 6', name: 'Meeting', eventColor: 'purple', eventStyle: 'colored',
agenda: []
},
{
resourceId: 10, startDate: new Date(2018, 11, 1), endDate: new Date(2018, 11, 12), stuff: 'stuff 3', name: 'Robbe 10', eventColor: 'red', eventStyle: 'colored',
agenda: [
{ name: "Agenda", startDate: "2018-12-01T10:00:00", endDate: "2018-12-03T11:00:00" },
{ name: "Conclusion", startDate: "2018-12-07T15:00:00", endDate: "2018-12-08T16:00:00" }
]
},
{
resourceId: 25, startDate: new Date(2018, 11, 1), endDate: new Date(2018, 11, 12), stuff: 'stuff 3', name: 'Robbe', eventColor: 'red', eventStyle: 'colored',
agenda: [
{ name: "Agenda", startDate: "2018-12-01T10:00:00", endDate: "2018-12-03T11:00:00" },
{ name: "Conclusion", startDate: "2018-12-07T15:00:00", endDate: "2018-12-08T16:00:00" }
]
}
];
self.Scheduler.resourceStore.load();
self.Scheduler.eventStore.load();
}
catch (e)
{
console.log('loadData: ' + e);
}
}