Embedded calendar on website having strange functionality issues on one website, but not the other (same code!)


  • Newcomer

    So this is a strange one… I’m getting mixed results with the SAME code used on two different websites.

    A = 🙂 > https://www.moonstonebeach.house/
    B = 😞 > https://adventurers.cc/big-pine-key-bungalow/

    Website A has the calendar integrated as an embed and works fine. You can toggle to the next month to view availability perfectly.

    However, on website B… if you click the top right arrow on the calendar to go to the next month, it oddly refreshes the page sometimes or in others, it will go to the next month as expected. But, you can only go to one month in advance before it ends up refreshing the page when you try to view the next month. The functionality of the calendar here is basically broken as a user could never look in advance of what availability you have in the upcoming year.

    Any help or ideas are greatly appreciated!

    The code used on each website A and B is the exact SAME, minus the property key is different for each to pull the correct calendar data accordingly. Here is the code:

    <script id=‘myvrCalendarScript’ type=‘text/javascript’> (function(m,y,v,r,t,a,g){m.MyVRWidgetObject=t,m[t]=m[t]||function(){ (m[t].q=m[t].q||[]).push(arguments);},m[t].l=1new Date(),a=y.createElement(v), g=y.getElementsByTagName(v)[0],a.async=1,a.src=r,g.parentNode.insertBefore(a,g); }(window,document,‘script’,‘https://static.myvr.com/public/calendar/widget.js’,'myvr’)); myvr(‘calendar’, {propertyKey:’###property_key_goes_here###’, showRates:false}); / You can optionally specify a unique HTML element id as a 3rd parameter above. If specified, the calendar will be rendered at the element instead of inline. myvr(‘calendar’, { propertyKey:’###property_key_goes_here###’, showRates:false, elementId:’#elementId’ }); */ </script>


  • Contributor

    With the calendar widget, if you are embedding into a WordPress website, WordPress autofills the blank space in line nine (9) with code to retain that empty space, which in turn breaks the JavaScript.

    When we used WordPress, I would delete that empty space before posting into WordPress.

    Seeing as you are in SquareSpace, I don’t know if it follows a similar protocol.

    I would suggest copying the code out of SquareSpace into an Editing Program that has a “Compare File” function and running it up against the original MyVR code.

    It only takes one missing or one extra character to blow up a nice piece of code. In particular, check to ensure every < has a >, and { have matching } to close them out.

    0_1628531381128_d8054b8b-7907-4b14-9017-681f3ba1e0b6-image.png


  • Newcomer

    Thanks @Joseph-Sennish !

    If one part of the code was wrong though… Site B’s calendar should not populate at all. Right?

    I’ll try the compare and see, but I feel like something else is afoot 👟


  • Newcomer

    @joseph-sennish oops meant to reply here.

    Could you put that code in a copyable format here please?


  • Contributor

    I would suggest you compare your working snippet of code versus the non-operable piece.

    If it’s not in the script, it could be in the CSS. Less fun, more work.


  • Newcomer

    @joseph-sennish the code is identical (minus the propertyKey - which needs to be different to reflect the different calendars). It is the same Squarespace template.

    So my initial thought that something strange seems to be correct and this is a bug.

    Can you please paste your script here so I can try yours and see if I have the same problem?


  • Contributor

    <script id=‘myvrCalendarScript’ type=‘text/javascript’ >
    // Load the MyVR JavaScript library (only do this once)
    (function(m,y,v,r,t,a,g) {
    m.MyVRWidgetObject = t, m[t] = m[t] || function() {
    (m[t].q = m[t].q || []).push(arguments);
    }, m[t].l = 1 * new Date(), a = y.createElement(v),
    g = y.getElementsByTagName(v)[0], a.async = 1, a.src = r, g.parentNode.insertBefore(a, g);
    }(window, document, ‘script’, ‘https://static.myvr.com/public/calendar/widget.js’, ‘_myvrCal’));
    // Draw the MyVR calendar. (repeat for each calendar required)
    _myvrCal(‘calendar’, {
    // Specify the property ID for the calendar
    propertyKey: ‘59b26b8dbd4f4166’,
    // Optionally specify an element ID of where to draw the calendar.
    // If omitted calendar will be drawn whereever this
    // script is placed in the document.
    // elementId:‘myDiv’,
    // Optionally show rates in calendar
    showRates: true
    }); </script>


  • Contributor

    Oddly, when I don’t remove the space, look what happens, even on a message reply…
    <script id=‘myvrCalendarScript’ type=‘text/javascript’ >
    // Load the MyVR JavaScript library (only do this once)
    (function(m,y,v,r,t,a,g) {
    m.MyVRWidgetObject = t, m[t] = m[t] || function() {
    (m[t].q = m[t].q || []).push(arguments);
    }, m[t].l = 1 * new Date(), a = y.createElement(v),
    g = y.getElementsByTagName(v)[0], a.async = 1, a.src = r, g.parentNode.insertBefore(a, g);
    }(window, document, ‘script’, ‘https://static.myvr.com/public/calendar/widget.js’, ‘_myvrCal’));

    // Draw the MyVR calendar. (repeat for each calendar required)
    _myvrCal('calendar', {
        // Specify the property ID for the calendar
        propertyKey: '59b26b8dbd4f4166',
        // Optionally specify an element ID of where to draw the calendar.
        // If omitted calendar will be drawn whereever this
        // script is placed in the document.
        // elementId:'myDiv',
        // Optionally show rates in calendar
        showRates: true
    });
    

    </script>


Log in to reply
 

About the MyVR Community

Looks like your connection to MyVR Community was lost, please wait while we try to reconnect.