Hi,
I need to change the eventStyle (to be 'dashed') of the calendar events which have a status = 'declined' .
I have already tried using a eventRenderer and setting the
eventRecord.eventStyle = 'dashed'
and/or
renderData.eventStyle = 'dashed'
, but had no success:
week: {
eventRenderer ({ eventRecord, renderData }) {
// highlight all cancelled events
if (eventRecord.data?.status === 'decline') {
renderData.iconCls = 'b-fa b-fa-cancel'
eventRecord.eventStyle = 'dashed'
renderData.eventStyle = 'dashed'
renderData.eventRecord.eventStyle = 'dashed'
renderData.eventColor = null
// renderData.cls = 'stripes'
}
}
}
Then, I've tried setting
renderData.cls = 'stripes'
with my own custom css class:
.stripes {
color: var(--el-text-color-regular);
font-style: italic;
background: repeating-linear-gradient(
45deg,
#f2f2f2,
#f2f2f2 4px,
#BEBEBE 4px,
#BEBEBE 8px
);
}
The css class is applied but a random event color is also applied on top of it, as shown in the attachment.
Can you please help me on how I can achieve this dashed style only for the events with status 'declined'?
Thanks in advance!