Our powerful JS Calendar component


[VUE 3] iconCls is getting overwritten by 'style'

Post Reply

Post by gustavo.rosendo »

Hi,

I am trying to programmatically set the icon and its color in an event based on the status of the event (e.g.: green icon if the status is 'accept').
I have been able to set it using 'iconCls' and then the 'color' attribute in the css , however I always have to also use the '!important' keyword otherwise it will get overwritten by a 'style' property which is automatically inserted in the icon tag, with the color of the event.

Since it's considered to be a bad-practice to use the '!important' keyword, is there a way to achieve this without it?

Here a snippet of my code, css classes and the html of the rendered icon (overwritten with style) :

const customEventRenderer = ({ eventRecord, renderData }) => {
  if (eventRecord.data?.status === 'accept') {
    // Just add a green check to the confirmed events
    renderData.iconCls = 'b-fa-circle-check'
  } else if (eventRecord.data?.status === 'decline') {
    // For cancelled events, add special icon and change the event color
    renderData.iconCls = 'b-fa-cancel'
    renderData.cls = 'cancelled-event'
  }
}
.cancelled-event {
  color: var(--el-text-color-regular);
  .b-cal-event {
    background-color: var(--el-fill-color) !important;
  }
  .b-cal-event-desc {
    text-decoration: line-through;
  }
  .b-fa-cancel {
    color: var(--el-icon-color-cancelled) !important;
  }
}
.b-fa-circle-check {
  color: var(--el-icon-color-confirmed) !important;
}

<i class="b-cal-event-icon b-icon b-fw-icon b-fa-circle-check" role="presentation" style="color: rgb(200, 157, 163);"></i>

Thanks and regards,
Gustavo

Post by Animal »

Yes, the renderer needs to be able to change the iconStyle.

Here is a ticket to make that property available as an object in the renderData that is passed to the renderer: https://github.com/bryntum/support/issues/5024

Post by gustavo.rosendo »

Thank you! Looking forward for the release of v5.1.2

Post Reply