Our powerful JS Calendar component


Post by gustavo.rosendo »

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.

Captura de tela 2022-08-01 171137.png
Captura de tela 2022-08-01 171137.png (11.91 KiB) Viewed 314 times

Can you please help me on how I can achieve this dashed style only for the events with status 'declined'?

Thanks in advance!


Post by tasnim »

I tried with this code

week : {
            eventRenderer ({ eventRecord, renderData }) {
                // highlight all cancelled events
                
if (eventRecord.data?.name === 'Breakfast') { renderData.iconCls = 'b-fa b-fa-cancel' // eventRecord.eventStyle = 'dashed' // renderData.eventStyle = 'dashed' // renderData.eventRecord.eventStyle = 'dashed' // renderData.eventColor = null renderData.cls = 'stripes' } } }

And it works fine here. If this is still not achievable, then please provide a runnable test case so we can debug it


Post Reply