• Login
    • Search
    • [[global:header.categories]]
    • [[global:header.recent]]
    • [[global:header.popular]]
    • MyVR.com

    Solved How to make myVr calendar on external website more mobile friendly?

    Websites
    3
    8
    3278
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • S
      Surfers' Ridge last edited by

      Hi,

      I have been able to use the calendar app to create html code to display the myVR calendar on my website. It displays fine on desktops and on my tablet. However, on my iphone the calendar is huge and you can only see parts of it.

      My website is below if you want to see it on an iphone: www.surfersridge.com

      Is there a way to make it more mobile friendly so that it becomes smaller on a smartphone?

      Thanks.

      Jenny Oest 1 Reply Last reply Reply Quote 0
      • Jenny Oest
        Jenny Oest @Surfers' Ridge last edited by

        @Surfers’-Ridge

        I’m probably going to show my HTML ignorance here, but…

        I think when you’re inserting the HTML code, do you include <img style=“max-width: 100%;” height=“auto”…

        I use that code for creating mobile friendly HTML messages in my templates.

        Jenny

        1 Reply Last reply Reply Quote 0
        • S
          Surfers' Ridge last edited by

          @Jenny-Oest , I am no html expert either! Here is the code I used from the calendar widget:

          <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:‘861df70bdf81c3ed’, showRates:true});
          /

          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:‘861df70bdf81c3ed’,
          showRates:true,
          elementId:‘#elementId’
          });
          */
          </script>

          Jenny Oest 1 Reply Last reply Reply Quote 0
          • Jenny Oest
            Jenny Oest @Surfers' Ridge last edited by

            @Surfers’-Ridge - Ok this official exceeds my knowledge base. LOL I bet a problem ticket would get this resolved for you “tout de suite”?

            1 Reply Last reply Reply Quote 1
            • Danny Eiden
              Danny Eiden last edited by

              Hi @Surfers-Ridge,

              The calendar widget automatically resizes based on the screen size that it’s being viewed on. Looking at your site, the issue seems to be with the rates being displayed on the calendar. When the rates are displayed on a smartphone sized screen, the calendar can only compress so much because of the text.

              0_1517359488659_Screen Shot 2018-01-30 at 4.31.06 PM.png

              I recommend adding this CSS to your site. It will hide the rates only on smartphone sized screens, allowing the calendar to fully shrink to fit the screen.

              @media (max-width: 768px) {
              	.myvr-calendar-widget table.myvr-calendar-month td.month-cell {
              		font-size: 0px;
              	}
              	.myvr-calendar-widget table.myvr-calendar-month td.month-cell .day {
              		font-size: 18px;
              	}
              }
              

              0_1517359548655_Screen Shot 2018-01-30 at 4.39.51 PM.png

              Cheers,
              Danny

              1 Reply Last reply Reply Quote 0
              • S
                Surfers' Ridge last edited by

                Danny,

                Thanks, I’ll give it a try and see if I can figure out how to get it into the css section. I will post back!

                1 Reply Last reply Reply Quote 0
                • S
                  Surfers' Ridge last edited by

                  Hi Danny,

                  I’ve tried to copy and paste the above code into the mobile.css (see below) but it doesn’t save…I think it’s the ‘@media’

                  *#dm *.dmBody div.u_1260497651 {
                  float : none !important;
                  top : 0px !important;
                  left : 0 !important;
                  width : 100% !important;
                  position : relative !important;
                  height : 531px !important;
                  padding-top : 0px !important;
                  padding-left : 0px !important;
                  padding-bottom : 0px !important;
                  margin-right : auto !important;
                  margin-left : auto !important;
                  max-width : calc(100% - 0px) !important;
                  margin-top : 10px !important;
                  margin-bottom : 10px !important;
                  padding-right : 0px !important;
                  min-width : 25px !important;
                  text-align : center !important;
                  }

                  @media (max-width: 768px) {
                  .myvr-calendar-widget table.myvr-calendar-month td.month-cell {
                  font-size: 0px;
                  }
                  .myvr-calendar-widget table.myvr-calendar-month td.month-cell .day {
                  font-size: 18px;
                  }
                  }

                  This is the calendar html I use for the calendar widget

                  <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=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’,'myvr’));
                  myvr(‘calendar’, {propertyKey:‘861df70bdf81c3ed’, showRates:true});
                  </script>

                  Something I am doing wrong? Thanks again for all your help. I did notice that the months that have gone by where rates are no longer displayed does show up correctly on mobile, so it is because the rate info being displayed doesn’t allow the calendar to resize to mobile.

                  Pins

                  1 Reply Last reply Reply Quote 0
                  • Danny Eiden
                    Danny Eiden last edited by

                    Hi,

                    Your website builder might not allow @media queries in your CSS. If the website builder has a specific area for mobile CSS, you should be able to simply put

                    .myvr-calendar-widget table.myvr-calendar-month td.month-cell {
                    	font-size: 0px;
                    }
                    .myvr-calendar-widget table.myvr-calendar-month td.month-cell .day {
                    	font-size: 18px;
                    }
                    

                    in that section without the @media part. The CSS written above will always hide your rates. It’s important that it’s either wrapped in an @media query or put in a stylesheet that’s only used for mobile devices to ensure that your website displays your rates in the calendar when possible.

                    Best,
                    Danny

                    1 Reply Last reply Reply Quote 0
                    • First post
                      Last post

                    About the MyVR Community

                    • Getting Started
                    • Community Rules
                    • Best Practices
                    Copyright © 2016 - 2020 MyVR | Contact Us
                    Admin Login | Logout