EOD AngularJS Calendar Widget

For month summary view.

by merganser

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <div data-calendar id="hellopicker">Hello</div>

CSS

body {
		  background-color: #FCFCFC;
		  font-family:'Arial',sans-serif;
		  font-size: 0.9em;
		}
		div.cal {
		  display: inline-block;
		  height: 170px;
		  min-height: 140px;
		  margin: 30px;
		}
		div.cal table {
			border-collapse: collapse;
		}
		div.cal th, div.cal td.cal-head {
		  text-align: center;
		  padding-bottom: 5px;
		  color: #888;
		  border: 0px;
		}
		div.cal td {
		  text-align: center;
		  font-size: 0.9em;
		  border: 1px solid #ddd;
		}
		div.cal div.cal-day {
		  padding: 6px;
		  cursor: pointer;
		  border: 1px solid transparent;
		}
		div.cal div.cal-highlight {
		  background-color: #AAA;
		  color: #FFF;
		}
		div.cal div.cal-highlight-active {
		  background-color: #222;
		  color: #fff;
		}
		div.cal div.cal-day:hover {
		  border: 1px solid #111;
		}

JavaScript

$('#myTabs').on('click', '.nav-tabs a', function(){
    $(this).closest('.dropdown').addClass('dontClose');
})

$('#myDropDown').on('hide.bs.dropdown', function(e) {
    if ( $(this).hasClass('dontClose') ){
        e.preventDefault();
    }
    $(this).removeClass('dontClose');
});
  
  angular.module('calendarfiddle', []).directive('calendar', ['$compile', function ($compile) {

  var activeyear = 2016;

  var currentDate = new Date(activeyear, 1, 1);
  
  
  var monthNames = ['january', 'february', 'march', 'april', 'may', 'june', 'july', 'august', 'september', 'october', 'november', 'december'];
  var days = ['s', 'm', 't', 'w', 't', 'f', 's'];

  var isLeapYear = function (year) {
    return ((year % 4 === 0) && (year % 100 !== 0)) || (year % 400 === 0);
  };

  var daysInMonth = function (date) {
    return [31, (isLeapYear(activeyear) ? 29 : 28), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][date.getMonth()];
  };

  var formatDateHeading = function (date) {
    var m = monthNames[date.getMonth()];
    return m.charAt(0).toUpperCase() + m.slice(1) ;
  };


  function getTemplate(element, month, year, dates) {
var currentId = $(element).attr('id');
var label = $(element).attr('id');
console.log(element);
console.log(currentId);
    var month = ((isNaN(month) || month == null) ? currentDate.getMonth() + 1 : month) - 1,
      year = (isNaN(year) || year == null) ? currentDate.getFullYear() : year,
      firstDay = new Date(year, month, 1),
      startDay = firstDay.getDay(),
      monthLength = daysInMonth(firstDay),
      heading = formatDateHeading(firstDay);

    if (!dates || !dates.length) dates = [currentDate.getDate()];

    var tpl = [
    

'<div id="'+currentId+'SeasonDatePicker" class="dropdown">',
	
	'<div class="input-group">',
		'<h4>Your Date Range Picker</h4>',
		'<input type="text" id="'+currentId+'SeasonDatePickerInput" class="form-control" data-toggle="dropdown">',
		'<i class="glyphicon glyphicon-calendar fa...