Events List Widget month and date styling

[elisef]

Hello folks,

I’m trying to set up the styling of the events list widget as shown on http://www.elisefoster.com/wp2/bio/recent-news/. What “hooks” do I need to enter to show the month and date for each event so that I can style it properly with the CSS.

See also a similar implementation at http://www.cincinnatichamber.com/

thanks,
Ernest.

[Brian]

Hi,

Thanks for using our plugins. I can help you get started on this.

Here is the css you want to modify to change the look of the Month/Date Stamp

.tribe-mini-calendar-event .list-date {
background: #666;
float: left;
margin: 10px 5% 10px 0;
padding: 3px;
width: 15%;
}

.tribe-mini-calendar-event .list-date .list-dayname {
background: #fff;
color: #666;
font-size: 9px;
padding: 3px;
text-transform: uppercase;
}

.tribe-mini-calendar-event .list-date .list-daynumber {
color: #fff;
font-size: 15px;
}

Add that css to your theme’s stylesheet or through a plugin such as Simple Custom CSS.

Then make the modifications there to achieve the look you would like.

Thanks

[elisef]

Hello Brian

thanks for the fast response! I’m sorry I should have been clearer. My challenge is in fact with the “upcoming events” widget, rather than the “events calendar” widget.

I have sorted out the CSS, but need help with the list-widget.php file. In particular, how do I change this code to show month and date?

 <?php
		foreach ( $posts as $post ) :
			setup_postdata( $post );
			?>
  <li class="tribe-events-list-widget-events <?php tribe_events_event_classes() ?>">
                <div class="event">
    <div class="date"> <span class="month"> month </span><br>
      99 </div>
    <?php do_action( 'tribe_events_list_widget_before_the_event_title' ); ?>
    <!-- Event Title -->

What hooks do I use where I’ve got “month” and “99” (the event date) shown?

thanks,
Ernest

[Brian]

The Day and Month functions are found in this file:

events-calendar-pro\views\pro\widgets\modules\single-event.php

This is the coding you will need:


$startDate = strtotime( $post->EventStartDate );
$endDate = strtotime( $post->EventEndDate );
$today = time();

/* If the event starts way in the past or ends way in the future, let's show today's date */
if ( $today > $startDate && $today < $endDate ) {
$postDate = $today;
} else {
$postDate = $startDate;
}

<div class="list-date">
<span
class="list-dayname"><?php echo date_i18n( 'D', $postDate ); ?></span>
<span
class="list-daynumber"><?php echo date_i18n( 'd', $postDate ); ?></span>
</div>

I removed the filters around the date_i18n functions as they are not used in custom coding.

Does that help?

Thanks

[elisef]

Hello Brian

thanks, that got me closer. With some PHP help from a friend, we figured out the following code works in
/wp-content/themes/[mytheme]/tribe-events/widgets/list-widget.php

<ol class="hfeed vcalendar">
  <?php
		foreach ( $posts as $post ) :
			setup_postdata( $post );		
			$postDate = strtotime( $post->EventStartDate );	
			?>
  <li class="tribe-events-list-widget-events <?php tribe_events_event_classes() ?>">
    <div class="event">
    <div class="date"> <span class="month"> <?php echo date_i18n( 'M', $postDate );  ?> </span><br>
      <?php echo date_i18n( 'd', $postDate ); ?> </div>
    <?php do_action( 'tribe_events_list_widget_before_the_event_title' ); ?>
    <!-- Event Title -->
  '

with the CSS

.event .date {
margin-left: 5px;
padding-top: 6px;
background-image: url(/wp2/wp-content/uploads/resources/datebkgd.png);
width: 71px;
height: 71px;
font-size: 31px;
font-weight: normal;
color: #fff;
text-align: center;
float: right;
}
.event .month {
font-size: 12px;
font-weight: normal;
color: #fff;
line-height: 30px;
text-transform: uppercase;
padding-left: 4px;
}`

cheers,
E.

[Brian]

Awesome!

I am glad to see you were able to figure it out.

I am going to go ahead and close this ticket. If you have a similar issue or another in the future, please do not hesitate to create a new ticket.

Thanks!

[Author]

Posts