[Plugin: The Events Calendar] Break day and month into separate classes / units

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

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.

Excellent, that works like a charm. Thanks!!