Adding an event countdown to the calendar element

head.html

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script type="text/javascript" src="/assets/js/xdate.0.7.min.js"></script>

javascript.js

<script type="text/javascript">
  //run through every .eventDate element on the page
  $('.eventDate').each(function() {
    
    //identify the parent LI element and current date
    var $parent = $(this).parents('li');
    var today = XDate.today();
    
    //grab the date of the current event
    var eventDate = new XDate($(this).text());
    
    //calculate the difference between today and the event date
    var difference = today.diffDays(eventDate);
    //pluralize the word "Day" upon display if necessary
    var plural = '';
    if(difference != 1){var plural = 's';}
    //add countdown to LI element for this event
    var daysTill = '<div class="daystill"><div class="daystillinner">' + difference + '<span class="days">Day' + plural + '</span><div class="cl" /></div></div>';
    
    $parent.prepend(daysTill);
    //identify and add class to the first countdown on the page
    
    //(only necessary if you want to style closest event differently than the rest)
    $(".daystill").first().addClass('first');
    
    //add a clearfix to the LI element to help with styling
    $parent.addClass('cf');
  });
</script>

style.css

.daystill{
  float:left;
  background:#999;
  text-decoration:none;
  display:inline-block;
  border-radius:4px;
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
  -webkit-box-shadow:1px 1px 1px rgba(0, 0, 0, .1);
  -moz-box-shadow:1px 1px 1px rgba(0, 0, 0, .1);
  box-shadow:1px 1px 1px rgba(0, 0, 0, .1);
  width:46px;
  line-height:1.4em;
  margin-right:10px;
}

.daystill.first{
  background:#ce1f37;
}
.daystill span{
  display:block;
  text-align:center;
  width:44px;
}
.daystillinner {
  border:1px solid rgba(0, 0, 0, .1);
  border-bottom-width:2px;
  color:#fff;
  text-shadow:1px 1px 0 rgba(0, 0, 0, .2);
  border-radius:4px;
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
  -webkit-box-shadow:1px 1px 0 rgba(255, 255, 255, .3) inset;
  -moz-box-shadow:1px 1px 0 rgba(255, 255, 255, .3) inset;
  box-shadow:1px 1px 0 rgba(255, 255, 255, .3) inset;
  padding-top:6px;
  font-size:20px;
  text-align:center;
}
span.only,
span.days{
  font-size:9px;
  text-transform: uppercase;
}

/* Nicolas Gallagher's micro clearfix hack http://nicolasgallagher.com/micro-clearfix-hack */
.cl {clear:both;}
.cf:before,
.cf:after {content: " "; display: table;}
.cf:after {clear: both;}
.cf {*zoom: 1;}