Highlight Events

[Highnoon]

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

[pmiklashevich]

Please check out this blog post: https://www.bryntum.com/blog/styling-yo ... m-styling/

[Highnoon]

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.

[pmiklashevich]

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>

[Highnoon]

Ouch! Yes you are right. Thank you!