New to the community? Start here

[Appointments+] Calendar legend is displayed even when calendar is not.

The calendar color legend ("free", "busy", "not possible") is displayed regardless of whether the calendar is displayed. For example, when the calendar is hidden until a provider or service is selected.
Without the calendar, it looks very odd. It would make much more sense if the legend appeared only when the calendar is displayed.

  • Predrag Dubajic
    • Support

    Hi Pat,

    Hope you're doing well.

    Hmm, it seems that this is indeed default behavior at the moment, I will report this to our plugin developers to see if this could be changed in future.

    I tried finding some jQuery workaround that we could use in the meantime but my tests unfortunately failed, so I'll also ping one of my more code-savvy colleagues to see if there's a way to get my initial tries working :slight_smile:
    We will update you here as soon as we have some additional info.

    Best regards,
    Predrag

  • Predrag Dubajic
    • Support

    Update, I was close so we found what I was missing :slight_smile:

    Here's the code that you can apply by either adding it to your child theme functions.php or as mu-plugin:

    function hide_legend_until_provider(){ ?>
	<style type="text/css">
	.appointments-legend,
	.appointments-pagination {
		display: none;
	}
	</style>
	<script type="text/javascript">
		jQuery(function(){
			if(window.location.href.indexOf("app_provider_id") > -1) {
				jQuery('.appointments-legend, .appointments-pagination').css('display','block');
			}
		})
	</script>
<?php
}
add_action('wp_footer','hide_legend_until_provider');

    After that legend and pagination should be hidden until you select your provider.

    Best regards,
    Predrag

  • Pat
    • Flash Drive

    Hi, this has had an unintended consequence.
    If there's a single provider and the appointment schedule is not loaded but displayed from the get go, the legend does not display and the button for Next Month isn't displayed either.

  • Adam Czajczyk
    • Support Gorilla

    Hello pat,

    Thanks for letting us know about that side effect.

    I gave it another try and came up with a slightly different solution. Could you please replace the code shared by Predrag with the one below? 

    function show_legend_when_calendar_rendered( $title ) {
	$title .= '
		<style type="text/css">
			.appointments-legend,
			.appointments-pagination {
				display: block;
			}
		</style>
	';
	 return $title;
 }

 add_filter( 'app-shortcodes-monthly_schedule-title', 'show_legend_when_calendar_rendered', 10, 1 );

 function hide_legend_until_calendar_rendered() {
	 ?>
	 <style type="text/css">
	.appointments-legend,
	.appointments-pagination {
		display: none;
	}
	</style>
	 <?php
 }
 add_action( 'wp_head', 'hide_legend_until_calendar_rendered');

    Instead of using JavaScript it first prints a CSS to the header of the page that hides the legend and navigation buttons (it has to do it in header because otherwise they'd remind hidden) and then there's the other function that uses A+ native filter that's applied to the title of the calendar.

    It basically injects additional CSS (to show legend) right after the calendar header, so it only shows up there when the calendar is rendered, regardless in what way (whether it was "out of the box" or becuase of service/service provider selection).

    it's not quite "elegant" solution but should sort out the "side effect" and work with other possible scenarios when the calendar is not visible.

    Give it a try please and let me know if it worked for you.

    Best regards,
    Adam

Thank NAME, for their help.

1 Point
5 Points
15 Points
Other

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.