We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Drag interval


I'm trying to setup smaller interval for Drag and resize event on Scheduler. 

I have this setup:
dragStart: function (args) {
interval = 30;
},timeScale: { enable: true, interval: 30, slotCount: 2 }

this combination works ok, but if I set args.interval = 5; Only on margin times event drag is ok (eg. 09:00, 09:30) but on 9:10, 9:20 is not ok - wrong time is selected.

I want to achieve that I can have events that will have duration minimum 5 minutes - with timescale interval 15min ( config above ). Is this possible?

9:00 - 9:05 -- Appointment1

9:05 - 9:15 -- Appointment2

with config above event  is created with good time, but representation is not ok, it has a height of event interval block - 15min in this case. 

Edit: I know for option in timescale: 60 - 6, but for me is important that 1h interval is not higher than 200px.

Edit2: Also, is it possible to have drag only on end of event?


7 Replies

VD Vinitha Devi Murugan Syncfusion Team October 25, 2019 09:57 AM UTC

Hi Nikola, 
Syncfusion Greetings 
We could reproduce the reported issues of  ”wrong timing update on dragging and height of 15 min event occupies the half an hour ” and logged the below bug reports and fix will be included in our JS2 weekly release on November 12, 2019. We will ensure the fix and provide further details on November 13, 2019. Kindly be patience until then. 

You can decrease the height of work cell by using below CSS. For the same we have prepared below sample in which we used timescale 60 – 6. 

.e-schedule .e-vertical-view .e-time-cells-wrap table td, 
.e-schedule .e-vertical-view .e-work-cells { 
    height: 30px; 
Edit2: Also, is it possible to have drag only on end of event? 
Can you please confirm whether your requirement is to only allow resizing of the event endTime. 
M.Vinitha devi 

IV Ivan October 25, 2019 10:08 AM UTC


Tnx for answer and explanations. 

For a drag start interval - I will wait update

15min event - half hour --  I solved the problem by using an EventRendered event 
eventRendered: function (args) {
if(_scheduler.currentView != 'Month') { // calendarStep is 30 or 60, timscaleSlot valua is set to 2
let _cellDuration = calendarSettings.calendarStep / 2;
if (args.data.Duration < _cellDuration) {
args.element.style.height = args.data.Duration * 50 / _cellDuration +'px';
Because of smaller total event height I need to remove resize/drag top placeholder and resize bottom placeholder ( Edit2 )

.e-schedule .e-event-resize.e-top-handler {
display: none!important;

.e-schedule .e-event-resize.e-bottom-handler {
height: 5px!important;

VD Vinitha Devi Murugan Syncfusion Team October 28, 2019 08:16 AM UTC

Hi Nikola, 
Thanks for your update. 
We're happy you've found the solution to remove the events top handler. 
Note: You can't resize the event startTime if you remove the top event handler. 
M.Vinitha devi 

IV Ivan November 24, 2019 09:41 AM UTC


i see that you fixed wrong drag time calculation. 

I notice one new problem - different start time based on position of pointer in moment when drag event start. 

Example: event duration 2h, drag interval 10min

pointer is positioned on half (1h)

Drag for one step will not update start time + 10 min. it will add 1h and 10min.

if pointer is on top of event, everything will work ok.

VD Vinitha Devi Murugan Syncfusion Team November 25, 2019 08:37 AM UTC

Hi Ivan, 
Syncfusion Greetings. 
We could reproduce the reported issue and logged the below bug report and fix will be included in our upcoming Volume 4 SP release which is expected to roll out by end of December 2019. We would appreciate your valuable patience until then 
M.Vinitha devi 

IV Ivan January 23, 2020 12:42 PM UTC


did you fix that problem? 

It is still present in last ej2 available via CDN.

When draging is droped at something like 9:05, od 9:10. and ceil height is set to 15min, drag interval to 5min.

Video in atttachment.

dragStart: function (args) {
args.interval = 5;
args.cancel = args.data.NoShow;

Attachment: syncfusion_schedule_drag_bug_be86a1aa.zip

VM Vengatesh Maniraj Syncfusion Team January 24, 2020 05:36 AM UTC

Hi Ivan, 

Sorry for the inconvenience. 

Our Volume 4 SP1 release is rescheduled to the end of January 2020. We will fix and include our solution in that volume release. We would appreciate your valuable patience until then. 

Kindly revert us for further assistance. 


Live Chat Icon For mobile
Up arrow icon