Our pure JavaScript Scheduler component


Post by Fred »

Hi, I need to validate the drag&drop of records based on complexe validation rules that depend on the other records of the resource to whom the user is about to drop. Moreover, there are informations related to the records that I also need to take into account.

So in the eventDrag and eventResize, I need to have access to these information in order to evaluate and return Valid

eventDrag : {
            validatorFn({ draggedRecords, newResource }) {
// draggedReccord may overlap under certain conditions depending on 
// 1. other existing records for this newResource
// 2. some record properties such as the various sub-tasks, their startDate and endDate
                return {
                    valid   : ,
                    message : 
                };

Using this demo as a base https://www.bryntum.com/examples/examples-scheduler/validation/, how can I store the event information after I've fetched them from database ? Is there a free general purpose field that I can use to pass data to the draggedReccord ? Some question for the above newResource, how can I access all events in the date range of draggedRecors for this resource ?


Post by mats »

Just do a simple for loop over the draggedRecords and match against the EventStore:

draggedRecords.forEach(r => {
      // call eventStore.getEventsInTimeSpan
});

https://bryntum.com/docs/scheduler/#Scheduler/data/mixin/EventStoreMixin#function-getEventsInTimeSpan


Post by Fred »

Thanks but https://bryntum.com/docs/scheduler/#Scheduler/data/mixin/EventStoreMixin#function-getEventsInTimeSpan outputs a list of events that doesn't change while moving the mouse with the dragged record. And I couldn't figure how to set resource when onlyAssigned is set to true.

So I tried https://bryntum.com/docs/scheduler/#Scheduler/data/mixin/EventStoreMixin#function-getEventsForResource and I can see the list of events changing while moving the dragged record.

eventDrag : {
            validatorFn({ draggedRecords, newResource }) {
                const
                    task    = draggedRecords[0],
                    allEvents = scheduler.eventStore.getEventsForResource(newResource),
                    //allEvents = scheduler.eventStore.getEventsInTimeSpan(task.startDate, task.endDate, true, true),
                    isValid = task.type === 'Fixed' ||
                        // Only C-suite people can play Golf
                        (task.type === 'Golf' && ['CEO', 'CTO'].includes(newResource.role)) ||
                        // Tasks that have type defined cannot be assigned to another resource type
                        !(task.type && newResource.role !== task.resource.role);
                    //console.log(allEvents);
                return {
                    valid   : newResource.available && isValid,
                    message : task.startDate +' @@@ ' + allEvents
                };
            }
        },

I'll have to evaluate events time ranges programmatically. But the dragged record time range (above task.startDate) remains to its initial value.

How do I get the updated dragged record date and time ?
Basically, I need data.startClockHtml and data.endClockHtml as displayed in real time in the tooltip now

eventTooltip : {
            template : data => {
                const task = data.eventRecord;
                return `
                    ${task.name ? `<div class="b-sch-event-title">${task.name}</div>` : ''}
                    ${data.startClockHtml}
                    ${data.endClockHtml}

Post Reply