Setting the "cssClass" property on a Calendar Event

Asked by Julien
10 months ago.

Using DayPilot Javascript pro.

What I try to achieve is to have a different css class for different types of Events on a week Calendar so I can target their bar (class “calendar_default_event_bar”) using CSS selectors and set different styles.

I tried something like:

const dpEvent = new DayPilot.Event({    
  html: `<b>test</b>`,    
  barColor: `red`,    
  cssClass: `someClass`,    
  // ...
});

But it seems that “someClass“ is not outputed in the HTML.

Is it supposed to work? Is the error on my end?

Answer posted by Dan Letecky [DayPilot]
10 months ago.

Yes, this is correct.

Please note that the CSS class is applied at the top level (it is added to the div with calendar_default_event class).

You can verify that using browser developer tools. If you inspect the element, you will also see if your styles override the defaults correctly.

Comment posted by Julien
10 months ago.

Mystery solved! I was actually overwritten this prop later, in “onBeforeEventRender”:

dp.onBeforeEventRender = (args) => {
  args.data.cssClass = 'anotherClass';
  //...
}

Thanks for the help.

This question is more than 1 months old and has been closed. Please create a new question if you have anything to add.

Setting the "cssClass" property on a Calendar Event

Products

Learn

Get Support

DayPilot Pro