Dynami Event Height

Post by **Misiu** » Mon Dec 02, 2013 2:04 pm

Right now there is config option for row height.
Is it possible to add similar config for event height?

When we add events that are overlapping we have 2 options: change row height (default option) or overlap them one over another.

What I would like is to set:

viewConfig : { 
                dynamicRowHeight : false,
                dynamicEventHeight : true,
            },

This way rows would always stay exact same height and events that are overlapping would "share" height.
I know this can be done by modifying Your code by my own, but maybe this could be added as part of control?
This is behaviour we get now when we set dynamicRowHeight=false:

and this is what I'm trying to get:

I can try to code this feature and post my code for review and maybe then it could be added to Your base, but I need some guides. Where should I start?

Post by **mats** » Mon Dec 02, 2013 2:26 pm

You'll need to take control over rendering to solve this, and do it in the eventRenderer etc (our vertical view does this, events share a fixed space).

Post by **Misiu** » Mon Dec 02, 2013 2:28 pm

Thanks for fast reply, I'll try to code it and post results

Do You think this might get to Your source code?

Post by **mats** » Mon Dec 02, 2013 3:57 pm

not sure, we can never promise anything. Ideally, we like to maintain as little code as possible while being as awesome as possible

Post by **Misiu** » Mon Dec 02, 2013 4:40 pm

You are already awesome

Post by **Misiu** » Tue Dec 03, 2013 11:48 am

I worked hard yesterday and I have working prototype

https://fiestadev.bryntum.com/#259-dynamiceventheight
I tried to do my best

It works nice, but for two events. When You add 2 events to row then everything looks nice, but when You add 3 events (and 2 of them are overlapping) then everything stops looking good.

I've added new option to AbstractSchedulerView called dynamicEventHeight, setting this calls layoutEventsInBands2 in eventlayout.Horizontal.

Could You guys please take a look at this? Maybe tweak is a little

As a bonus I would like to share some CSS that enables nice webkit scrollbars:

/* Scrollbars */
.sch-schedulerpanel ::-webkit-scrollbar {
    width: 18px;
    height: 18px;
}

/* Background */
.sch-schedulerpanel ::-webkit-scrollbar-track-piece {
    margin: 4px;
}

/* Bottom bar background */
.sch-schedulerpanel ::-webkit-scrollbar-track-piece:horizontal {
    border-right-width: 4px;
    border-bottom-width: 8px;
}

/* Bar element (thumb) */
.sch-schedulerpanel ::-webkit-scrollbar-thumb {
    border: solid 0 transparent;
    border-right-width: 5px;
    border-left-width: 5px;
    -webkit-border-radius: 9px 6px;
    -webkit-box-shadow: inset 0 0 0 1px rgb(200, 200, 200), inset 0 0 0 6px rgb(250, 250, 250);
}

/* Darken rollover */
.sch-schedulerpanel ::-webkit-scrollbar-thumb:hover {
    -webkit-box-shadow: inset 0 0 0 1px rgb(161, 161, 161), inset 0 0 0 6px rgb(161, 161, 161);
}

/* Horizontal thumb */
.sch-schedulerpanel ::-webkit-scrollbar-thumb:horizontal {
    border-right-width: 0;
    border-left-width: 0;
    border-top-width: 5px;
    border-bottom-width: 5px;
    -webkit-border-radius: 6px 9px;
}

Post by **Misiu** » Tue Dec 03, 2013 1:49 pm

I've attached simple usage example.
Extract it to examples folder.
Right now when 2 events are in save time span row is resized (it height is doubled).
With my modifications space is row is divided to fit all events in row without changing it height.

I want to have same behaviour like in vertical view.

Post by **Misiu** » Thu Feb 20, 2014 12:30 pm

I've updated my ticket with test case: https://www.assembla.com/spaces/bryntum ... ity/ticket:

Post by **Maxim Gorkovsky** » Thu Feb 20, 2014 2:02 pm

Thanks for contribution!

Post by **Misiu** » Mon Mar 10, 2014 2:11 pm

Any news on this?
Anyone else would like to see static row height and dynamic event height option?

Support Forum

Dynami Event Height