date time separator

[Emily Nein]

Hi! Recently I was instructed on how to use the <br> code as my date/time separator to get the two pieces of information on two different lines for the homepage widget. I recently noticed, however when I’m in the calendar view and hover over the title, the popup box shows the <br> code between the date and time. Any suggestions for making this disappear?

[Matthew]

Howdy LeAnne!

Oh, that is an excellent catch! I can see why you wouldn’t want HTML displaying in the tooltips 🙂  The way our plugin is generating those tooltips helps protect end users from unsafe HTML at the expense of some flexibility – out of the box.  The good news is, you should be able to get those tooltips to display with a line break with a tiny bit of JavaScript!  I threw the following in my theme’s JS file and had great results:

jQuery( function( $ ) {
	// find elements with tribejson (that haven't had their duration fiddled with) and make sure <br> tags are rendered as <br> tags.
	$( '[data-tribejson]:not(.twiddled-date)' ).on( 'mouseover', function() {
		var $el = $( this );

		// give the tooltips time to render and then twiddle the date to replace <br> with <br>
		setTimeout( function() {
			var $abbr = $el.find( '.duration .tribe-events-abbr' );
			$abbr.html( $abbr.html().replace( /\&lt\;br\&gt\;/, '<br>' ) );
			$el.addClass( 'twiddled-date' );
		}, 100 );
	});
});

Does that suit your needs?

[Emily Nein]

This reply is private.

[Matthew]

Not a problem! Your safest course of action would be to avoid editing any of the JavaScript files within “The Events Calendar” plugin.  I just looked at your theme and didn’t spot a JS file that you could easily place that snippet of code into…however, you can add the code to your theme‘s functions.php file as long as you wrap it in a function and hook it to the wp_footer action, like so:

function standrews_twiddle_calendar_datetime() {
  ?>
  <script>
  jQuery( function( $ ) {
	// find elements with tribejson (that haven't had their duration fiddled with) and make sure <br> tags are rendered as <br> tags.
	$( '[data-tribejson]:not(.twiddled-date)' ).on( 'mouseover', function() {
		var $el = $( this );

		// give the tooltips time to render and then twiddle the date to replace <br> with <br>
		setTimeout( function() {
			var $abbr = $el.find( '.duration .tribe-events-abbr' );
			$abbr.html( $abbr.html().replace( /\&lt\;br\&gt\;/, '<br>' ) );
			$el.addClass( 'twiddled-date' );
		}, 100 );
	});
  });
  </script>
  <?php
}
add_action( 'wp_footer', 'standrews_twiddle_calendar_datetime' );

It’s ok to be a little dangerous 🙂 Let me know how this works out for you!

[Matthew]

It has been a while since the last time that I heard back from you so I hope that means everything is working well! 🙂 I am going to go ahead an close this thread, but if you have any further questions, don’t hesitate to open a new one!

[Author]

Posts