Conditional drags crashes scheduler

Asked by Byron D
3 years ago.

I am creating conditional drag where if I drag a scheduled or unscheduled item to the calendar where the date is in the past. A confirmation box will appear if I click no the item should return to its original position, otherwise it would proceed as normal. When I click no item doesn't return to original position and it freezes in new location and is greyed out. Any help?

onEventMove: async (args) => { 
        args.async = true;
        const groupSplit = args.newResource.split('-');
      
     if (Number(args.e.data.group_id) !== Number(groupSplit[1]) ){
        args.preventDefault();
        DayPilot.Modal.alert('Error occurred while assigning the task. Please assign task to correct group.');
       
        return;
    }

    const date = new Date(args.newStart) // date of item

    const now = new Date().setHours(0, 0, 0, 0); // today's date

    if (now > date) {

        const modal = await DayPilot.Modal.confirm("Are you sure?");

        if (!modal.canceled) {
            args.loaded()
            calendarApp.assignTaskDnD(args.e, args.newStart, args.newEnd, args.newResource, args);  
           
        }

        // item doesn't return to original position. It freezes in new location and is grayed out.
        args.preventDefault();
    } else {
        args.loaded();
        
        calendarApp.assignTaskDnD(args.e, args.newStart, args.newEnd, args.newResource, args);
    }
},

how-to javascript

Answer posted by Dan Letecky [DayPilot]
3 years ago.

There are a couple of issues with this example:

1. If you set args.async = true, you must call args.loaded() in every code path. Otherwise the dragging operation will remain active.

The first "if" block returns without calling args.loaded().
If you cancel the modal dialog (modal.canceled === true) it doesn't call args.loaded().

2. If you want to cancel the default action, you must call args.preventDefault() before args.loaded().

3. The JavaScript Date objects can't be compared using ">" operator. You need to compare the millisecond value returned by getTime().

Direct comparison using < > and === operators is only supported for DayPilot.Date objects. DayPilot.Date was intentionally designed to work this way:
https://api.daypilot.org/daypilot-date-class/

You could rewrite it like this to make it work:

onEventMove: async (args) => { 
     const groupSplit = args.newResource.split('-');
     if (Number(args.e.data.group_id) !== Number(groupSplit[1]) ){
        args.preventDefault();
        DayPilot.Modal.alert('Error occurred while assigning the task. Please assign task to correct group.');
        return;
    }

    if (DayPilot.Date.today() > args.newStart) {
        args.async = true;
        const modal = await DayPilot.Modal.confirm("Are you sure?");
        if (modal.canceled) {
            args.preventDefault();
        }
        else {
            calendarApp.assignTaskDnD(args.e, args.newStart, args.newEnd, args.newResource, args);             
        }
        args.loaded();
    } else {
        calendarApp.assignTaskDnD(args.e, args.newStart, args.newEnd, args.newResource, args);
    } 
},

This question is more than 1 month old and has been closed. Please create a new question if you have anything to add.