Cannot drag-n-drop events in TimelineWorkWeek view (but in all other)

[Rolf Bäck]

Hello, I'm using the latest version of all Syncfusion Angular components, in particular the Scheduler 20.3.58 and everything else is working fine. 

Drag-n-drop (move) events within the scheduler in the TimelineWorkWeek view doesn't even move the object but after release of mouse button I get an event even though the object is still in it's original place. 

I've tried to remove timeScale and interval but no change. No customized CSS.

<ejs-schedule #scheduleObj locale="sv" width='auto' height='100%' [(selectedDate)]='selectedDate' [(currentView)]="currentView" interval="2" [eventSettings]="eventSettings" [group]='group' (renderCell)="onRenderCell($event)"

(eventClick)="onEventClick($event)" (eventRendered)="eventRendered($event)" [rowAutoHeight]="true" [allowDragAndDrop]="true"

(drag)="drag($event)" (dragStart)="onDragStart($event)" (dragStop)="onDragStop($event)" (popupOpen)="onPopupOpen($event)" (cellClick)="onCellClick($event)"

(cellDoubleClick)="onCellDoubleClick($event)" [showQuickInfo]='showQuickInfo' (onCreated)="onCreated()" (hover)="onHover($event)" (onActionComplete)="onActionComplete($event)" (onActionBegin)="onActionBegin($event)" (navigating)="onNavigate($event)">

<e-views>

<e-view [displayName]="getTranslation('Day')" option="TimelineDay"></e-view>

<e-view [displayName]="getTranslation('1 week')" option="TimelineWorkWeek" timeScale="timeScaleOptions"></e-view>

<e-view [displayName]="getTranslation('2 weeks')" option='TimelineWorkWeek' [interval]="2" timeScale="timeScaleOptions"></e-view>

<e-view [displayName]="getTranslation('Month')" option="TimelineMonth"></e-view>

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

</e-views>

@import "https://cdn.syncfusion.com/ej2/ej2-base/styles/bootstrap5.css";

@import "https://cdn.syncfusion.com/ej2/ej2-buttons/styles/bootstrap5.css";

@import "https://cdn.syncfusion.com/ej2/ej2-calendars/styles/bootstrap5.css";

@import "https://cdn.syncfusion.com/ej2/ej2-dropdowns/styles/bootstrap5.css";

@import "https://cdn.syncfusion.com/ej2/ej2-inputs/styles/bootstrap5.css";

@import "https://cdn.syncfusion.com/ej2/ej2-lists/styles/bootstrap5.css";

@import "https://cdn.syncfusion.com/ej2/ej2-angular-kanban/styles/bootstrap5.css";

@import "https://cdn.syncfusion.com/ej2/ej2-angular-schedule/styles/bootstrap5.css";

@import "https://cdn.syncfusion.com/ej2/ej2-layouts/styles/bootstrap5.css";

@import "https://cdn.syncfusion.com/ej2/ej2-angular-layouts/styles/bootstrap5.css";

@import "https://cdn.syncfusion.com/ej2/ej2-navigations/styles/bootstrap5.css";

@import "https://cdn.syncfusion.com/ej2/ej2-grids/styles/bootstrap5.css";

@import "https://cdn.syncfusion.com/ej2/ej2-treegrid/styles/bootstrap5.css";

@import "https://cdn.syncfusion.com/ej2/ej2-angular-gantt/styles/bootstrap5.css";

Any ideas on how to enable drag-n-drop in the TimelineWorkWeek

[Ruksar Moosa Sait]

Hi Rolf,

We have checked on your shared codes and suspect the timeScale property for the TimelineWorkWeek was not set properly which might have caused the reported issue. Try the below sample and if the issue persists, replicate it in the sample.

Sample: https://stackblitz.com/edit/angular-jk5vs5?file=app.component.html

<e-views>

      <e-view displayName="1 week" option="TimelineWorkWeek" [timeScale]="timeScaleOptions"></e-view>
</e-views>

Regards,

Ruksar Moosa Sait

[Rolf Bäck]

Thank you! That solved the problem. I'm a bit umberrased. The strange thing with this is that the UI changed the timescale according to the variable but was not inserted as the variable.

[Ruksar Moosa Sait]

Rolf, you're welcome! Since the timeScale property was set wrong, the Scheduler was rendering with that value which resulted in a strange UI. Please get back to us if you need any other assistance.