How to differentiate days in calendar view that have events vs don’t have events

Hi!

Thanks for reaching out!

We can change that with a bit of CSS. Add the following code in your custom css field ( Wp admin > SportsPress > Settings > General > Custom CSS ) and let us know how it works:

.sp-event-calendar tbody td {
	position: relative;
}
.sp-event-calendar tbody a {
	background: red;
	display: table-cell;
	position: absolute;
	width: 100%;
	top: 0px;
	left: -1px;
	line-height: 87px;
}

Thanks!

Thank you very much. I tried this and it does work, but with some issues. When viewing the website on my PC it looks perfect. However, when viewing the website via mobile phone, the size of the red box is wrong. The width is correct, but the height is too high.

So, I changed the CSS a bit to try to fix this. I tried:
.sp-event-calendar tbody td {
position: relative;
}
.sp-event-calendar tbody a {
background: red;
display: table-cell;
position: absolute;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
line-height: 87px;
}

With this, now with both PC and mobile viewing of the website, the red box is the correct size and in the correct location. However, the day number when viewing on mobile is in the wrong place (it is no longer centered in the box, but moved down). It is fine when viewing on PC.

Any additional help on this would be very, very much appreciated!

Thanks!

Hi!

Thanks for your reply and I’m sorry that my code didn’t work for you.

In this case I believe you can use media queries for different rules for desktop and mobiles, Something like this:

@media only screen and (min-device-width: 780px) {
/* desktops */
}
@media only screen and (max-device-width: 780px) {
/* mobiles*/
}

Thanks!

I found that the default calendar was not really helpful just having the day number in a large box, and I agree the highlighting was not that obvious. I changed the template for the calendar to show the number of games in addition to the day number.
I did this by copying the events-calendar.php template from the sportspress folder (sportspress/templates/events-calendar.php) into my theme folder. At line 223, I changed this:

	if ( array_key_exists($day, $daywithpost) ) // any posts today?
		$calendar_output .= '<a data-tooltip data-options="disable_for_touch:true" class="has-tip" href="' . ( sizeof( $daywithpost[ $day ] ) > 1 ? add_query_arg( array( 'post_type' => 'sp_event' ), get_day_link( $thisyear, $thismonth, $day ) ) . '" title="' . sprintf( '%s events', ( sizeof( $daywithpost[ $day ] ) ) ) : get_post_permalink( $daywithpost[ $day ][0], false, true ) . '" title="' . esc_attr( $ak_titles_for_day[ $day ] ) ) . "\">$day</a>";
	else

to this:

	if ( array_key_exists($day, $daywithpost) ) // any posts today?
	{
		$calendar_output .= $day;

		$calendar_output .= '<br><a data-tooltip data-options="disable_for_touch:true" class="has-tip" href="' . ( sizeof( $daywithpost[ $day ] ) > 1 ? add_query_arg( array( 'post_type' => 'sp_event' ), get_day_link( $thisyear, $thismonth, $day ) ) . '" title="' . sprintf( '%s %s', ( sizeof( $daywithpost[ $day ] ) ), __( 'Events', 'sportspress' ) ) : get_post_permalink( $daywithpost[ $day ][0], false, true ) . '" title="' . esc_attr( $ak_titles_for_day[ $day ] ) ) . "\"><div>".sprintf( '%s %s', ( sizeof( $daywithpost[ $day ] ) ), __( 'Events', 'sportspress' ) )."</div></a>";

	}

• This reply was modified 7 years ago by _drg_.

Hi!

That’s a great idea, actually. Thanks for sharing!

??