team, I have downloaded latest build from customer zone but
for eventstyle = 'colored' there is still incorrect behavior.
Plz find attached screenshot
Support Forum
As per https://bryntum.com/docs/scheduler/#Scheduler/view/mixin/TimelineEventRendering#config-eventColor there is a list of supported colors for colored event style. Hex codes are not supported.
I have investigated how colored style is done and there is a little bit more to it. If you take a deeper look at a colored event display you can see that there are more colors involved in the style.
- colored-event-style.gif (317.45 KiB) Viewed 1509 times
There is the base color, then much lighter color for background, text color and border color. All of these with their hover variants. These color sets are generated from color names at build time, not at runtime. If you are interested, study file eventstyles.scss from line 477 and then from line 588.
Therefore, when you set a hex code as the event color, scheduler only sets the border to that color not having all set of colors available.
What you could do is to use the code found in eventstyles.scss and generate additional named color sets you may need in your app.
Hi saki, what I am originally trying to achieve is somewhat a combination of eventstyle colored and border.(plz see attached screenshot).
While eventStyle colored with hex color support could have done the trick for us but its not there currently.
Plz have a look at attached screenshot, is there any way I can achieve such design?
Because we have many events we need hex color codes to distinguish properly
- Attachments
-
- eventstyle.png (14.15 KiB) Viewed 1506 times
You could take this as a starting point:
app.js (replaces basic example):
/* eslint-disable no-unused-vars */
import '../_shared/shared.js'; // not required, our example styling etc.
import Scheduler from '../../lib/Scheduler/view/Scheduler.js';
//region Data
const resources = [
{ id : 'r1', name : 'Mike' },
{ id : 'r2', name : 'Linda' },
{ id : 'r3', name : 'Don' },
{ id : 'r4', name : 'Karen' },
{ id : 'r5', name : 'Doug' },
{ id : 'r6', name : 'Peter' },
{ id : 'r7', name : 'Sam' },
{ id : 'r8', name : 'Melissa' },
{ id : 'r9', name : 'John' },
{ id : 'r10', name : 'Ellen' }
],
events = [
{
id : 1,
resourceId : 'r1',
startDate : new Date(2017, 0, 1, 10),
endDate : new Date(2017, 0, 1, 12),
name : 'Click me',
iconCls : 'b-fa b-fa-mouse-pointer',
eventColor : '#c8c8c8'
},
{
id : 2,
resourceId : 'r2',
startDate : new Date(2017, 0, 1, 12),
endDate : new Date(2017, 0, 1, 13, 30),
name : 'Drag me',
iconCls : 'b-fa b-fa-arrows-alt',
eventColor : '#c0c000'
},
{
id : 3,
resourceId : 'r3',
startDate : new Date(2017, 0, 1, 14),
endDate : new Date(2017, 0, 1, 16),
name : 'Double click me',
eventColor : '#e000e0',
iconCls : 'b-fa b-fa-mouse-pointer'
},
{
id : 4,
resourceId : 'r4',
startDate : new Date(2017, 0, 1, 8),
endDate : new Date(2017, 0, 1, 11),
name : 'Right click me',
iconCls : 'b-fa b-fa-mouse-pointer',
eventColor : '#8080ff'
},
{
id : 5,
resourceId : 'r5',
startDate : new Date(2017, 0, 1, 15),
endDate : new Date(2017, 0, 1, 17),
name : 'Resize me',
iconCls : 'b-fa b-fa-arrows-alt-h',
eventColor : '#80ff80'
},
{
id : 6,
resourceId : 'r6',
startDate : new Date(2017, 0, 1, 16),
endDate : new Date(2017, 0, 1, 19),
name : 'Important meeting',
iconCls : 'b-fa b-fa-exclamation-triangle',
eventColor : '#ff8080'
},
{
id : 7,
resourceId : 'r6',
startDate : new Date(2017, 0, 1, 6),
endDate : new Date(2017, 0, 1, 8),
name : 'Sports event',
iconCls : 'b-fa b-fa-basketball-ball',
eventColor : '#80ffff'
},
{
id : 8,
resourceId : 'r7',
startDate : new Date(2017, 0, 1, 9),
endDate : new Date(2017, 0, 1, 11, 30),
name : 'Dad\'s birthday!',
iconCls : 'b-fa b-fa-birthday-cake',
eventColor : '#ffc8c8'
// Custom styling from data
// style : 'background-color : teal; font-size: 18px',
// Prevent default styling
// eventStyle : 'border'
}
];
//endregion
const scheduler = new Scheduler({
adopt : 'container',
minHeight : '20em',
resources : resources,
events : events,
startDate : new Date(2017, 0, 1, 6),
endDate : new Date(2017, 0, 1, 20),
viewPreset : 'hourAndDay',
rowHeight : 50,
barMargin : 5,
multiEventSelect : true,
eventRenderer({ eventRecord, tplData }) {
return `
<div class="dark-border" style="background-color:${tplData.eventColor}"></div>
<div>
${eventRecord.name}
</div>
`;
},
columns : [
{ text : 'Name', field : 'name', width : 130 }
]
});app.css (add it to basic example folder):
.b-sch-event {
padding-left:20px;
}
.b-sch-style-plain .b-sch-event:not(.b-milestone) {
color:#555;
}
.dark-border {
filter:brightness(80%);
width:10px;
height:100%;
position:absolute;
left:0;
}
.b-sch-event-hover {
filter:brightness(85%);
}