CSS Class conflict with Lovelace Custom Weather Card

[rpitera]

This was mentioned in the forum thread but I just thought I'd add it here as a reminder. Please change the CSS class "day" to "calendar_day" in your next update. Thanks!

Otherwise, this is the calendar I always wanted when HA first added Google Calendar support. Thanks for making it a reality!!

[gadgetchnnel]

Alternatively, it should use the Shadow DOM so that the CSS is encapsulated and won't conflict with other cards. Something like this:

if (!this.content) {
      this.attachShadow({ mode: 'open' });
      this.shadowRoot.innerHTML = `
          <style>
          ... CSS here - cut for brevity ...
          </style>
      `;
      const card = document.createElement('ha-card');
      card.header = this.config.name;
      this.content = document.createElement('div');
      this.content.style.padding = '0 16px 16px';
      card.appendChild(this.content);
      this.shadowRoot.appendChild(card);
      moment.locale(hass.language);
    }

Then, in the updateHtmlIfNecessary method, exclude the this.content.innerHTML = code which sets the CSS.

[speke]

Hello
How you do that ?
change the CSS class "day" to "calendar_day"
thank's

[rpitera]

Open the calendar-card.js file in the directory and edit it. The two lines you are looking for are line #74 and #158.