Our pure JavaScript Scheduler component


Post by nAi »

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.

Post by pmiklashevich »

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:
// 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:
new Scheduler({
    eventColor : null,
    eventStyle : null,
and then apply your CSS rules:
// 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

Pavlo Miklashevych
Sr. Frontend Developer


Post by nAi »

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 132 times

Post by nAi »

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.

Post by mats »

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.

Post Reply