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>

   <div id="myDropDown" class="dropdown">
  <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
    Dropdown <span class="caret"></span>
  </a>


  <ul id="myTabs" class="dropdown-menu" role="menu" aria-labelledby="dLabel">

    <ul class="nav nav-tabs">
      <li class="active"><a href="#single" data-toggle="tab">Single Month</a></li>
      <li><a href="#multiple" data-toggle="tab">Month Range</a></li>
      <li><a href="#custom" data-toggle="tab">Custom Range</a></li>
    </ul>
    
    <!-- Tab panes -->
    <div class="tab-content">
      <div class="tab-pane active" id="single">Single asdfasdfsda</div>
      <div class="tab-pane" id="multiple">Month asdfafas</div>
      <div class="tab-pane" id="custom">Custom asdfdas</div>
    </div>
  </ul>
</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(month, year, dates) {

    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="myDropDown" class="dropdown">',
      '<a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">',
      'Dropdown <span class="caret"></span>',
      '</a>',
      '<ul id="myTabs" class="dropdown-menu" role="menu" aria-labelledby="dLabel">',
      
      '<!-- TABS -->',
      '<ul class="nav nav-tabs">',
      '<li class="active"><a href="#single" data-toggle="tab">Single Month</a></li>',
      '<li><a...