How to calculate event width/height

Scheduler Javascript
#1

For drag and drop purposes, I am creating a copy of an event element outside of the scheduler. In timeline view, I need to work out what the width of the event would be when added to the scheduler (based on the event duration).

Obviously this will depend on factors such as the current matrix cell width.

Is there an internal method I can access to work out what the width will be?

Also is there a similar way for when working in day view to work out the height based on the duration?

Thanks

#2

Hello,

Can you please explain why do you need event width/height and not just it’s properties as text, section, start_date, end_date? Maybe there is easier solution which we can use.

Kind regards,
Ilya

#3

I am creating a drag and drop interface for dragging events in from a separate component. It’s not a DHTMLX component so I am writing the drag and drop functionality with jQuery draggable.

The element that gets dragged in has to look like the event as it will appear in the scheduler. I have got it to look the same by giving it a style of dxl_cal_event_line (I am using Timeline view).

I need to match the width of the event so it’s the same as will be created when dropped on the scheduler.

So I was wondering if there’s an inner method that is used to work out how wide the event should be, given a the event duration e.g. 60 minutes.

Hope that makes sense?

#4

Hello,

Nice, would be interesting to see when it’s done :slight_smile:
Height: there is scheduler.config.hour_size_px option so you can calculate how many hours your drag and drop event takes and then multiply with config option (you probably also should take into account minutes).
Width: to make it easier you can use

var width = scheduler._cols[0] - scheduler.xy.menu_width;
Best regards,
Ilya

#5

Thanks Ilya will try that out