Discuss anything related to web development but no technical support questions


Post by kanimozhi »

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
Task.jpg (71.05 KiB) Viewed 2486 times

Post by mats »

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
        }));
    }

Post by kanimozhi »

Hi, Thanks for this solution . Will try this.

Post by kanimozhi »

Hi, I tried this solution . But this doesn't meets our requirement. Now am trying for alternate solution. For that i need some clarifications.

Can i define overlap(true/false) and draggable(true/false) for some specified events alone based on condition.

Post by pmiklashevich »

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

Pavlo Miklashevych
Sr. Frontend Developer


Post Reply