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.

Pat
- Flash Drive: Earn your WPMU DEV membership
- 68 pts: Hero points 30 pts: Rep. points LEVEL 2
I made a comment but it doesn't make sense so I'm replacing it with this apology
Predrag Dubajic
- Support: Earn your WPMU DEV membership
- 3,309 pts: Hero points 25,986 pts: Rep. points LEVEL 30
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: Earn your WPMU DEV membership
- 3,309 pts: Hero points 25,986 pts: Rep. points LEVEL 30
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: Earn your WPMU DEV membership
  - 68 pts: Hero points 30 pts: Rep. points LEVEL 2
  Worked great, thanks!
Pat
- Flash Drive: Earn your WPMU DEV membership
- 68 pts: Hero points 30 pts: Rep. points LEVEL 2
Excellent, I'll try it out
Pat
- Flash Drive: Earn your WPMU DEV membership
- 68 pts: Hero points 30 pts: Rep. points LEVEL 2
Solved!
Pat
- Flash Drive: Earn your WPMU DEV membership
- 68 pts: Hero points 30 pts: Rep. points LEVEL 2
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: Earn your WPMU DEV membership
- 3,980 pts: Hero points 23,296 pts: Rep. points LEVEL 30
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
Pat
- Flash Drive: Earn your WPMU DEV membership
- 68 pts: Hero points 30 pts: Rep. points LEVEL 2
it did work very well regardless of elegance. thank you!!!

Live Chat

Hi, I’m available right now to answer any of your questions :)

Email Us Find out more