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.
Support Forum
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:
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:
and then apply your CSS rules:
Scheduler's width can be configured on the scheduler component:
https://www.bryntum.com/docs/scheduler/#Scheduler/view/Scheduler#config-width
Best,
Pavel
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;
}
}
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,
// 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'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?I need to make the vertical timeaxis more narrow for mobile devices
Best,
Pavel
Pavlo Miklashevych
Sr. Frontend Developer
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.
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.