Support Forum
Hi, We have to highlight two dates (Estimated and Actual Date)in one event. Also the Estimated date will be constant and the Actual date will be adjustable. Screen shot attached for your reference . Please provide the sample code to achieve this case in JavaScript.
- Attachments
-
- Task.jpg (71.05 KiB) Viewed 2485 times
You should study our API a bit to learn that you can have any markup inside an event bar. Please see this demo: https://bryntum.com/examples/scheduler/nestedevents/
// eventBodyTemplate is used to render markup inside an event. It is populated using data from eventRenderer()
eventBodyTemplate : values => values.map(value => `
<div class="nested" style="left: ${value.left}px;width: ${value.width}px">
${value.name}
</div>
`).join(''),
// eventRenderer is here used to translate the dates of nested events into pixels, passed on to the eventBodyTemplate
eventRenderer({eventRecord, tplData}) {
// getCoordinateFromDate gives us a px value in time axis, subtract events left from it to be within the event
const dateToPx = (date) => 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(nestedEvent => ({
left : dateToPx(DateHelper.add(eventRecord.startDate, nestedEvent.startOffset)),
width : dateToPx(DateHelper.add(eventRecord.startDate, nestedEvent.endOffset)),
name : nestedEvent.name
}));
}
Hello,
isDraggable checks if event is draggable based on draggable field value. You can either change draggable value based on your conditions, or override isDraggable getter to take your conditions into account.
There is no overlap field/config available for event model. There are 2 configs related to overlap thing and both are configured for scheduler. The first is allowOverlap config. It validates event's data so if allowOverlap is false events can't overlap. Please see Validation demo for details. The second is eventLayout config. If set to 'none' scheduler shows events in one line overlapped. Please see Layouts demo for details.
Best,
Pavel
isDraggable checks if event is draggable based on draggable field value. You can either change draggable value based on your conditions, or override isDraggable getter to take your conditions into account.
There is no overlap field/config available for event model. There are 2 configs related to overlap thing and both are configured for scheduler. The first is allowOverlap config. It validates event's data so if allowOverlap is false events can't overlap. Please see Validation demo for details. The second is eventLayout config. If set to 'none' scheduler shows events in one line overlapped. Please see Layouts demo for details.
Best,
Pavel
Pavlo Miklashevych
Sr. Frontend Developer