Minicalendar AngularJS

directives_calendar.js

// Calendar
//
// Note: This calendar uses some ES6 features, so make sure that the code gets transpilled (f.e. with Babel) in the pipelane. 
//       Also, there are no DI annotations, so it is recommended to use `gulp-ng-annotate` or equivalent.

(function () {
  'use strict';

  angular
    .module('myModule')
    .directive('mMcalendar', calendar);

  function calendar() {
    return {
      restrict: 'E',
      templateUrl: 'assets/templates/directives/mMcalendar.html',
      controller: CalendarController,
      controllerAs: 'calendar'
    };
  }

  function CalendarController(Calendar, Logger) {
    const vm = this,
      logger = Logger.getInstance('CalendarController');

    vm.today = '';
    vm.selectedMonth = '';
    vm.selectedYear = '';
    vm.daysOfWeek = Calendar.daysOfWeek;
    vm.monthData = [];
    vm.nextMonth = nextMonth;
    vm.previousMonth = previousMonth;

    activate();

    ////////////////////////////////////////////////

    function activate() {
      return Calendar.ready()
        .then(() => {
          setCurrentDates();
          setMonthData();
          logger.info('Activated Calendar View');
        });
    }

    function setCurrentDates() {
      const date = new Date();
      vm.today = date.getDate();
      vm.selectedMonth = date.getMonth() + 1;
      vm.selectedYear = date.getFullYear();
    }

    function setMonthData() {
      vm.monthData = Calendar.getMonth(vm.selectedYear, vm.selectedMonth);
    }

    function previousMonth() {
      if (vm.selectedMonth > 1) {
        vm.selectedMonth -= 1;
      } else {
        vm.selectedMonth = 12;
        vm.selectedYear -= 1;
      }
      setMonthData();
    }

    function nextMonth() {
      if (vm.selectedMonth < 12) {
        vm.selectedMonth += 1;
      } else {
        vm.selectedMonth = 1;
        vm.selectedYear += 1;
      }
      setMonthData();
    }
  }
})();

services_Calendar.js

// This service features a perpetual calendar. Names of week are harcoded in Japanese.

(function () {
  'use strict';

  angular
    .module('myModule')
    .factory('Calendar', Calendar);

  function Calendar(Logger) {
    const daysOfWeek = ['日', '月', '火', '水', '木', '金', '土'],
      logger = Logger.getInstance('Calendar'),
      eventesURL = '/api/1/event_dates';

    let eventDAtes,
      months = [];

    return {
      ready,
      daysOfWeek,
      getMonth
    };

    /////////////////////////////////////////////////

    function ready() {
      return getEvents()
        .then((data) => {
          eventDates = data;
          return eventDates;
        });
    }
    
    function getEvents() {
      return $http.get(eventesURL)
        .then(getComplete)
        .catch(getFailed);

      function getComplete(response) {
        logger.info('XHR Succeed.');
        return response.data;
      }

      function getFailed(errormsg) {
        logger.error('XHR Failed. ' + errormsg.statusText);
      }
    }

    function getMonth(year, month) {
      if (!months[year])        months[year] = [];
      if (!months[year][month]) months[year][month] = createMonth(year, month);

      return months[year][month];
    }

    function createMonth(year, month) {
      let cell, dayOfWeek, dayNumber, dayObj, week,
        weekOfMonth = 0,
        firstDayOfCurrentMonth = weekDayOfFirstDayOfMonth(month, year),
        daysInCurrentMonth = daysInMonth(month, year),
        numOfDaysInCalendar = daysInCurrentMonth + firstDayOfCurrentMonth,
        monthArr = {
          weeks: []
        };

      // In order to fill all the cells of the calendar, this loop iterates
      // from the first Sunday before the 1st of the month until the last
      // Saturday after the end of the month.
      for (cell = 0; cellFitsInCalendar(cell); cell += 1) {

        dayNumber = cell - firstDayOfCurrentMonth + 1;
        dayOfWeek = cell % 7;
        weekOfMonth = Math.floor(cell / 7);

        if (isSunday(dayOfWeek)) {
          week = {
            num: weekOfMonth,
            days: []
          };
        }

        dayObj = isDayInCurrentMonth(dayNumber, daysInCurrentMonth) ? new Day(year, month, dayNumber) 
                                                                    : new EmptyDay();

        week.days.push(dayObj);

        if (isSaturday(dayOfWeek)) monthArr.weeks.push(week);
      }

      return monthArr;

      //////

      function isSunday(dayOfWeek) {
        return dayOfWeek === 0;
      }

      function isSaturday(dayOfWeek) {
        return dayOfWeek === 6;
      }

      function cellFitsInCalendar(cell) {
        return !(cell > numOfDaysInCalendar && isSunday(cell % 7) && weekOfMonth > 4);
      }

      function isDayInCurrentMonth(dayNumber, daysInMonth) {
        return dayNumber > 0 && dayNumber <= daysInMonth;
      }

      function weekDayOfFirstDayOfMonth(month, year) {
        return new Date(year, month - 1, 1).getDay();
      }

      function daysInMonth(month, year) {
        const days_in_month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

        if (month === 2 && isLeapYear(year)) return 29;
        
        return days_in_month[month - 1];

        function isLeapYear(year) {
          return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
        }
      }
      
      function EmptyDay() {
        return {
          empty: true
        };
      }


      function Day(year, month, dayNumber) {
        return {
          year: year,
          month: month,
          num: dayNumber,
          event_id: getEventId()
        };

        function getEventId() {
          const eventes = eventDates.filter(event =>
            year === event.year && month === event.month && dayNumber === event.day);

          if (eventes[0]) return eventes[0].id;
        }
      }
    }
  }
  
})();

