Our pure JavaScript Scheduler component
Hello,
i want to make a highlight feature for events. As a parameter i get a GUID and all events depending to that should be higlighted.
First a css class
.mark-event-class {
outline: 5px solid #3bc9db;
}
First try was:
var obj = scheduler.eventStore.find(function (r) { return r.OBJGUID === "2D2FBBB2-87B8-4B45-87C5-F0D183FB81ED"; });
if (Array.isArray(obj)) {
for (var i = 0; i < obj.length; i++) {
obj[i].cls = ".mark-event-class";
}
} else {
obj.cls = ".mark-event-class";
}
Second:
onEventDataGenerated: function (eventData) {
if (eventData.event.data.OBJGUID === "2D2FBBB2-87B8-4B45-87C5-F0D183FB81ED") {
eventData.event.data.cls = ".mark-event-class";
}
},
But still no effect. So how to do this. Is the css ok?
Thanks
Pavlo Miklashevych
Sr. Frontend Developer
Hi,
yes it know thanks. I choose now the eventRenderer but still no success
eventRenderer: function (_ref) {
var eventRecord = _ref.eventRecord,
resourceRecord = _ref.resourceRecord,
tplData = _ref.tplData;
var eventText = "";
if (eventRecord.id == 1) {
eventText = 'Cheerio ';
tplData.cls.add('b-sch-event-mark');
//tplData.style = {
// backgroundcolor : 'black',
// fontweight : 'bold',
// color: 'red'
// }
}
...
This is the css. Is it ok?
<style>
b-sch-event-mark {
outline: 5px solid #3bc9db;
}
</style>
I put all in a zip. Maybe you can take a look.
-
Attachments
-
- BryntumMark.zip
- (46.57 KiB) Downloaded 123 times
The selector is wrong in your styles. Need to add a dot before the `b-sch-event-mark`
<style>
.b-sch-event-mark {
outline: 5px solid #3bc9db;
}
</style>
Pavlo Miklashevych
Sr. Frontend Developer
Ouch! Yes you are right. Thank you!