Appointments Calendar improve mobile view

Hi There,
The appointments page on our website, particularly the calendar, looks terrible when viewed on mobile. The numbers of the dates are on top of each other and when you do click on a date nothing 'appears' to happen as the user can't see that the time slots are displayed below the calendar.
Is there a way to automatically move down to the time slots when they click on the date? And how can we format the calendar so it is clearer?
The page is -
http://bit.ly/2uqMQnm
Many thanks for your help!

  • Predrag Dubajic

    Hi nifty,

    Hope you're doing well :slight_smile:

    You could try applying this CSS that will sort the size of color legend and the number of dates:

    .appointments-legend-table tbody tr td {
        padding: 6px 12px;
    }
    
    .app_monthly_schedule_wrapper table td p {
        display: inline-block;
    }

    WordPress offers Custom CSS field inside Appearance > Customizer but if your theme disables this and it doesn't have its own CSS field you may wish to use a child theme or a plugin like this one for this additional CSS. That way you're protected when you come to upgrade.

    Scrolling to the time field is not possible out of the box I'm afraid but I did some tests and was able to get it working with bit of jquery code.
    Adding this to your child theme functions.php or as mu-plugin should do the trick:

    function scroll_to_time() { ?>
    
    	<script type="text/javascript">
    		jQuery(".app_monthly_schedule_wrapper table td.free").click(function() {
    		    jQuery('html, body').animate({
    		        scrollTop: jQuery(".app_timetable_wrapper").offset().top
    		    }, 2000);
    		});
    	</script>
    
    <?php }
    add_action( 'wp_footer', 'scroll_to_time' );

    Best regards,
    Predrag

  • Predrag Dubajic

    Hi nifty,

    Ah, my bad, I didn't add the check for screen size, try this script instead of the above one:

    function scroll_to_time() { ?>
    
      <script type="text/javascript">
        var viewportWidth = jQuery(window).width();
    
        if (viewportWidth < 1024) {
          jQuery(".app_monthly_schedule_wrapper table td.free").click(function() {
              jQuery('html, body').animate({
                  scrollTop: jQuery(".app_timetable_wrapper").offset().top
              }, 2000);
          })
        };
      </script>
    
    <?php }
    add_action( 'wp_footer', 'scroll_to_time' );

    This is the line of code responsible for checking the screen width:
    if (viewportWidth < 1024) {
    It's set to work on screens below 1024 pixels so adjust that value to the screens you want to apply the code on.

    Let us know if that works properly now :slight_smile:

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.