Setting the "cssClass" property on a Calendar Event

Asked by Julien
8 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]
8 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
8 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