Forums

The Events Calendar
[resolved] Break day and month into separate classes / units (4 posts)

  1. nhinshaw
    Member
    Posted 11 months ago #

    Hello all,
    I am trying to edit events-list-load-widget-display.php to allow for styling the day and month uniquely for the calendar list widget.

    Does anyone know if there are hooks native to the plugin's structure that allow me to call each of those separately and wrap them in their own span? Or if there is another solution that would make this possible?

    Currently this is the php being used:

    <?php
         if ( $start == 'on' && $EventStartDate != '' ) {
         $time = $startTime == 'on' ? true : false;
         echo the_event_start_date( $post->ID, $time );
         }
         if ( $end == 'on' && $EventEndDate != '' ) {
         if( $start == 'on' && $EventStartDate != '' ) echo ' to ';
         $time = $endTime == 'on' ? true : false;
         echo the_event_end_date( $post->ID, $time );
         }
    ?>

    I would think you could just change $time, but haven't found a solution that works.

    Ideally in this process I would also like to omit having the date shown.

    Any help would be greatly appreciated.

    Best,
    Nathan

  2. nhinshaw
    Member
    Posted 11 months ago #

    ** EDIT **
    Ideally in this process I would also like to omit having the YEAR shown. (thanks!)

  3. tugbucket
    Member
    Posted 11 months ago #

    this seems to work:

    <?php
    			if ( $start == 'on' && $EventStartDate != '' ) {
    				$time = $startTime == 'on' ? true : false;
    				//echo the_event_start_date( $post->ID, $time );
    				$tug = explode(' ', str_replace(',', '', the_event_start_date($post->ID)));
    				echo '<span class="month">'.$tug[0].'</span> <span class="day">'.$tug[1].'</span> <span class="year">'.$tug[2].'</span> <span class="time">'.$tug[3].$tug[4].'</span>';
    			}
    			if ( $end == 'on' && $EventEndDate != '' ) {
    				if( $start == 'on' && $EventStartDate != '' ) echo ' to ';
    				$time = $endTime == 'on' ? true : false;
    				//echo the_event_end_date( $post->ID, $time );
    				$tug = explode(' ', str_replace(',', '', the_event_start_date($post->ID)));
    				echo '<span class="month">'.$tug[0].'</span> <span class="day">'.$tug[1].'</span> <span class="year">'.$tug[2].'</span> <span class="time">'.$tug[3].$tug[4].'</span>';
    			}
    		?>

    Taking the the_event_start_date($post->ID) removing the comma after the day, and putting each element after a space in an array. Then for each item in the array, wrapping a span around it to be used for styling (or hiding in your case).

    for instance, an event on the 4th of July produces this HTML

    :

    <li class="alt">
    <div class="when">
    <span class="month">July</span> <span class="day">4</span> <span class="year">2011</span> <span class="time">11:00am</span> to <span class="month">July</span> <span class="day">4</span> <span class="year">2011</span> <span class="time">11:00am</span>
    </div>
    
    etc...
    </li>

    now you can style the spans like:

    .alt .when span.month {}
    .alt .when span.day {}
    .alt .when span.year { display: none; }
    etc...

    Note:
    My dates are eg: July 4, 2011 11:00am

    So if you are using a different date format due to global location, the order of the elements in the array might be out of sync.

  4. nhinshaw
    Member
    Posted 11 months ago #

    Excellent, that works like a charm. Thanks!!

Reply

You must log in to post.

About this Plugin

About this Topic