Small SharePoint 2013 Calendar with day name fix

If you are looking for a small SharePoint 2013 calendar, then Erik has created a nice blog for how to create a small calendar in SharePoint 2013.

http://erikswenson.blogspot.com/2013/04/small-calendar-for-sharepoint-2010-2013.html

As per his instructions I used CEWP with the following CSS –

Note: In SharePoint 2013 you can also use Script Editor web part for adding your CSS as well as JavaScript.

<style>

  .ms-acal-item{height: 10px !important;} .ms-acal-sdiv, .ms-acal-mdiv, .ms-acal-ctrlitem, .ms-acal-month-weeksel, .ms-acal-title, .ms-acal-summary-itemrow TD DIV{height: 15px !important;}

</style>

Now in SharePoint 2013 it will displays calendar with full day names.

I end up using jQuery to reduce the day name length.   Here is the jQuery script that I used to reduced the day name length to 3 character.

<script  type="text/javascript"  src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script language="javascript">

$(document).ready(function() {
     $("table.ms-acal-month > tbody > tr > th.ms-acal-month-top").each(function(){
            // get the first 3 chars from day name
        $cell = $(this).text().substring(0,3);
        $(this).text($cell);

   });
});
</script>

 Thanks & Have Fun!!