various queries relating to monthly calendar view

[Helli Meinecke]

Hello,

We have a couple of queries regarding TEC Pro and would like some clarification / help please. The site is not live and still in development.

1. Our events go for a number of days, ranging from 2 to 20.
Currently in month view in the calendar, each day of the event shows on the relevant day on the calendar. This makes our calendar look quite busy.
Rather than repeating the words on each Calendar entry, is there a way to show the words on the first day and then have a bar (or something similar linking the consecutive days together)?
If not, is there a way to just list the first day when on the monthly calendar view?
Or how would you suggest doing it to keep the calendar looking clean?

2. In calendar month view: is there a way to include the date range eg July 10 – July 14 below the event title?

3. Hover popup In calendar month view: the hover popup doesn’t add a lot of value for us – it repeats the event title and then shows the date range.
a. Is there a way to include the event summary rather than the name and date range in the hover popup?
b. Alternatively: is there a way to disable the hover popup?

4. We are using TEC Pro and Advanced Filter Bar with Avada and have “Default stylesheet used for events templates” set to Full Styles. When filters are collapsed, the “show filters” button is indented 10px to the left of the button. See attached. I have looked in the browser inspector but can’t work out how to remove this 10px indent. Any ideas?

Thanks for your help.

[Andras]

Hello Jo-Ann,

Thanks for using our plugins and welcome to the forums!

Wow, great questions you have there. Let me help you with them.

1. Multi-day events:

Having a bar go across several days in a month would be quite difficult to do. On the other hand, showing it only on the first day should be doable with a bit of customization. I will look around if we have a solution for that, please give me some time for this.

[… some time passes …]

One of my teammates found this snippet, which should show the multi-day event only on the first day in calendar view. Paste it in your functions.php file and see if the magic happens.

https://gist.github.com/vicskf/5854eb1f88b8886c39743ca250a4ba99

 

2. include the date range below the event title in month view

That is absolutely possible with a template override. You can find the details in our Themer’s Guide on how you can do a template override.

You will likely need to create an override for this file:

wp-content\plugins\the-events-calendar\src\views\month\single-event.php

 

3. Hover popup

Same as above, template override for this file:

wp-content\plugins\the-events-calendar\src\views\month\tooltip.php

 

4. Filter bar button

Try copying the below css into your style.css file and see if it helps.

#tribe_events_filters_toggle {
margin-left: 0 !important;
}

 

These should get you started. Let me know if you have any more questions, I’d be happy to answer.

Cheers,
Andras

[Helli Meinecke]

Hello Andras,

Thanks for the very helpful answer and apologies for the delay in reply. We previously did not have FTP access (I know!) so I moved the site to a new server for the child theme functions.php and month template overrides. Now I have been able to try your suggestions.

#1. Multi-day events

That code works a treat, thanks a lot… Except with the month “single-event.php” template tweak for #2. The new addition (the wrong [[=dateDisplay]] discussed below in #2) is unexpectantly included on every day that has an event even though the corresponding title is no shown due to this function. Any ideas on how to fix that?

#2. include the date range below the event title in month view

Thanks for the tips. I can’t quite get this to work. I have got the child template override happening – The calendar is using the “child template file”. I just don’t know the right “tag” to use for the date range.

