Display Only the Start Date in the main image grid for dates that span more than 1 date

Ask the Community General Questions
1

If an event is 10pm Feb 8th to 2am Feb 9nd, I only want to display the date Feb 8th in the main grid.

image
image796Ă—450 102 KB

2 Likes
3

Hi there, @QuietEvents :wave:

You’d like to hide the end date only from the event card, but in the event popup you’d like to display both start and end dates, right?

2 Likes
4

That is correct!

1 Like
5

Also I noticed that when you span two days, because it uses the long format month, it gets cut off. Is there a way to add the abbrivated name so it shows the full date and time?

If it was “Jan 4 10:00PM - Jan 5 2:00 AM” it would fit on the main screen.

image
image486Ă—485 62.5 KB

2 Likes
6

Got it, thanks!

Your request is with our devs now. I’ll update you once I have any news from them :wink:

2 Likes
7

Hi there, @QuietEvents :wave:

Here is the solution from the devs:

function waitForElement(selector, root = document, maxAttempts = 50) {
  return new Promise((resolve) => {
    let attempts = 0;

    const check = () => {
      const element = root.querySelector(selector);
      if (element) {
        resolve(element);
      } else if (attempts < maxAttempts) {
        attempts++;
        setTimeout(check, 100);
      }
    };

    check();
  });
}

function observeChanges(containerSelector, callback) {
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(({ addedNodes }) => {
      addedNodes.forEach((node) => {
        if (node.nodeType === Node.ELEMENT_NODE) {
          if (node.matches(containerSelector) || node.querySelector(containerSelector)) {
            callback(node.matches(containerSelector) ? node : node.querySelector(containerSelector));
          }
        }
      });
    });
  });

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

const monthAbbreviations = {
  January: "Jan",
  February: "Feb",
  March: "Mar",
  April: "Apr",
  May: "May",
  June: "Jun",
  July: "Jul",
  August: "Aug",
  September: "Sep",
  October: "Oct",
  November: "Nov",
  December: "Dec",
};

function parseDate(monthDay, time) {
  const [month, day] = monthDay.split(" ");
  const [hours, minutes] = time.split(":").map((v) => parseInt(v, 10));
  const isPM = time.includes("PM");
  return new Date(2025, Object.keys(monthAbbreviations).indexOf(month), parseInt(day, 10), hours + (isPM && hours !== 12 ? 12 : 0), minutes);
}

function formatDateRange(startDate, startTime, endDate, endTime) {
  const formatMonth = (date) => {
    const [month, day] = date.split(" ");
    return `${monthAbbreviations[month]} ${day}`;
  };

  const formattedStart = `${formatMonth(startDate)} ${startTime}`;
  const formattedEnd = `${formatMonth(endDate)} ${endTime}`;
  return `${formattedStart} - ${formattedEnd}`;
}

function processGridItem(gridItem) {
  const timeElement = gridItem.querySelector('.eapp-events-calendar-time-time');
  if (timeElement) {
    const ariaLabel = timeElement.getAttribute('aria-label');
    if (ariaLabel) {
      const match = /Start date and time: (\w+ \d+) (\d+:\d+ (?:AM|PM)), end date and time: (\w+ \d+) (\d+:\d+ (?:AM|PM))/.exec(ariaLabel);
      if (match) {
        const [, startDate, startTime, endDate, endTime] = match;
        const start = parseDate(startDate, startTime);
        const end = parseDate(endDate, endTime);

        if (start.toDateString() !== end.toDateString()) {
          const formatted = formatDateRange(startDate, startTime, endDate, endTime);
          timeElement.textContent = formatted;
          const endContainer = gridItem.querySelector('.eapp-events-calendar-date-element-endContainer');
          if (endContainer) {
            endContainer.style.display = 'none';
          }
        }
      }
    }
  }
}

waitForElement('.eapp-events-calendar-grid-item').then(() => {
  document.querySelectorAll('.eapp-events-calendar-grid-item').forEach(processGridItem);
  observeChanges('.eapp-events-calendar-grid-item', processGridItem);
});

Please add this code to the Custom JS field on the Settings tab of your widget’s settings and let me know if it helped :slightly_smiling_face:

1 Like
9

@QuietEvents The thing is that the Custom JS doesn’t work in the widget editor, but only on the live page.

If the code didn’t work on the page where your widget is installed, please send me a link to this page. I’ll be happy to double-check things :wink:

10

ALL ARE WORKING!!! YAY…
Sorry not sure what I was looking at.

FIXED: Making a short date
FIXED: Showing just the start date of a multi-day event

AWESOME job! Love the support team and dev team for getting this done so quickly.

2 Likes
11

Glad to hear that and thank you so much for your kind words :heart:

If anything else comes up, we are always here to help :wink: