Avoid Drag Drop and Resize on certain data.Subjects events

[Arturo Martinez]

Good afternoon i have allowed on my scheduler to rezise events and drag and drop them though the Scheduler, however i have certain type of events which i dont want to be able to resize nor drag&drop how can i archive this?

This events have a Subject unique string like 'Blocked'.

Also when i drag and drop an event, its allowing me to put the event on the header group column which should ot have any event, how can i avoid this?

<ejs-schedule

#scheduleObj

width='100%'

cssClass='timeline-resource-grouping'

height='auto'

allowSwiping="false"

[selectedDate]="selectedDate"

[group]="group"

[workDays]="workDays"

[eventSettings]="eventSettings"

[timeScale]="timeScale"

[currentView]="currentView"

(actionComplete)="onActionComplete($event)"

(renderCell)="onRenderCell($event)"

(dataBound)="onDataBound()"

(popupOpen)="onPopupOpen($event)"

(dragStart)="onDragStart($event)"

(dragStop)="onDragStop($event)"

(eventRendered)="onEventRendered($event)"

(resizeStop)="onResizeStop($event)"

[quickInfoOnSelectionEnd] = "true"

>

<ng-template #dateHeaderTemplate let-data>

<div class="date-text"></div>

<div [innerHTML]="getDateHeaderText(data.date)"></div>

</ng-template>

<ng-template #resourceHeaderTemplate let-data let-index>

<div style="height: 100%; display: flex; align-items: center; justify-content: start;">

<div [matMenuTriggerFor]="menu" class="btn btn-icon btn-custom btn-icon-muted">

<img class="thumbnail" *ngIf="isChildNode(data)" [src]="getIconClass(data.resourceData.text)" alt="{{data.resourceData.ImageName}}" style="height: 57px; width: 30px;" />

</div>

<mat-menu #menu="matMenu">

<ng-container *ngFor="let estatus of estatusArray">

<button (click)="onStatusChange(data.resourceData.text, estatus.Descripcion)" mat-menu-item>

<span>{{estatus.Descripcion}}</span>

</button>

</ng-container>

</mat-menu>

{{data.resourceData.text}}

</div>

</ng-template>

<e-resources>

<e-resource

field='ProjectId'

title='Choose Project'

[dataSource]='tipoHabGroupDataSource'

[allowMultiple]='allowMultiple'

name='Type'

textField='text'

idField='id'

colorField='color'

>

</e-resource>

<e-resource

field='TaskId'

title='Category'

[dataSource]='habitacionPorTipoDataSource'

[allowMultiple]='allowMultiple'

name='Rooms'

textField='text'

idField='id'

groupIDField='groupId'

colorField='color'

>

</e-resource>

</e-resources>

<e-views>

<e-view option="TimelineDay" [interval]="dayInterval"></e-view>

<e-view option="TimelineWeek"></e-view>

<e-view option="TimelineWorkWeek"></e-view>

<e-view option="TimelineMonth"></e-view>

</e-views>

</ejs-schedule>

[Vijay Ravi]

Hi Arturo,

We prepare the angular sample for your requirement for preventing dragging and resize functionalities for specific event subject value To implement the specified functionalities in your Syncfusion Scheduler,
 

1. Prevent Drag and Drop or Resize for Specific Events
 

To prevent the dragging and resizing of events with a specific subject, you will utilize the dragStart and resizeStart events of the scheduler.

In the dragStart and resizeStart event handlers, check the subject of the event being dragged or resized.  If the subject matches 'Blocked', cancel the respective action.

dragStart event: https://ej2.syncfusion.com/angular/documentation/api/schedule/#dragstart

resizeStart event: https://ej2.syncfusion.com/angular/documentation/api/schedule/#resizestart
 

2. Prevent Dropping Events on Header Group Column
 

To ensure that events cannot be dropped on header group columns, Utilize the dragStop event to check the target location of the drop action. If the event is being dropped on a header group column, cancel the drop action.

dragStop event: https://ej2.syncfusion.com/angular/documentation/api/schedule/#dragstop

[app.component.html]
 

<ejs-schedule #scheduleObj width='100%'  (actionComplete)="onActionComplete($event)" (dragStart)="onDragStart($event)" (resizeStart)="onResizeStart($event)" (dragStop)="onDragStop($event)">

          

</ejs-schedule>

[app.component.html]
 

public onActionComplete(args: ActionEventArgs): void {

    if (args.requestType === 'eventCreate' || args.requestType === 'eventChange') {

      const eventData = args.data as { [key: string]: any };

      if (eventData.Subject === 'Blocked') {

        args.cancel = true;

      }

    }

  }

  public onDragStart(args: any): void {

    if (args.data.Subject === 'Blocked') {

      args.cancel = true;

    }

  }

  public onResizeStart(args: any): void {

    if (args.data.Subject === 'Blocked') {

      args.cancel = true;

    }

  }

  public onDragStop(args: any): void {

    const target = args.event.target as HTMLElement;

    if (target.classList.contains('e-header-cells')) {

      args.cancel = true;

    }

  }

[data.ts]
 

export let resourceData: Record<string, any>[] = [

 {

    Id: 11,

    Subject: 'Blocked',

    StartTime: new Date(2023, 0, 1, 9, 30),

    EndTime: new Date(2023, 0, 1, 12, 0),

    IsAllDay: false,

    ProjectId: 1,

    TaskId: 3

  }
]

Sample link: number-of-events-with-resources (forked) - StackBlitz

Don't hesitate to get in touch if you require further help or more information.

Regards,

Vijay