Some customization requests for Event Calendar app

[user3920]

Firstly thanks for being here - the tips I have seen so far are great. I have never coded before in my life, but just copying and pasted some coding into the settings and then playing around to change the colours has been great. I have searched for answers to all my below questions (because I don’t want to add more pressure) but unfortunately I haven’t found an answer. I was using free plan till today just to get my head around things and play around as the new business isn’t open yet however have upgraded to the full pack today so I can start building the website and widgets correctly.

Anyway I am waffling. I have created an Events Calendar and linked it to my google calendar but have a few questions.

1. At the top of the screen it says the date 17-18 as it is a pub I am keen to just have the event start date on it IE 17th September - Is there some code to remove the end date?

2. In the event times is there some code so I can just display event times and not the date - in this instance 8:00pm - 1:00am

3. Is there code to change the location of the button to the centre?

4. When you click on the button can it open in a new tab instead of taking users away from my website (for now it is just linked to bbc.co.uk)

5. I seen some code but now cant find it to only show maybe the first 4 or 5 lines of the description in the tile - are you able to point me in that direction? (I have already added the code to show the full description in the pop up instead of show more)

When I changes the code for the button (Book a Table) it has also changed the formatting for the invite via email button. Is there a way that I can just format the hyperlinked button that is in the body of the description but keep the invite via email button the same as is standard?

I know I am asking a lot - but thanks in advance for your time spent on this.

[Max]

Hi there, @user3920 and welcome to the Community

It’s a pleasure to know you’ve found our forum a helpful space and the solution provided here worked great for you

As for your questions:

1. You can hide the end date in the event cards using this CSS code:

 .eapp-events-calendar-date-element-endContainer {
  display: none;
}

5. Unfortunately, there is no way to display only the part of the description in the event card. We already have a request for this feature on the Wishlist. Please upvote this idea if you’d like to see it released - Display only part of description in the Event Card

2-4, 6. I guess it’s possible to implement these ideas. I’ve forwarded your request to the devs and will let you know once I have their response

[user3920]

Thanks for your speedy response and Help.

I look forward to the dev teams reply.

[Max]

Hi there, @user3920

We’ve added this CSS code to fix the issue with the Invite Email button and align the custom button to the center:

.global-styles,
.eapp-events-calendar-read-more-content a {
  display: block;
  width: fit-content;
  font-size: 12px;
  font-weight: bold;
  color: #454545;
  background-color: #7ed957 !important;
  padding: 10px 20px;
  border: 0px #7ed957;
  border-radius: 20px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  text-wrap: auto;
  overflow-wrap: anywhere;
  margin: 0 auto;
}

.global-styles,
.eapp-events-calendar-read-more-content a:hover,
.eapp-events-calendar-read-more-content a:focus {
  color: white !important;
}

With this script added to the Custom JS field on the Settings tab, we’ve hidden the date from the popup (you’ll see how it works on your website, not in the widget editor) and enabled link opening in a new tab:

const widgetSelector = ".elfsight-app-fe6aa005-49cf-4f11-bedf-a4fa99ef14cb";
const popupSelector = ".eapp-events-calendar-modal-modal";

const handleLinks = (root) => {
  const links = root.querySelectorAll("a");

  links.forEach((link) => {
    link.setAttribute("target", "_blank");
  });
};

const extractTimeAndUTC = (timeString) => {
  const timePattern = /(\d{1,2}:\d{2} [AP]M(?: UTC[+-]?\d{1,2})?)/g;
  return [...timeString.matchAll(timePattern)].map(match => match[1].trim());
};

const handleTime = (root) => {
  const container = root.querySelector(".eapp-events-calendar-popup-time-content div");
  if (!container) return;

  const dates = container.textContent;
  const times = extractTimeAndUTC(dates);

  container.textContent = times.join(" - ");
};

const widgetEl = document.querySelector(widgetSelector);

if (widgetEl) {
  const widgetObserver = new MutationObserver(() => handleLinks(widgetEl));
  widgetObserver.observe(widgetEl, {
    childList: true,
    subtree: true
  });
}


const documentObserver = new MutationObserver(() => {
  const popup = document.querySelector(popupSelector);

  if (!popup) return;

  documentObserver.disconnect();
  
  handleLinks(popup);
  handleTime(popup);
  
  documentObserver.observe(document, {
    childList: true,
    subtree: true,
  });
});


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

Test it out and let me know if you like the result

[user3920]

Thanks Max, that looks great.

One thing though, the date is still showing in the icon in the tile in masonry view - can we also get that to show only times and not date please?

[Max]

Please let me check it with the devs

[Max]

We’ve slightly adjusted the script to remove dates from the event cards:

const widgetSelector = ".elfsight-app-fe6aa005-49cf-4f11-bedf-a4fa99ef14cb";
const popupSelector = ".eapp-events-calendar-modal-modal";

const widgetTimeContainer = ".eapp-events-calendar-time-time";
const popupTimeContainer = ".eapp-events-calendar-popup-time-content div";

const widgetEl = document.querySelector(widgetSelector);

function handleLinks(root) {
  const links = root.querySelectorAll("a");

  links.forEach((link) => {
    link.setAttribute("target", "_blank");
  });
}

const documentObserver = new MutationObserver(() => {
  const popup = document.querySelector(popupSelector);

  if (!popup) return;

  handleLinks(popup);
  handleTimeContainers(popupTimeContainer, popup);
});

function extractTimeAndUTC(timeString) {
  const timePattern = /(\d{1,2}:\d{2} [AP]M(?: UTC[+-]?\d{1,2})?)/g;
  return [...timeString.matchAll(timePattern)].map((match) => match[1].trim());
}

function handleTime(root) {
  if (!root) return;

  const dates = root.textContent;
  const times = extractTimeAndUTC(dates);

  root.textContent = times.join(" - ");
}

function handleTimeContainers(selector, root) {
  documentObserver.disconnect();

  const timeContainers = root.querySelectorAll(selector);

  timeContainers.forEach((timeContainer) => handleTime(timeContainer));

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

if (widgetEl) {
  const widgetObserver = new MutationObserver(() => {
    widgetObserver.disconnect();

    handleLinks(widgetEl);
    handleTimeContainers(widgetTimeContainer, widgetEl);

    widgetObserver.observe(widgetEl, {
      childList: true,
      subtree: true,
    });
  });

  widgetObserver.observe(widgetEl, {
    childList: true,
    subtree: true,
  });
}

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

Check it out and let me know if you like the result

[user3920]

That’s great - Thanks Max and Team.

[Max]

Perfect, you’re always welcome