Automatically apply Event Type color to the button and date backgrounds

Ask the Community Customization
1

We predominantly use the month layout, but when we use the list or mason layouts, the “Event Type” gets lost in the listing. We rely on this color coding! It would be great to have an option when designing certain layouts to use the “event type” color as the background, date, background, or button colors, to help visually differentiate them in these layouts.

1 Like
2

Hi there and welcome to the Community, @Elizabeth_Young :wave:

Do I get it right that you’d like the event type color to be applied to date/button colors automatically, rather than having to set them manually in the Style tab?

3

Yes! Because currently, the style tab will set buttons, backgrounds, etc as the same color for every entry, which makes it difficult to see the color coding on event types, depending on the combination.

The type of color coding on the month view calendar puts the event title on a background of the “right” color, and we would want to do something similar in Masonry, List, etc, so visitors can visually differentiate quickly as they scroll.

Personally, I think the “date background” field or the “button” is what we would want to use for color coding, but I thought color coding other style features might be handy for other user cases. I can share pictures to demonstrate what I mean if that is helpful.

1 Like
4

Thanks, I completely got what you mean! We’ll try to think about this option in the future, especially if more users support this idea :slightly_smiling_face:

In the meantime, if you have a widget with the List or Masonry layout, please send me a link to it. I’ll be happy to check with the devs if it’s possible to implement it with the custom script :slightly_smiling_face:

1 Like
5

I apologize for the delay, and sure; we are in the process of building a new website, so this is the temporary website where we’ve installed the widget in list form: Events Calendar List View

And you can see that the event type is color coded at the top, but lighter colors disappear, and some of the darker colors are indistinguishable from each other. And we can change our color selections, but they look best in our primary, monthly calendar, format. Plus, the font for the event type remains small and thin, no matter what.

Let me know what you think, but honestly this layout is the view where we are trying to accommodate/redirect mobile users, so it’s based on our primary widget, which is here: Upcoming Events Calendar | Champaign County Humane Society , and it might not be worth trying to implement custom script.

1 Like
7

Thanks for the link!

Devs confirmed that it’s possible to implement this customization. I’ve passed your request on to them and will update you once the code is ready :slightly_smiling_face:

9

Thank you for waiting!

Our devs came up with a custom solution for you. Please add this script to the Custom JS field on the Settings tab of your widget’s settings:

const WIDGET_ID = 'c307f3a4-ed4e-4a3c-a82c-376fb65bee06';
const calendar = document.querySelector(`.elfsight-app-${WIDGET_ID}`);

if (calendar?.dataset.elfsightAppLayout !== 'list') return;

const waitForElem = (selector, root) =>
  new Promise((resolve) => {
    if (root.querySelector(selector)) {
      return resolve(root.querySelector(selector));
    }

    const observer = new MutationObserver(() => {
      if (root.querySelector(selector)) {
        observer.disconnect();
        resolve(root.querySelector(selector));
      }
    });

    observer.observe(root, {
      childList: true,
      subtree: true,
    });
  });

const observeChildNodes = (element, callback) => {
  new MutationObserver((mutationsList) => {
    const hasChildListMutation = mutationsList.some(
      (mutation) => mutation.type === 'childList'
    );
    if (hasChildListMutation) {
      callback(element);
    }
  }).observe(element, { childList: true, subtree: true });
};

function parseRGB(rgbStr) {
  const [r, g, b] = rgbStr.match(/\d+/g).map(Number);
  return { r, g, b };
}

const getLuminance = ({ r, g, b }) => 0.2126 * r + 0.7152 * g + 0.0722 * b;

const isDarkColor = (color) => getLuminance(parseRGB(color)) < 100;

const addColorsToCards = (container) => {
  const cards = container.querySelectorAll(
    '.eapp-events-calendar-list-item-component'
  );
  cards.forEach((card) => {
    const category = card.querySelector('.eapp-events-calendar-category-item');
    if (!category) return;

    const eventColor = getComputedStyle(category).color;

    const button = card.querySelector('.eapp-events-calendar-button-link');
    if (button) {
      button.style.background = eventColor;
      if (isDarkColor(eventColor)) button.style.color = 'white';
    }

    const date = card.querySelector(
      '.eapp-events-calendar-date-element-component'
    );
    if (date && !isDarkColor(eventColor)) date.style.color = eventColor;
  });
};

waitForElem('.eapp-events-calendar-events-calendar-layout', calendar).then(
  (list) => {
    addColorsToCards(list);
    observeChildNodes(list, addColorsToCards);
  }
);

And this code should be placed in the Custom CSS field on the Style tab:

.eapp-events-calendar-list-item-date {
  color: white;
}

.eapp-events-calendar-list-item-date * {
  color: inherit !important;
}

Please try it out and let me know if you like the result :slightly_smiling_face:

1 Like