event calendar custom loop #2

<!-- box css/js code -->
<style type="text/css">
.events-cat-menu,#dateList{padding:0}
.blackBar {width: 100%; text-align: center; line-height: 48px; background: #000; height: 48px; font-size: 10px; line-height: 48px; color: #aaa; letter-spacing: .7px;}
#loadMore {margin-top: -3px; border-top:3px solid #000; line-height: 45px; height: 45px;
    display: none;
}
#loadMore a {color: #f8f8f8; line-height: 45px;}
#loadMore a:hover {color: #f8f8f8;}

#filter ul {list-style: none;}
#filter li {display: inline; font-size: 10px; line-height: 48px; margin: 0 8px 0 0; }
#filter li a {color: #aaa; text-transform: uppercase; line-height: 48px; display: inline-block;}
#filter li a:hover,
#filter li a.active {color: #fff;}

#filter.sticky {z-index: 2000; width: 100%}
#filterStickyWrapper,
#filterStickyWrapper #filter {width: 100% !important; left: 0 !important;}

li.box {display: block; float: left; height: 150px; width: 150px; position: relative; overflow: hidden; text-align: center; border-bottom: 3px solid #000; font-weight: bold;}
li.box a {display: block; height: 96px; width: 116px; padding: 27px 17px; color: #000;}
li.box .theDay {font-size:45px; line-height: 50px; }
li.box .theTitle {font-size: 11px; line-height: 14px; font-family: sans-serif; letter-spacing: .5px;font-family: serif;font-style: italic;}
li.box .theTitle span {text-transform: uppercase;  display: inline-block; padding: 2px 8px 0; margin-bottom: 8px; background: #000; color: #f8f8f8; font-size: 9px; font-family: sans-serif; font-style: normal; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;}
li#theEnd {background: #000; color: #f8f8f8; line-height: 160px;}
li.monthYear {background-color: #000; color: #f8f8f8; text-transform: uppercase; font-size: 24px; line-height: 24px; cursor: default;background-image: none;}
li.monthYear a.dateLink {padding: 0; color: #f8f8f8; padding-top: 40px; height: 110px; width: 100%;}
li.monthYear a.dateLink:hover {color: #000;}
li.monthYear span {letter-spacing: 2.5px;}
/*--BACKGROUND COLOR STUFF--*/
li.box a:hover,
.dateInfo:hover,
#wp-calendar td a:hover,
#commentform input[type="submit"]:hover,
input[type="submit"]:hover,
#postNav .pagenav a:hover,
#theTags a:hover,
#tagLine a:hover,
.sliderInfo a:hover,
.flex-direction-nav li a:hover,
#dropmenu li a:hover {background-color:#2ea7fb;}
/*-----HOVER ANIMATION STUFF------*/
ol.flex-control-nav li a,
li.box a,
.dateInfo,
#wp-calendar td a,
#commentform input[type="submit"],
input[type="submit"],
#postNav .pagenav a,
#theTags a,
#tagLine a,
#dropmenu li a,
#dropmenu li,
#dropmenu li a,
#tagLine a,
#theTags a,
.widget_tag_cloud a,
#postNav a,
.sliderInfo a,
.flex-direction-nav li a,
.dateInfo,
ul#detailsTabs > li {
    -moz-transition:background-color 0.20s linear;
    -webkit-transition:background-color 0.20s linear;
    -o-transition:background-color 0.20s linear;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function(){
    //FILTER EFFECTS & APPEARANCE
    var filterLink = jQuery('#filter a');
    filterLink.click(function(){

        jQuery('li.box').removeClass('hideMe');

        filterLink.not(this).removeClass('active');
        jQuery(this).addClass('active');

        var activeCat = jQuery(this).html().toLowerCase().replace(/ /g,'');

        jQuery('li.postEvent').not('li.'+ activeCat).addClass('hideMe').children().stop(true,true).animate({opacity:".1"},350);
        jQuery('li.'+ activeCat).children().stop(true,true).animate({opacity:"1"},350);

        return false;
    });
    jQuery('#filter li').not(':first').prepend("/ &nbsp;&nbsp;&nbsp;");
});
</script>
<!-- end carousel css/js code -->

<!--FILTER-->
<div id="filter" class="blackBar">
<?php
$terms = get_terms("tribe_events_cat");
$count = count($terms);
if ( $count > 0 ){
    echo '<ul class="events-cat-menu">';
    foreach ( $terms as $term ) {
            echo '<li class="cat_'. $term->slug .'"><a href="'. get_term_link($term->slug, 'tribe_events_cat') .'">' . $term->name . '</a></li>';
    }
    echo '</ul>';
}
?>
</div>

<!--UL DATE LIST-->
<ul id="dateList">
<?php
$prev_month = '';
$prev_year = '';

$current_date = date('j M Y');
/* get upcoming 365 day event, you can edit this to less day */
$end_date = date('j M Y', strtotime('365 days'));

$all_events = tribe_get_events(
    array(
        'post_type'     => 'tribe_events',
        'start_date'    => $current_date,
        'end_date'      => $end_date,
        'eventDisplay'  => 'upcoming',
        'posts_per_page'=> -1
    )
);

foreach($all_events as $post) {
    setup_postdata($post);
    $category = get_the_terms($post->ID,'tribe_events_cat');
    if(tribe_get_start_date($post->ID, false, 'M') != $prev_month || tribe_get_start_date($post->ID, false, 'Y') != $prev_year){
?>
    <li class="box monthYear" id="<?php echo tribe_get_start_date($post->ID, false, 'M'); echo tribe_get_start_date($post->ID, false, 'y'); ?>">
        <a class="dateLink" href="<?php echo home_url(); ?>/<?php echo tribe_get_start_date($post->ID, false, 'Y/m'); ?>">
            <span><?php echo tribe_get_start_date($post->ID, false, 'M'); ?></span><br />
            <?php echo tribe_get_start_date($post->ID, false,'Y'); ?>
        </a>
    </li>
<?php } ?>
    <li class="box postEvent<?php foreach ($category as $cat){ echo ' '.$cat->name; } ?>">
        <a  href="<?php the_permalink(); ?>">
            <span class="theDay"><?php echo tribe_get_start_date($post->ID, false, 'd'); ?></span><br />
            <p class="theTitle">
                <span><?php echo tribe_get_start_date($post->ID, false, 'D @ g:i a'); ?></span><br />
                <?php echo the_title(); ?>
            </p>
        </a>
    </li>
<?php
    $prev_month = tribe_get_start_date($post->ID, false, 'M');
    $prev_year = tribe_get_start_date($post->ID, false, 'Y');
}
?>
    <li class="box" id="theEnd"><?php _e("The End.");?></li>

</ul><!--END DATE LIST-->