Setting the "cssClass" property on a Calendar Event

Asked by Julien
29 days 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]
28 days 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
28 days ago.

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

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

Thanks for the help.

New Reply

This reply is

a comment

an answer

Attachments:

or drop files here

Your name (optional):

Setting the "cssClass" property on a Calendar Event

Products

Learn

Get Support

DayPilot Pro