Is it possible to add different HTML above and below each month in gridview?

[pdelite]

Hello,
We would like to add different HTML/images above and below the calendar in gridview. To clarify, for example, in June we would add flowers, in July, we would add fireworks, etc. so that when people look at the calendar from month to month, they see different images that represent that month.
Please let me know if this is possible.
Thank you!

[Barry]

Interesting idea!

Definitely possible, yes. Some code like I’ve provided below (which you might add to your theme’s functions.php file) shows the basic ideas behind a customization like this:

add_action( 'tribe_events_after_header', 'calendar_monthly_motif' );

function calendar_monthly_motif() {
	if ( ! tribe_is_month() ) return;
	$date = new DateTime( tribe_get_month_view_date() );
	$month = $date->format( 'M' );

	$imagery = array(
		'Jan' => 'http://ckinknoazoro.files.wordpress.com/2011/06/random.jpg',
		'Feb' => 'http://1.bp.blogspot.com/-cD0mdqrG1VU/T2e1Uqzjo3I/AAAAAAAAASI/4Oki1HXl_WY/s1600/random.jpg',
		'Mar' => 'http://images2.fanpop.com/images/photos/5700000/Random-random-5719756-1280-800.jpg',
		'Apr' => 'http://www.reactiongifs.com/wp-content/uploads/2012/12/funny-pug-dance.gif',
		'May' => 'http://www.mrwallpaper.com/wallpapers/Zebras-Sunrise-Africa.jpg',
		'Jun' => 'http://ts4.mm.bing.net/th?id=HN.608002103181576372&pid=1.7',
		'Jul' => 'http://24.media.tumblr.com/tumblr_m44i5rg2x11qzx780o1_400.gif#funny%20dance%20gif%20280x164',
		'Aug' => 'http://i.telegraph.co.uk/multimedia/archive/02156/snookered_2156306b.jpg',
		'Sep' => 'http://67music.net/wp-content/uploads/2011/11/Sons-of-Malarkey-CD-Release-Party-001.jpg',
		'Oct' => 'http://mushypony.com/wp-content/uploads/2010/10/smiling-llama-header.jpg',
		'Nov' => 'http://ts4.mm.bing.net/th?id=HN.608037794359673753&pid=1.7',
		'Dec' => 'http://2.bp.blogspot.com/_hiSjtpb8YyM/S7Stxq0FKAI/AAAAAAAABbo/ZgFQBl3_25Q/s1600/juicy+lucy2.JPG',
	);

	if ( isset( $imagery[$month] ) ) echo '<img src="' . esc_url( $imagery[$month] ) . '" style="max-width: 100%" />';
}

Naturally you’d need to tweak things here and you’ll probably also find the following resources useful along the way:

• Themer’s Guide
• Tutorials
• Technical Docs

I hope that helps 🙂

[pdelite]

Hi Barry, that definitely helps, thank you so much!!!

[Barry]

Happy to help!

… As an aside – if you have a moment and would like to leave us a review / your thoughts on The Events Calendar so far – we’d love to hear from you 🙂

[Author]

Posts