styles_includes_templates__mMCalendar.less

gl-calendar {
  background-color: @background-light-gray;
  border-radius: 6px;
  text-align: center;
  .prev,
  .next {
    background-color: @background-body;
    border: @layout-lines;
    border-radius: 3px;
    height: 20px;
    padding: 0;
    width: 30px;
  }
  .prev {
    float: left;
  }
  .next {
    float: right;
  }
  table {
    table-layout: fixed;
    width: 100%;
  }
  th {
    padding: 9px 0 8px;
    text-align: center;
  }
  td {
    background-color: @background-body;
    border: @layout-lines;
    color: @text-gray;
  }
  td.empty {
    background-color: @background-dark;
  }
  td.empty:before {
    visibility: hidden;
    font-size: 0.9rem;
    content: "\2205";
  }
}

templates_directives_mMcalendar.html

<button class="prev" title="Show previous month" ng-click=calendar.previousMonth()>&lt;</button>
<button class="next" title="Show next month" ng-click=calendar.nextMonth()>&gt;</button>
{{calendar.selectedYear}}年{{calendar.selectedMonth}}月
<table>
  <thead>
    <th ng-repeat="dayOfWeek in calendar.daysOfWeek">{{ dayOfWeek }}</th>
  </thead>
  <tr ng-repeat="week in calendar.monthData.weeks">
    <td ng-repeat="day in week.days" ng-class="{empty: day.empty}">
      <span ng-if="day.num && !day.event_id">
        {{ day.num }}
      </span>
      <a ng-if="day.event_id" ng-href="/event/{{day.event_id}}">
        {{ day.num }}
      </a>
    </td>
  </tr>
</table>

z_mock_api_1_event_dates.json

[
  {
    "year": 2015,
    "month": 3,
    "day": 12,
    "id": 601
  },
  {
    "year": 2015,
    "month": 3,
    "day": 13,
    "id": 602
  },
  {
    "year": 2015,
    "month": 3,
    "day": 17,
    "id": 603
  },
  {
    "year": 2015,
    "month": 3,
    "day": 19,
    "id": 604
  },
  {
    "year": 2015,
    "month": 4,
    "day": 2,
    "id": 605
  },
  {
    "year": 2015,
    "month": 4,
    "day": 12,
    "id": 606
  }
]