Ability to customize date picker

[Amiel_Bautista]

It’d be great if we could change the date picker popup that appears once “Date” button is clicked. Precisely, we’d like to display a few days only there instead of the whole months.

[Max]

Hey there @Amiel_Bautista

Interesting suggestion, thanks for sharing! We’ll keep an eye on how popular it gets

[Mohamed_Ashi]

Hello,

We are using the Event Calendar Widget as the main marketplace interface for tours and activities.

Currently, past dates remain visible in the calendar and listings.
For a tours marketplace, this creates confusion and reduces booking confidence.

Once a date has passed, it should automatically disappear from the widget. Only future and available dates should remain visible.

This is essential for:

• Clean UX

• Conversion optimization

• Marketplace credibility

Since this cannot be adjusted via settings, we would like to request this as a feature improvement.

Please let us know if this can be added in an upcoming update.

Thank you.

[Max]

Hi there, @Mohamed_Ashi

Many thanks for the feedback!

Just to confirm, you mean to exclude all past dates from the date picker, right?

If you’d like to hide cards of the past events, you can easily do this on the Layout tab:

[Mohamed_Ashi]

Thank you for your response @Max,

Show past events option is already off. But dates are still clickable.

[Max]

This setting controls the display of the event cards in the main view, but not the calendar in the Date filter.

To block the past dates in the Date filter, please add this script to the Custom JS section on the Settings tab of your widget’s settings:

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

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

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

const getIstanbulMidnight = () => {
  const now = new Date();
  const istanbulStr = now.toLocaleString("en-US", {
    timeZone: "Europe/Istanbul",
  });
  const istanbulDate = new Date(istanbulStr);
  istanbulDate.setHours(0, 0, 0, 0);
  return istanbulDate;
};

const disablePastDates = () => {
  const todayIstanbul = getIstanbulMidnight();
  const days = document.querySelectorAll(".react-calendar__tile");

  days.forEach((day) => {
    const abbr = day.querySelector("abbr");
    if (abbr && abbr.getAttribute("aria-label")) {
      const dateStr = abbr.getAttribute("aria-label");
      const tileDate = new Date(dateStr);
      tileDate.setHours(0, 0, 0, 0);

      if (tileDate < todayIstanbul) {
        day.style.pointerEvents = "none";
        day.style.opacity = "0.4";
        day.disabled = true;
      } else {
        day.style.pointerEvents = "";
        day.style.opacity = "";
        day.disabled = false;
      }
    }
  });
};

const initCalendarRestrictions = async () => {
  const calendar = await waitForElement(".react-calendar");

  disablePastDates();

  const updateObserver = new MutationObserver(() => {
    disablePastDates();
  });

  updateObserver.observe(calendar, {
    childList: true,
    subtree: true,
  });

  const removalObserver = new MutationObserver((_, obs) => {
    if (!document.contains(calendar)) {
      obs.disconnect();
      updateObserver.disconnect();
      initCalendarRestrictions();
    }
  });

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

initCalendarRestrictions();

This script uses the Istanbul timezone to block past dates:

Please try it out and let me know how it worked

Note: Custom JS doesn’t function in the preview mode, so you can check the result right on your website or through the Share Link

[Mohamed_Ashi]

Perfect. Thanks a lot, Max!