I am trying this from the month tooltip below but that returns [[=dateDisplay]] in every day that has an event (even with function from #1)
…

<div id="tribe-events-event-<?php echo esc_attr( $event_id ); ?>" class="<?php tribe_events_event_classes() ?>" data-tribejson='<?php echo esc_attr( tribe_events_template_data( $post ) ); ?>'>
	<h3 class="tribe-events-month-event-title"><a href="<?php echo esc_url( $link ) ?>" class="url"><?php echo $title ?></a></h3>
	<div class="tribe-event-duration"><abbr class="tribe-events-abbr tribe-event-date-start">[[=dateDisplay]]</abbr></div>
</div><!-- #tribe-events-event-# -->

What tag/code do you suggest using to show the date range only if empty – and only on the day when an event is showing (relating to the functions.php code in #1).

#3. Hover popup

Thanks. I think we will leave this for now but appreciate knowing where to do it.

#4. Filter bar button

Perfect, that did it. Thanks.

Thanks for the ongoing support Andras.

• This reply was modified 8 years, 9 months ago by Helli Meinecke. Reason: typo

[Andras]

Hello Jo-Ann,

Happy to hear the multi-day thing worked.

For the date range below the title, I think I misunderstood. I though you want to show it in the tooltip. I just realized you want to show it in the calendar.

That is possible in the following way:

Template override for the-events-calendar\src\views\month\single-event.php

You will need to include these functions:

• https://theeventscalendar.com/function/tribe_format_date/
• https://theeventscalendar.com/function/tribe_get_start_date/
• https://theeventscalendar.com/function/tribe_get_end_date/

Something like this:

<?php echo tribe_format_date(tribe_get_start_date(), false)?>

Will that do the trick?

Andras

[Helli Meinecke]

Thanks for your help Andras.

Do you mean like so?

<p>Test: 
<?php echo tribe_format_date(tribe_get_start_date(), false)?> - <?php echo tribe_format_date(tribe_get_end_date(), false)?>    
</p>

If not, can you please confirm the exact details as we are flying a little blind here.

Not quite sure what you mean by including those 3 functions.

Currently we are using:

<div id="tribe-events-event-<?php echo esc_attr( $event_id ); ?>" class="<?php tribe_events_event_classes() ?>" data-tribejson='<?php echo esc_attr( tribe_events_template_data( $post ) ); ?>'>
	<h3 class="tribe-events-month-event-title"><a href="<?php echo esc_url( $link ) ?>" class="url"><?php echo $title ?></a></h3>
    <p>Test: 
	<?php echo tribe_format_date(tribe_get_start_date(), false)?> - <?php echo tribe_format_date(tribe_get_end_date(), false)?>    
    </p>
</div><!-- #tribe-events-event-# -->

How to handle single day events?
Is it possible to show this (or the equivalent if wrong):
<?php echo tribe_format_date(tribe_get_start_date(), false)?> - <?php echo tribe_format_date(tribe_get_end_date(), false)?>
ONLY if its a multi day event
OTHERWISE if its a single day event don’t show anything?
If so, please advise.

Also, we still have the same issue re the #1 functions code mentioned previously where the date range is included on every day that has an event even though the title is excluded. See attached. Any ideas?

Thanks.

• This reply was modified 8 years, 9 months ago by Helli Meinecke. Reason: typos

[Andras]

Hello Jo-Ann,

You got that perfectly, that is how I imagined it. Awesome job.

I just included the functions so you know / see what they do.

You can find further functions on our website under https://theeventscalendar.com/functions/

We have also discovered a small glitch in the code I provided you earlier. Here is the corrected one:

https://gist.github.com/andrasguseo/620e8deee5d11d3bf2e294813daaf733

Basically you need to wrap the foreach cycle in an if statement to check if the day has an event or not. Without this the code you inserted will be also visible on the “other” days of a multi-day event.

For your second question to show only on multi-day event you can use the tribe_event_is_multiday() function to check if it is multi-day event. Hope this helps. ;o) (I can give you the final code if you want, but then I would rob you of the “Heck yeah!!!” sense of achievement.)

This will be an awesome customization!

Let me know when it’s done, I would love to see it working!

Cheers,
Andras

[Helli Meinecke]

Hi Andras,

Thanks for all your help.

Ah I see.

Thank you for the updated functions code. I have applied that.

Hehe. Drumroll… I think I have got it working:
<?php if ( tribe_event_is_multiday() ) :?> <br/ ><?php echo tribe_format_date(tribe_get_start_date(), false)?> - <?php echo tribe_format_date(tribe_get_end_date(), false)?> <?php endif; ?>

Is that how you would do it?

The full template currently looks like so:

<div id="tribe-events-event-<?php echo esc_attr( $event_id ); ?>" class="<?php tribe_events_event_classes() ?>" data-tribejson='<?php echo esc_attr( tribe_events_template_data( $post ) ); ?>'>
	<h3 class="tribe-events-month-event-title"><a href="<?php echo esc_url( $link ) ?>" class="url">
		<?php echo $title ?>
    	<?php if ( tribe_event_is_multiday() ) :?> <br/ ><?php echo tribe_format_date(tribe_get_start_date(), false)?> - <?php echo tribe_format_date(tribe_get_end_date(), false)?> <?php endif; ?>
    </a></h3>
</div><!-- #tribe-events-event-# -->

One new issue has popped up now that I would really appreciate your help with… Empty h3s which are mucking up the spacing in the calendar. It seems to happen when more than one event occurs per day (but I am not 100% sure as the 18th has one empty h3 (one empty “tribe-events-event…” ‘row’) and the 20th has 2 empty h3’s (two empty “tribe-events-event…” ‘rows’) even though they only have one multi day event each). Screencap is attached which shows has the spacing is off. “Month view events per day” is currently set to 3.

Empty h3 examples from September 4 which has 2 empty “tribe-events-event…” divs

<div id="tribe-events-event--4" class="" data-tribejson='{&quot;i18n&quot;:{&quot;find_out_more&quot;:&quot;Find out more \u00bb&quot;,&quot;for_date&quot;:&quot;Events for&quot;}}'>
	<h3 class="tribe-events-month-event-title"><a href="/" class="url">
		    	    </a></h3>
</div><!-- #tribe-events-event-# -->
	
<div id="tribe-events-event--4" class="" data-tribejson='{&quot;i18n&quot;:{&quot;find_out_more&quot;:&quot;Find out more \u00bb&quot;,&quot;for_date&quot;:&quot;Events for&quot;}}'>
	<h3 class="tribe-events-month-event-title"><a href="/" class="url">
		    	    </a></h3>
</div><!-- #tribe-events-event-# -->

Full day html from September 4 showing all code:

		<td class="tribe-events-thismonth tribe-events-future tribe-events-has-events mobile-trigger tribe-event-day-04"
				data-day="2017-09-04"
				data-tribejson='{"i18n":{"find_out_more":"Find out more \u00bb","for_date":"Events for"},"date_name":"September 4"}'
				>
				
<!-- Day Header -->
<div id="tribe-events-daynum-4">

			<a href="https://our-domain.com/events/2017-09-04/">4</a>
	
</div>

<!-- Events List -->
	
<div id="tribe-events-event--4" class="" data-tribejson='{&quot;i18n&quot;:{&quot;find_out_more&quot;:&quot;Find out more \u00bb&quot;,&quot;for_date&quot;:&quot;Events for&quot;}}'>
	<h3 class="tribe-events-month-event-title"><a href="/" class="url">
		    	    </a></h3>
</div><!-- #tribe-events-event-# -->
	
<div id="tribe-events-event--4" class="" data-tribejson='{&quot;i18n&quot;:{&quot;find_out_more&quot;:&quot;Find out more \u00bb&quot;,&quot;for_date&quot;:&quot;Events for&quot;}}'>
	<h3 class="tribe-events-month-event-title"><a href="/" class="url">
		    	    </a></h3>
</div><!-- #tribe-events-event-# -->
	
<div id="tribe-events-event-13299-4" class="tribe-events-category- post-13299 tribe_events type-tribe_events status-publish hentry tribe-events-venue-13225 tribe-events-last" data-tribejson='{&quot;i18n&quot;:{&quot;find_out_more&quot;:&quot;Find out more \u00bb&quot;,&quot;for_date&quot;:&quot;Events for&quot;},&quot;eventId&quot;:13299,&quot;title&quot;:&quot;14th International Asparagus Symposium | Potsdam, Germany&quot;,&quot;permalink&quot;:&quot;https:\/\/our-domain.com\/event\/14th-international-asparagus-symposium-potsdam-germany-2\/&quot;,&quot;imageSrc&quot;:&quot;&quot;,&quot;dateDisplay&quot;:&quot;September 4 - September 7&quot;,&quot;imageTooltipSrc&quot;:&quot;&quot;,&quot;excerpt&quot;:&quot;<p><\/p>&quot;,&quot;categoryClasses&quot;:&quot;tribe-events-category- post-13299 tribe_events type-tribe_events status-publish hentry tribe-events-venue-13225 tribe-events-last&quot;,&quot;startTime&quot;:&quot;September 4&quot;,&quot;endTime&quot;:&quot;September 7&quot;}'>
	<h3 class="tribe-events-month-event-title"><a href="https://our-domain.com/event/14th-international-asparagus-symposium-potsdam-germany-2/" class="url">
		14th International Asparagus Symposium | Potsdam, Germany    	<br/ > <p>September 4 - September 7</p>     </a></h3>
</div><!-- #tribe-events-event-# -->

<!-- View More -->
	<div class="tribe-events-viewmore">
				<a href="https://our-domain.com/events/2017-09-04/" class="fusion-read-more">View All 4 Events</a>
	</div>
			</td>

Do you have any tricks for overcoming this new related issue Andras?

Thanks so much for your ongoing help.

• This reply was modified 8 years, 9 months ago by Helli Meinecke. Reason: moved the br inside the if statement

[Andras]

Hey Jo-Anne,

YOU NAILED IT!!! Congratulations! 🙂

Reg. the empty tags, yes, unfortunately they are there because only the text is removed.

You can try the following css snippet to minimize the height of those items:

.tribe-events-calendar td > div {
min-height: 0px !important;
}

No guarantee, but it did the work on my test site.

Andras

[Helli Meinecke]

Hi Andras,

Awesome, thanks!

Thanks. That css helped a lot. In our theme (Avada), a smaller gap was still noticeable presumably due to css settings for the h3 and a tags. But you got me thinking.

I came up with a javascript solution which seems to work fine:

<script>
jQuery(document).ready(function($) {
	//Calendar (Month View): Hide empty div rows
	$('.tribe-events-calendar td > div h3.tribe-events-month-event-title a').each(function(){
		if($.trim($(this).text()) == '' && $(this).children().length == 0){
			$(this).parents('.tribe-events-calendar td > div').hide();
		}
	});
});
</script>

The js is a bit slow to load (Avada is big and the js is in footer) so you’d see the events jump slightly up into position – so I looked for a css solution instead.

After looking in the inspector at some of TEC’s css names I tried this (I never would have worked this out if it wasn’t for the inspector):
#tribe-events .tribe-events-calendar div[id*="tribe-events-event--"] { display: none !important; }

This seems to work because the empty “div rows” have an id like “tribe-events-event–4” (eg tribe-events-event–DAY) whereas events with content have an id with the event id in it like “tribe-events-event-13299-4” (eg tribe-events-event-ID-DAY).

BOOM! Now we’re talking.

Just one query remaining from the original post relating to the calendar event popup…
3. b. Alternatively: is there a way to disable the hover popup? If so, please advise how

Thanks again.

• This reply was modified 8 years, 9 months ago by Helli Meinecke.
• This reply was modified 8 years, 9 months ago by Helli Meinecke.

[Helli Meinecke]

Hi Andras,

My reply went missing after a couple of edits so including a shorter version.

Thanks for your help and css prompting.

This seemed to do the trick for us as there is some height provided to the empty h3 a in our theme:
#tribe-events .tribe-events-calendar div[id*="tribe-events-event--"] { display: none !important; }

From original post this query still remains…
3. Hover popup
b. Is there a way to disable the hover popup?

Thanks.

[Andras]

Excellent! I’m stoked to hear you found a solution for that height issue.

As for the tooltip, I’m sorry I totally missed that.

I believe the easiest would be is creating a blank tooltip.php file in the wp-content/{your-theme-folder}/tribe-events/month/ folder. And whoosh, the tooltips are gone. 🙂

Check and let me know if there’s anything else.

Cheers,
Andras

[Helli Meinecke]

Thanks Andras.

No worries. Ok thanks, I will do that if we still want to hide the tooltips.

Thanks again for all your help! You are a superstar

[Andras]

Thanks for the kind words Jo-Anne!

I’m happy I could be of help.

Since the topic is marked resolved I am going to close it, but if you need anything else related to this topic or another please post a new one in the forum and we will be happy to help you out.

Good luck with your project!

Cheers,
Andras

PS: If you like our plugins, and you didn’t yet do so 🙂 we would be happy to receive a review in the wordpress.org repository. Thanks!
https://wordpress.org/support/plugin/the-events-calendar/reviews/
https://wordpress.org/support/plugin/event-tickets/reviews/

PS2: We’d be also grateful if you would give us feedback on your satisfaction with support. Just click on one of the classy looking emojis below. 🙂 If you can spare a few words, that’s even better. Doublethanks!

 

 

[Author]

Posts