How to Create an Event Flag in The Events Calendar by Modern Tribe

You can easily add a flag next to your events listing in The Events Calendar by Modern Tribe. Simply compare the event’s date with today’s date. I recently implemented this on the Avon Free Public Library website. I also included a flag for events happing tomorrow.

As you can see below, we simply compare dates and create a small div which you can style any way you want. I included my css below.

//This goes somewhere in your loop where you have access to the post ID 
//in order to get its start date with tribe_get_start_date

//begin event flag
date_default_timezone_set('America/New_York');
$today = new DateTime('today');
$tomorrow = new DateTime('tomorrow');
$event_date = new DateTime(tribe_get_start_date($post->ID, false, 'Y-m-d'));
$event_flag = '';

if ($event_date == $today){
  $event_flag = '<div class="event-flag">Today!</div>';
}
if ($event_date == $tomorrow){
  $event_flag = '<div class="event-flag">Tomorrow!</div>';
}
//end event flag

This is how to output the flag on your page. I included some of the surrounding code for context. As you can see, I don’t use conditionals here since it’s initially set to nothing.

<?php echo $event_flag; ?><!--begin .front-page-list-info-->
        <div class="front-page-list-info">
           
            <?php echo ($event_featured_heading != "") ? '<div class="featured-heading">'.$event_featured_heading.'</div>' : ''; ?>
            <?php echo $event_flag; ?>

        <?php
        echo '<h2><a href="' . get_permalink() . '">' . get_the_title() . '</a></h2>';

Here’s an example of the css I’m using. The key things to pay attention to are how to align the flag correctly with other elements. In this case, the secret sauce is “position: relative;” and “top: -1px;”.

.event-flag {
    position: relative;
    top: -1px;
    margin: -3px 0 .8em 0;
    padding: 2px 7px;
    display: inline-block;
    background-color: $bright-purple;
    color: white;
    font-size: .6em;
    font-family: $font__main;
    text-transform: uppercase;
}