[ANGULAR] Can't handle eventDrag

[SHQK]

Dear Teams,

I had define eventDrag as below. However, this is not working.
Could you please guideline me defne it?

In file component, I define event below

    eventDrag = {
        constrainDragToTimeline: false,
        draggable : false,
        listeners : {
            // Async event listeners allowing you to veto drag operations
            beforeDragMoveEnd : async({ eventRecord }) => {
                const result = await MessageDialog.confirm({
                    title   : 'Please confirm',
                    message : `New start time: ${DateHelper.format(eventRecord.startDate, 'ddd LST')}`
                });
    

            // Return true to accept the drop or false to reject it
            return result === MessageDialog.yesButton;
        },

        beforeDragResizeEnd : async({ eventRecord }) => {
            const result = await MessageDialog.confirm({
                title   : 'Please confirm',
                message : `New duration: ${DateHelper.getDurationInUnit(eventRecord.startDate, eventRecord.endDate, 'h')}h`
            });

            // Return true to accept the drop or false to reject it
            return result === MessageDialog.yesButton;
        },

        beforeDragCreateEnd : async({ eventRecord }) => {
            const result = await MessageDialog.confirm({
                title   : 'Please confirm',
                message : `Want to create an event at ${DateHelper.format(eventRecord.startDate, 'ddd LST')}?`
            });

            // Return true to accept the drop or false to reject it
            return result === MessageDialog.yesButton;
        }
    }
};

In file HTML, I define UI config as below

<bryntum-calendar
    [eventDrag]           = "eventDrag"
</bryntum-calendar>

[mats]

Look at the demo called "confirmation-dialogs" - it shows you how to do it:

const calendar = new Calendar({
    appendTo : 'container',
    date     : new Date(2020, 9, 12),

// CrudManager arranges loading and syncing of data in JSON form from/to a web service
crudManager : {
    autoLoad  : true,
    transport : {
        load : {
            url : 'data/data.json'
        }
    }
},

listeners : {
    // Async event listeners allowing you to veto drag operations
    beforeDragMoveEnd : async({ eventRecord }) => {
        const result = await MessageDialog.confirm({
            title   : 'Please confirm',
            message : `New start time: ${DateHelper.format(eventRecord.startDate, 'ddd LST')}`
        });

        // Return true to accept the drop or false to reject it
        return result === MessageDialog.yesButton;
    },

    beforeDragResizeEnd : async({ eventRecord }) => {
        const result = await MessageDialog.confirm({
            title   : 'Please confirm',
            message : `New duration: ${DateHelper.getDurationInUnit(eventRecord.startDate, eventRecord.endDate, 'h')}h`
        });

        // Return true to accept the drop or false to reject it
        return result === MessageDialog.yesButton;
    },

    beforeDragCreateEnd : async({ eventRecord }) => {
        const result = await MessageDialog.confirm({
            title   : 'Please confirm',
            message : `Want to create an event at ${DateHelper.format(eventRecord.startDate, 'ddd LST')}?`
        });

        // Return true to accept the drop or false to reject it
        return result === MessageDialog.yesButton;
    }
}
});

[SHQK]

Dear Mr. Mats,

I applied source code to file config but it not working
Could you please guide me customize eventDrag?
Thanks!

[SHQK]

I'm download trial filtering and try to apply demo called "confirmation-dialogs",
But it's still not working, may be I'm missing some declare ?

export const calendarConfig = {

listeners : {
  // Async event listeners allowing you to veto drag operations
  beforeDragMoveEnd : async({ eventRecord }) => {
      const result = await MessageDialog.confirm({
          title   : 'Please confirm',
          message : `New start time: ${DateHelper.format(eventRecord.startDate, 'ddd LST')}`
      });

      // Return true to accept the drop or false to reject it
      return result === MessageDialog.yesButton;
  },

  beforeDragResizeEnd : async({ eventRecord }) => {
      const result = await MessageDialog.confirm({
          title   : 'Please confirm',
          message : `New duration: ${DateHelper.getDurationInUnit(eventRecord.startDate, eventRecord.endDate, 'h')}h`
      });

      // Return true to accept the drop or false to reject it
      return result === MessageDialog.yesButton;
  },

  beforeDragCreateEnd : async({ eventRecord }) => {
      const result = await MessageDialog.confirm({
          title   : 'Please confirm',
          message : `Want to create an event at ${DateHelper.format(eventRecord.startDate, 'ddd LST')}?`
      });

      // Return true to accept the drop or false to reject it
      return result === MessageDialog.yesButton;
  }
  },

    @ViewChild(BryntumCalendarComponent) calendarComponent: BryntumCalendarComponent;

private calendar: Calendar;
private eventStore: EventStore;

// calendar configuration
calendarConfig = calendarConfig;

    ngAfterViewInit(): void {
        this.calendar = this.calendarComponent.instance;
        this.eventStore = this.calendar.eventStore;
    }

[saki]

Did you add

    [listeners] = "calendarConfig.listeners"

to your template?

[SHQK]

Did you add

    [listeners] = "calendarConfig.listeners"

to your template?

Why don't you describe it somewhere in your document or demo,
I spent all day trying to figure out why it didn't work
Your documents are incomplete, very confusing and too difficult to apply

[saki]

Thank you very much for your input. Based on it, we have improved our Angular Integration guide (not released yet) with new section about listening to Calendar events in Angular.

Is there any place/section in the guide that deserves an improvement?

I suppose that it works now. Just to make sure.

[SHQK]

Hi Mr. Saki,

I have another question.
I have applied example "confirmation-dialogs".
However, when I update event calendar and I click button "No" in popup confirm.
Event calendar not return to the initial position.
So what do I need to make it work

[saki]

This looks like a new problem. Would you please create a new forum post for it?

Also, attach a runnable showcase to that post please. There is no obvious problem with the code you posted so far, hence we need a code that we can run, investigate and debug.