There are cases where the eventTimesChanged event is triggered even though you want to call the onclick event of eventAction.

[tshinon]

Describe the bug

The following EventAction is defined in Component. When clicking the Font Awasome icon, I want to trigger the OnClick event of EventAction (I want to call handleEvent), but
The eventTimesChanged event is often triggered.
Is there a way to prevent the eventTimesChanged event from being triggered when clicking the icon?

actions: CalendarEventAction[] = [
{
label: '',
a11yLabel: 'Delete',
cssClass: 'trash-icon-style',
onClick: ({ event }: { event: CalendarEvent }): void => {
this.events = this.events.filter((iEvent) => iEvent !== event);
this.handleEvent('Delete', event);
},
},
{
label: '',
a11yLabel: 'Favorite',
cssClass: 'trash-icon-style',
onClick: ({ event }: { event: CalendarEvent }): void => {
this.handleEvent('Favorite', event);
},
},
{
label: '',
a11yLabel: 'Copy',
cssClass: 'trash-icon-style',
onClick: ({ event }: { event: CalendarEvent }): void => {
this.handleEvent('Copy', event);
},
},
];

＝＝＝＝＝
handleEvent(action: string, event: any): void {

if(action === 'Copy'){
let copyEvent: any;
let tmp = Object.assign({}, copyEvent);

tmp.id = 0;
tmp.color = event.color;
tmp.start = event.end;
tmp.end = addMinutes(event.end, 30);
tmp.title = event.title;
tmp.actions = this.actions;
tmp.draggable = true;
let tmpResizable: Resizable;
let resizable = Object.assign({}, tmpResizable);
resizable.beforeStart = true;
resizable.afterEnd = true;
tmp.resizable = resizable;
tmp.cssClass = 'copy-card';
tmp.activityMeisai = event.activityMeisai;

this.events.push(tmp);

this.refresh.next();

this.register(true);

} else if (action === 'Delete'){
this.mIdList = [];
const addItem = { mId: event.id.toString() };
this.mIdList.push(addItem);

let breakTimeFlg: number = 0; //休暇レコードフラグ 0:休暇レコードなし 1:全休レコード削除　2:時間休レコード削除
if(event.activityMeisai.cdNm1 === '休暇'){
  let tmpCal: CalendarList = this.getCalendars(event.start)?.calendarList.filter(cal => ((cal?.ymd === this.datePipe.transform(event.start, 'yyyy-MM-dd')))).shift();
  if(tmpCal.starttime === event.activityMeisai.startTime && tmpCal.endtime === event.activityMeisai.endTime){
    breakTimeFlg = 1;
  } else {
    breakTimeFlg = 2;
  }
}

this.dailyService.deleteCopyDelDailyMeisai(this.user.organizationId,this.user.orgCd,breakTimeFlg,true,this.mIdList).subscribe(res => {

  //エラーチェック
  if (this.isCheckError(event.start) === '') {
    //エラーがない場合は申請中にする
    this.shinseiTorisage(2, event.start);
  } else {
    //エラーがある場合は未申請にする
    this.shinseiTorisage(0, event.start);
  }
})

} else {
//お気に入り
this.openDialogFavorite(event);
}
}

＝＝＝＝＝

<mwl-calendar-week-view *ngSwitchCase="CalendarView.Week" [viewDate]="viewDate" [events]="events"
[dayStartHour]="dayStartHour" [dayEndHour]="dayEndHour" [refresh]="refresh" [snapDraggedEvents]="false"
[headerTemplate]="weekHeaderTemplate" [hourSegmentHeight]="15" [hourSegments]="4" [hourSegmentTemplate]="hourSegmentTemplate" [excludeDays]="excludeDays" (eventTimesChanged)="eventDropped($event)" (eventClicked)="eventClicked($event)" (beforeViewRender)="beforeWeekViewRender($event)" (hourSegmentClicked)="hourSegmentClicked($event.date)">

Minimal reproduction of the problem with instructions

Screenshots

Versions

• @angular/core:v14
• angular-calendar:v0.30.1
• Browser name and version:Edge v110.1587.63
  

[matts-bot]

Thanks so much for opening an issue! If you'd like to support this project, then please consider sponsoring me

[billyjov]

@tshinon would you please provide a Stackblitz demo for your issue?

[mtseng1992]

Hi all, I would like to see if there is any resolution to this. I have encountered this same issue in my project as well and noticed that this happens when CalendarEvent's draggable is set to 'true'.

Only a few time CalendarEventAction's onClick works is when you click the button fast enough before the eventTimesChanged occurs. Would like to get better insight of this issue and see any fix or resolution.

Thanks!