Google Calendar synchro

Ask the Community General Questions
1

I have an Appointment Booking widget. Again I have a strange behaviour as the widget do not show all the available days free in my Google calendar.
For example, there are free slots in June that are not shown here below (between May 29 and June 26).

By the way, it would be important to show the Month too in the next slots! Below only the day is shown but we do not know which month it is unless clicking on the date…

image
image1024×261 9.43 KB

Can you help ?

3

Hi there, @Dominique_Dubied :waving_hand:

To check what causes this issue, we’ll need access to your Google Calendar. Could you please share it with me? - m.salishchev@elfsight.com

4

I just shared the calendar with you :slight_smile:

5

Thanks! I’ve forwarded it to the devs and will update you once I have any news :slightly_smiling_face:

As for showing the current month above the date picker, I agree that it would be a nice idea. We already have a request for this on the Wishlist and you can upvote it here - Dynamically change the month when scrolling the dates in the date picker

6

Hi there, @Dominique_Dubied :waving_hand:

Thank you for waiting!

The issue appeared because the CSS code for hiding unavailable dates stopped working correctly after one of the recent updates.

To fix the issue, we’ve added the script below to the Custom JS section on the Settings tab of your widget’s settings:

const waitForElement = (selector, root = document) =>
  new Promise((res) => {
    const observer = new MutationObserver(() => {
      const element = root.querySelector(selector);
      if (element) {
        res(element);
        observer.disconnect();
      }
    });

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

const waitForCarousel = () => {
  waitForElement('button[aria-label*="Back"]').then((backBtn) => {
    const container = document.querySelector(".es-snap-carousel-container");
    if (!container) return;
    container.scrollBy({ left: -10000, behavior: "smooth" });

    const nextBtn = document.querySelector('button[aria-label*="Forward"]');

    backBtn.addEventListener(
      "click",
      (e) => {
        e.preventDefault();
        e.stopPropagation();
        container.scrollBy({
          left: -118,
          behavior: "smooth",
        });
      },
      true,
    );

    if (nextBtn) {
      nextBtn.addEventListener(
        "click",
        (e) => {
          e.preventDefault();
          e.stopPropagation();
          container.scrollBy({
            left: 118,
            behavior: "smooth",
          });
        },
        true,
      );
    }
    waitForCarousel();
  });
};

waitForCarousel();

Since the Custom JS scripts don’t appear in the preview mode, you won’t see changes in the editor. However, everything will be working fine on the website, where the widget is installed:

image
image1471×509 48.7 KB


Please check it out and let me know if everything is working correctly now :slightly_smiling_face:

7

Thanks Max and the Devs for the quick fix! Very appreciated!

Now I guess the testing before releasing a new version could be improved in order to avoid that kind of situation…

Best regards
Dominique

-------- Message d’origine --------