[INFO REQ] Tooltip, event and vertical timeaxis styling.

Our pure JavaScript Scheduler component
Post Reply
User avatar
nAi
Posts: 6
Joined: Fri Jan 10, 2020 3:40 pm

[INFO REQ] Tooltip, event and vertical timeaxis styling.

Post by nAi » Fri Feb 14, 2020 10:10 am

Hi!
I have few styling related questions for the Scheduler:
- How to change (event/scheduler) tooltip box background color or other styling?
- How to change the event styling when on hover state (on mouse over) or after event has been clicked?
- I need to make the vertical timeaxis more narrow for mobile devices, how can I achieve this? I can drop the font size with .b-grid-vertical-scroller class, but changing the width via css seems bit difficult.

User avatar
pmiklashevich
Core Developer
Core Developer
Posts: 2485
Joined: Fri Apr 01, 2016 11:08 am

Re: [INFO REQ] Tooltip, event and vertical timeaxis styling.

Post by pmiklashevich » Fri Feb 14, 2020 6:47 pm

Hello,

Basically all the styling you can apply in CSS. Just inspect the DOM and see what selectors you need to override.

For example for tooltips you can use these rules:

Code: Select all

// Event tooltip
.b-sch-event-tooltip {
    .b-tooltip-content {
        background-color: lightblue;
    }
}

// Drag & drop tooltip
.b-tooltip#container-event-drag-tip {
    .b-tooltip-content {
        background-color: lightpink;
    }
}

// Drag resize tooltip
.b-tooltip#container-event-resize-tip {
    .b-tooltip-content {
        background-color: lightgreen;
    }
}

// Drag create tooltip
.b-tooltip#container-drag-create-tip {
    .b-tooltip-content {
        background-color: lightsalmon;
    }
}

// Schedule tooltip
.b-sch-scheduletip {
    .b-tooltip-content {
        background-color: lightgoldenrodyellow;
    }
}
For event styling you have various options. Please check out our guide and corresponding demo:
https://www.bryntum.com/docs/scheduler/#guides/customization/styling.md
https://www.bryntum.com/examples/scheduler/eventstyles/

To make it easy to apply custom styles in CSS you can set eventColor and eventStyle to null:

Code: Select all

new Scheduler({
    eventColor : null,
    eventStyle : null,
and then apply your CSS rules:

Code: Select all

// Event styles
.b-sch-event-wrap {
    .b-sch-event {
        // default color
        background-color: red;

        // selected color
        &.b-sch-event-selected {
            background-color: yellow;
        }
    }
    &.b-sch-event-hover {
        // hover color
        .b-sch-event {
            background-color: blue;
        }
    }
}

Scheduler's width can be configured on the scheduler component:
https://www.bryntum.com/docs/scheduler/#Scheduler/view/Scheduler#config-width
I need to make the vertical timeaxis more narrow for mobile devices
I'm not sure what you mean by this. Could you please provide more details and attach some screenshots which explain how it looks now and what the desired result is?

Best,
Pavel
Pavel Miklashevich - Core Developer

User avatar
nAi
Posts: 6
Joined: Fri Jan 10, 2020 3:40 pm

Re: [INFO REQ] Tooltip, event and vertical timeaxis styling.

Post by nAi » Sat Feb 15, 2020 10:38 am

Thank you for your support!

Tooltip CSS works great, but I can't remove the hovering effect after event selection. The problem is that I don't want that the styling changes after selection, for example the font-color is changed to white+bold. I have white event color in some cases and the text is invisible then. I have recorded a small video, so you can see what I mean. Also in the video another problem is visible. At 00:05 in the video the scheduler scrolls to the top of the page which is unwanted. This happens every time on first (left) click on the background area. (And also every time the timeaxis on the left is clicked) It is very annoying. There is no logging in the console. Also I attached screen capture how the vertical timeaxis takes too much space in mobile screen.
Hover_and_timeaxis.zip
(1.83 MiB) Downloaded 2 times

User avatar
nAi
Posts: 6
Joined: Fri Jan 10, 2020 3:40 pm

Re: [INFO REQ] Tooltip, event and vertical timeaxis styling.

Post by nAi » Sat Feb 15, 2020 2:08 pm

I found the relevant css classes for the active/hover effect. I would still appreciate help with the timeaxis styling and this unwanted scrolling to top of the page.

User avatar
mats
Core Developer
Core Developer
Posts: 15330
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: [INFO REQ] Tooltip, event and vertical timeaxis styling.

Post by mats » Sat Feb 15, 2020 2:58 pm

Please don't post more than 1 question per post. Let's keep this topic focused on styling and open another one for any other issues such as your scrolling issue.
Tired of debugging javascript errors in web applications? Try our new error logging service RootCause, or read more on the Sencha blog

@bryntum
Facebook
API documentation

Post Reply