I need to separate my Events without them colliding. I adjusted the the scheduler. xy.min_event_height.
Look at this screen shot and notice how the first Event is separated nicely from the second one but then after that they over lap/collide. How can I prevent this?
I want to make sure they fit in the Time Period/Slot and not overlap into the next one.
Thx
I did not realize the screen shot would be that large and cut out the code and most of my picture…here is part of the snippet…
var step = 10;
var format = scheduler.date.date_to_str("%h:%i");
scheduler.config.hour_size_px=(60/step)*22;
scheduler.templates.hour_scale = function(date){
html="";
for (var i=0; i<60/step; i++){
html+="
});
scheduler.init(‘scheduler_here’,new Date(2015,0,10),“week”);
var format = scheduler.date.date_to_str("%h:%i")
scheduler.xy.min_event_height = 41;
scheduler.templates.event_header = function(s,e,ev){
return format(s) + " - " + format(s) + " " + ev.text;
}
scheduler.templates.event_body = function(s,e,ev){
return “”;
Hi,
there is some minimal height of scheduler events which at some point may not match the real duration.
You can try enabling this config docs.dhtmlx.com/scheduler/api__s … onfig.html
Also, check this article docs.dhtmlx.com/scheduler/custom … splay.html
Note that you can give a link to the complete snippet, no need for making a screenshot or copying the code. If you click “Share” button it will save the snippet and give you a link to it
That does address the issue, what other recommendations do you have?
Hi,
did you try the configs from my previous reply?
No, I did not.
Can I add this to one of the snippets to try or do I need to use it in my own code?
Maybe I should word my question better…
I used to have a 10 min Event fit in a 10 min time period (and it was small) and it just used one cell and any Events that came before or after would fit nicely into the Time periods with a line of separation…see the screen shot and see how nicely separated by a line with no overlapping.
How do I do that again? I do not want the Events to over lap because when they have the correct Time Period they fit into the cells perfectly and do not need to overlap.
However, it is also coded that if the Events do overlap because they collide with another Event it just allows it to collide with an Alert, then proceeds to allow and display the overlapping Events…
I am wondering how to make Events fit perfectly in the Time Period…If I adjust the XY. and adjust …scheduler.config.hour_size_px=(60/step)*22;
scheduler.templates.hour_scale = function(date){
html=“”;
for (var i=0; i<60/step; i++){
html+="<div style='height:22px;line-height:22px;
Because when I adjust these things the Events are out of the Time Period…meaning they go beyond the Time Period line into the next cell.
Is this going to require and Image adjustment or a line height px adjustment or am I way off?
Hello,
this article addresses your issue
docs.dhtmlx.com/scheduler/custom … splay.html
With the default event display the minimal height is about 40px, thus the events with a small durations will overlap.
There is two things you can do:
increase the scale height (hour_size_px), so the minimal scheduled interval will be equal or bigger then the minimal height of an event. This approach may not be appropriate since the scale became too big.
override the display of events (see the link above). Then you’ll be able to implement the display as on your screenshot. You’ll probably need to also specify scheduler.xy.min_event_height config
docs.dhtmlx.com/scheduler/api__s … other.html
I think this is approach you should try.
Changing events height by css may not work correctly since most of the sizes are calculated by code and mismatch of the calculated sizes and ones defined by css may create some side effects.
