-
Issue description: The date and time displayed on my event calendar widget is too close together and is causing confusion. As you can see it reads “February 1 1-4:30” but maybe people read it as “February 11-4:30” can you please advise how to add a separation of some kind to this widget. Thank you!
-
Link to the page with the widget in question: Events — Breath+Oneness Yoga & Wellness Studio in Santa Cruz
1 Like
Hi there, @Bayley_Logan and welcome to the Community 
Would you like to add a separation to all events or just to the one from your screenshot? Would you prefer having this symbol “|” before the time or the additional spacing also works for you?
Thanks so much, Max!
I would love to add the separation to all the events so it reads “Sunday, February 1 | 1:00 PM - 4:30PM”. A dot symbol might be even better if that’s possible “Sunday, February 1 • 1:00 PM - 4:30PM”
Thanks so much for your help! I am using this widget for multiple businesses and would love to make this edit to those too.
1 Like
Got it, thanks! I’ve passed your request to the devs and will let you know once I have their response 
1 Like
Thank you for waiting!
We’ve added this code to the Custom JS field on the Settings tab of your widget’s settings:
const selector = '.eapp-events-calendar-popup-time-text';
function formatDateTime(el) {
const fullText = el.childNodes[0]?.textContent?.trim();
if (!fullText) return;
if (fullText.includes(' • ')) return;
const match = fullText.match(/^(.*?\d{1,2})\s+(.*)$/);
if (!match) return;
const date = match[1];
const time = match[2];
el.childNodes[0].textContent = `${date} • ${time} `;
}
const observer = new MutationObserver(() => {
const el = document.querySelector(selector);
if (el) formatDateTime(el);
});
observer.observe(document.body, {
childList: true,
subtree: true,
});
Please check your website and let me know if you like the result 
It’s perfect! Thank you so much for your help
1 Like
Great, you’re always welcome