zmz-calendar - npm Package Compare versions

Comparing version 0.6.1 to 0.7.0

lib/classes/calendar-state.d.ts

@@ -1,3 +0,1 @@
-/// <reference types="moment" />
-import * as moment from 'moment';
 import { DateMap, State, StateMap } from '../types';
@@ -7,11 +5,11 @@ export declare const STATES: StateMap<State>;
     map: DateMap;
-    constructor(dates: moment.Moment[], defaultState?: State);
-    set(date: moment.Moment, state: State): void;
-    toggle(date: moment.Moment, state: State): void;
-    has(date: moment.Moment, state: State): boolean;
-    get(date: moment.Moment): State[];
-    remove(date: moment.Moment, state: State): void;
-    getAll(state: State): moment.Moment[];
-    getLast(state: State): moment.Moment;
-    getFirst(state: State): moment.Moment;
+    constructor(dates: Date[], defaultState?: State);
+    set(date: Date, state: State): void;
+    toggle(date: Date, state: State): void;
+    has(date: Date, state: State): boolean;
+    get(date: Date): State[];
+    remove(date: Date, state: State): void;
+    getAll(state: State): Date[];
+    getLast(state: State): Date;
+    getFirst(state: State): Date;
 }

lib/classes/calendar-state.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var moment = require("moment");
 var lodash_1 = require("lodash");
 var helpers_1 = require("../helpers");
+var date_fns_1 = require("date-fns");
 // TODO add tests extending states
@@ -23,3 +23,3 @@ exports.STATES = {
         dates.forEach(function (date) {
-            var hash = helpers_1.dateHash(date);
+            var hash = helpers_1.dateHash(date_fns_1.startOfDay(date));
             _this.map[hash] = [defaultState];
@@ -76,3 +76,3 @@ });
         });
-        return all.map(function (hash) { return moment(hash); });
+        return all.map(function (hash) { return date_fns_1.parse(hash); });
     };
@@ -79,0 +79,0 @@ CalendarState.prototype.getLast = function (state) {

lib/classes/calendar-state.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"STATES":{"NO_STATE":"","DISABLED":"disabled","UNAVAILABLE":"unavailable","AVAILABLE":"available","SELECTED":"selected","SELECTABLE":"selectable","NOT_SELECTABLE":"not-selectable"},"CalendarState":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","module":"moment","name":"Moment"}]},{"__symbolic":"reference","module":"../types","name":"State"}]}],"set":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"has":[{"__symbolic":"method"}],"get":[{"__symbolic":"method"}],"remove":[{"__symbolic":"method"}],"getAll":[{"__symbolic":"method"}],"getLast":[{"__symbolic":"method"}],"getFirst":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"STATES":{"NO_STATE":"","DISABLED":"disabled","UNAVAILABLE":"unavailable","AVAILABLE":"available","SELECTED":"selected","SELECTABLE":"selectable","NOT_SELECTABLE":"not-selectable"},"CalendarState":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","module":"moment","name":"Moment"}]},{"__symbolic":"reference","module":"../types","name":"State"}]}],"set":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"has":[{"__symbolic":"method"}],"get":[{"__symbolic":"method"}],"remove":[{"__symbolic":"method"}],"getAll":[{"__symbolic":"method"}],"getLast":[{"__symbolic":"method"}],"getFirst":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"STATES":{"NO_STATE":"","DISABLED":"disabled","UNAVAILABLE":"unavailable","AVAILABLE":"available","SELECTED":"selected","SELECTABLE":"selectable","NOT_SELECTABLE":"not-selectable"},"CalendarState":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","name":"Date"}]},{"__symbolic":"reference","module":"../types","name":"State"}]}],"set":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"has":[{"__symbolic":"method"}],"get":[{"__symbolic":"method"}],"remove":[{"__symbolic":"method"}],"getAll":[{"__symbolic":"method"}],"getLast":[{"__symbolic":"method"}],"getFirst":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"STATES":{"NO_STATE":"","DISABLED":"disabled","UNAVAILABLE":"unavailable","AVAILABLE":"available","SELECTED":"selected","SELECTABLE":"selectable","NOT_SELECTABLE":"not-selectable"},"CalendarState":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","name":"Date"}]},{"__symbolic":"reference","module":"../types","name":"State"}]}],"set":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"has":[{"__symbolic":"method"}],"get":[{"__symbolic":"method"}],"remove":[{"__symbolic":"method"}],"getAll":[{"__symbolic":"method"}],"getLast":[{"__symbolic":"method"}],"getFirst":[{"__symbolic":"method"}]}}}}]

lib/components/calendar/calendar.component.d.ts

@@ -1,6 +0,4 @@
-/// <reference types="moment" />
 import { EventEmitter, OnInit, OnChanges } from '@angular/core';
-import * as moment from 'moment';
 import { CalendarMonthComponent } from '../month/calendar-month.component';
-import { CalendarConfig, State, NavigationStrategy, Theme } from '../../types';
+import { CalendarConfig, State, NavigationStrategy, Theme, CalendarLocale } from '../../types';
 import { CalendarState } from '../../classes';
@@ -12,3 +10,3 @@ export declare class CalendarComponent implements OnInit, OnChanges {
     year: number;
-    dateSelected: EventEmitter<moment.Moment>;
+    dateSelected: EventEmitter<Date>;
     weekDaySelected: EventEmitter<number>;
@@ -20,3 +18,3 @@ monthChange: EventEmitter<{
     monthCmp: CalendarMonthComponent;
-    stateFn: (d: moment.Moment) => State[];
+    stateFn: (d: Date) => State[];
     weekDayClickable: boolean;
@@ -27,6 +25,7 @@ completeMonth: boolean;
     validRange: {
-        from?: moment.Moment;
-        to?: moment.Moment;
+        from?: Date;
+        to?: Date;
     };
     theme: Theme;
+    locale: CalendarLocale;
     ngOnInit(): void;
@@ -38,5 +37,5 @@ ngOnChanges(): void;
     onPrev(): void;
-    onDateSelected(date: moment.Moment): void;
+    onDateSelected(date: Date): void;
     onWeekDaySelected(day: number): void;
     readonly monthName: string;
 }

lib/components/calendar/calendar.component.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var core_1 = require("@angular/core");
-var moment = require("moment");
 var calendar_month_component_1 = require("../month/calendar-month.component");
 var classes_1 = require("../../classes");
 var helpers_1 = require("../../helpers");
+var date_fns_1 = require("date-fns");
+var locales_1 = require("../../locales");
 var CalendarComponent = /** @class */ (function () {
@@ -22,3 +23,3 @@ function CalendarComponent() {
         // Set locale
-        moment.locale(locale);
+        this.locale = locale;
         this.theme = theme;
@@ -31,8 +32,8 @@ this.weekDayClickable = weekDayClickable;
         // Month and year defaults to currents
-        var today = moment();
+        var today = new Date();
         if (!this.month) {
-            this.month = today.month() + 1;
+            this.month = date_fns_1.getMonth(today) + 1;
         }
         if (!this.year) {
-            this.year = today.year();
+            this.year = date_fns_1.getYear(today);
         }
@@ -43,6 +44,6 @@ // First emission when calendar is initialized
             this.stateFn = function (date) {
-                if (_this.validRange && _this.validRange.from && _this.validRange.from.isAfter(date)) {
+                if (_this.validRange && _this.validRange.from && date_fns_1.isAfter(_this.validRange.from, date)) {
                     return [classes_1.STATES.DISABLED];
                 }
-                else if (_this.validRange && _this.validRange.to && _this.validRange.to.isBefore(date)) {
+                else if (_this.validRange && _this.validRange.to && date_fns_1.isBefore(_this.validRange.to, date)) {
                     return [classes_1.STATES.DISABLED];
@@ -72,3 +73,3 @@ }
                 return this.validRange && this.validRange.to
-                    ? helpers_1.lastDateToShow(this.month, this.year).isBefore(this.validRange.to)
+                    ? date_fns_1.isBefore(helpers_1.lastDateToShow(this.month, this.year, this.locale), this.validRange.to)
                     : true;
@@ -85,6 +86,13 @@ default:
             case 'validRange':
-            case 'state':
+            case 'state': {
+                var firstDate = helpers_1.firstDateToShow(this.month, this.year, this.locale);
                 return this.validRange && this.validRange.from
-                    ? helpers_1.firstDateToShow(this.month, this.year).isAfter(this.validRange.from)
+                    /**
+                     * Can go prev if:
+                     * 1. The firstDate to show in this month is after the from boundary
+                     * 2. The month of the firstDate to show is the same as the month of the from boundary
+                     */
+                    ? date_fns_1.isAfter(firstDate, this.validRange.from) || date_fns_1.getMonth(firstDate) === date_fns_1.getMonth(this.validRange.from)
                     : true;
+            }
             default:
@@ -114,4 +122,6 @@ return true;
         get: function () {
-            var monthName = moment.months()[this.month - 1];
-            return "" + monthName.charAt(0).toUpperCase() + monthName.slice(1);
+            var date = new Date();
+            date.setMonth(this.month - 1);
+            var mn = date_fns_1.format(date, 'MMMM', { locale: locales_1.LOCALES[this.locale] });
+            return "" + mn.charAt(0).toUpperCase() + mn.slice(1);
         },
@@ -124,3 +134,3 @@ enumerable: true,
                     selector: 'zmz-calendar',
-                    template: "\n    <div class=\"calendar-nav\" [ngClass]=\"{'calendar-nav-show': theme === 'show'}\">\n      <div class=\"nav-btn\" [ngClass]=\"{disabled: !canGoPrev(), 'nav-btn-form': theme === 'form'}\" (click)=\"onPrev()\">\n        <div class=\"icon\" [ngClass]=\"{'icon-chevron-left': theme === 'show', 'icon-left-arrow': theme === 'form'}\"></div>\n      </div>\n      <div> {{ monthName }} {{ year }} </div>\n      <div class=\"nav-btn\" [ngClass]=\"{disabled: !canGoNext(), 'nav-btn-form': theme === 'form'}\" (click)=\"onNext()\">\n        <div class=\"icon\" [ngClass]=\"{'icon-chevron-right': theme === 'show', 'icon-right-arrow': theme === 'form'}\"></div>\n      </div>\n    </div>\n    <zmz-calendar-week-days (weekday)=\"onWeekDaySelected($event)\" [clickable]=\"weekDayClickable\" [theme]=\"theme\"></zmz-calendar-week-days>\n    <zmz-calendar-month [(year)]=\"year\" [(month)]=\"month\" [stateFn]=\"stateFn\" [completeMonth]=\"completeMonth\" (dateSelected)=\"onDateSelected($event)\"></zmz-calendar-month>\n  ",
+                    template: "\n    <div class=\"calendar-nav\" [ngClass]=\"{'calendar-nav-show': theme === 'show'}\">\n      <div class=\"nav-btn\" [ngClass]=\"{disabled: !canGoPrev(), 'nav-btn-form': theme === 'form'}\" (click)=\"onPrev()\">\n        <div class=\"icon\" [ngClass]=\"{'icon-chevron-left': theme === 'show', 'icon-left-arrow': theme === 'form'}\"></div>\n      </div>\n      <div> {{ monthName }} {{ year }} </div>\n      <div class=\"nav-btn\" [ngClass]=\"{disabled: !canGoNext(), 'nav-btn-form': theme === 'form'}\" (click)=\"onNext()\">\n        <div class=\"icon\" [ngClass]=\"{'icon-chevron-right': theme === 'show', 'icon-right-arrow': theme === 'form'}\"></div>\n      </div>\n    </div>\n    <zmz-calendar-week-days (weekday)=\"onWeekDaySelected($event)\" [clickable]=\"weekDayClickable\" [theme]=\"theme\" [locale]=\"locale\"></zmz-calendar-week-days>\n    <zmz-calendar-month [(year)]=\"year\" [(month)]=\"month\" [stateFn]=\"stateFn\" [completeMonth]=\"completeMonth\" (dateSelected)=\"onDateSelected($event)\" [locale]=\"locale\"></zmz-calendar-month>\n  ",
                     styles: ["\n    .calendar-nav {\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: space-between;\n      align-items: center;\n      align-content: center;\n      max-width: 100%; }\n      .calendar-nav-show {\n        background-color: #e5e5e5; }\n\n    .nav-btn {\n      color: #3e99f0;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: center;\n      align-items: center;\n      align-content: center;\n      max-width: 100%;\n      width: 70px;\n      height: 34px;\n      cursor: pointer; }\n      .nav-btn .icon {\n        font-size: 15px; }\n      .nav-btn.disabled {\n        color: #E5E5E5;\n        border-color: #E5E5E5; }\n      .nav-btn-form {\n        border: 1px solid #3e99f0;\n        border-radius: 5px; }\n        .nav-btn-form .icon {\n          font-size: 30px; }\n\n    .icon {\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: center;\n      align-items: center;\n      align-content: center;\n      max-width: 100%; }\n\n    .icon:before {\n      font-family: 'ZomoZ', sans-serif !important;\n      -moz-osx-font-smoothing: grayscale;\n      -webkit-font-smoothing: antialiased;\n      font-style: normal !important;\n      font-variant: normal !important;\n      font-weight: normal !important;\n      line-height: 1;\n      text-transform: none !important;\n      speak: none; }\n\n    .icon-chevron-right:before {\n      content: '\\6e';\n      font-size: 15px; }\n\n    .icon-chevron-left:before {\n      content: '\\70';\n      font-size: 15px; }\n\n    .icon-right-arrow:before {\n      content: '\\66'; }\n\n    .icon-left-arrow:before {\n      content: '\\65'; }\n  "],
@@ -127,0 +137,0 @@ changeDetection: core_1.ChangeDetectionStrategy.OnPush

lib/components/calendar/calendar.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"CalendarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"zmz-calendar","template":"\n    <div class=\"calendar-nav\" [ngClass]=\"{'calendar-nav-show': theme === 'show'}\">\n      <div class=\"nav-btn\" [ngClass]=\"{disabled: !canGoPrev(), 'nav-btn-form': theme === 'form'}\" (click)=\"onPrev()\">\n        <div class=\"icon\" [ngClass]=\"{'icon-chevron-left': theme === 'show', 'icon-left-arrow': theme === 'form'}\"></div>\n      </div>\n      <div> {{ monthName }} {{ year }} </div>\n      <div class=\"nav-btn\" [ngClass]=\"{disabled: !canGoNext(), 'nav-btn-form': theme === 'form'}\" (click)=\"onNext()\">\n        <div class=\"icon\" [ngClass]=\"{'icon-chevron-right': theme === 'show', 'icon-right-arrow': theme === 'form'}\"></div>\n      </div>\n    </div>\n    <zmz-calendar-week-days (weekday)=\"onWeekDaySelected($event)\" [clickable]=\"weekDayClickable\" [theme]=\"theme\"></zmz-calendar-week-days>\n    <zmz-calendar-month [(year)]=\"year\" [(month)]=\"month\" [stateFn]=\"stateFn\" [completeMonth]=\"completeMonth\" (dateSelected)=\"onDateSelected($event)\"></zmz-calendar-month>\n  ","styles":["\n    .calendar-nav {\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: space-between;\n      align-items: center;\n      align-content: center;\n      max-width: 100%; }\n      .calendar-nav-show {\n        background-color: #e5e5e5; }\n\n    .nav-btn {\n      color: #3e99f0;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: center;\n      align-items: center;\n      align-content: center;\n      max-width: 100%;\n      width: 70px;\n      height: 34px;\n      cursor: pointer; }\n      .nav-btn .icon {\n        font-size: 15px; }\n      .nav-btn.disabled {\n        color: #E5E5E5;\n        border-color: #E5E5E5; }\n      .nav-btn-form {\n        border: 1px solid #3e99f0;\n        border-radius: 5px; }\n        .nav-btn-form .icon {\n          font-size: 30px; }\n\n    .icon {\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: center;\n      align-items: center;\n      align-content: center;\n      max-width: 100%; }\n\n    .icon:before {\n      font-family: 'ZomoZ', sans-serif !important;\n      -moz-osx-font-smoothing: grayscale;\n      -webkit-font-smoothing: antialiased;\n      font-style: normal !important;\n      font-variant: normal !important;\n      font-weight: normal !important;\n      line-height: 1;\n      text-transform: none !important;\n      speak: none; }\n\n    .icon-chevron-right:before {\n      content: '\\6e';\n      font-size: 15px; }\n\n    .icon-chevron-left:before {\n      content: '\\70';\n      font-size: 15px; }\n\n    .icon-right-arrow:before {\n      content: '\\66'; }\n\n    .icon-left-arrow:before {\n      content: '\\65'; }\n  "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"state":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"month":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"year":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dateSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"weekDaySelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"monthChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"monthCmp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"../month/calendar-month.component","name":"CalendarMonthComponent"}]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"canGoNext":[{"__symbolic":"method"}],"canGoPrev":[{"__symbolic":"method"}],"onNext":[{"__symbolic":"method"}],"onPrev":[{"__symbolic":"method"}],"onDateSelected":[{"__symbolic":"method"}],"onWeekDaySelected":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"CalendarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"zmz-calendar","template":"\n    <div class=\"calendar-nav\" [ngClass]=\"{'calendar-nav-show': theme === 'show'}\">\n      <div class=\"nav-btn\" [ngClass]=\"{disabled: !canGoPrev(), 'nav-btn-form': theme === 'form'}\" (click)=\"onPrev()\">\n        <div class=\"icon\" [ngClass]=\"{'icon-chevron-left': theme === 'show', 'icon-left-arrow': theme === 'form'}\"></div>\n      </div>\n      <div> {{ monthName }} {{ year }} </div>\n      <div class=\"nav-btn\" [ngClass]=\"{disabled: !canGoNext(), 'nav-btn-form': theme === 'form'}\" (click)=\"onNext()\">\n        <div class=\"icon\" [ngClass]=\"{'icon-chevron-right': theme === 'show', 'icon-right-arrow': theme === 'form'}\"></div>\n      </div>\n    </div>\n    <zmz-calendar-week-days (weekday)=\"onWeekDaySelected($event)\" [clickable]=\"weekDayClickable\" [theme]=\"theme\"></zmz-calendar-week-days>\n    <zmz-calendar-month [(year)]=\"year\" [(month)]=\"month\" [stateFn]=\"stateFn\" [completeMonth]=\"completeMonth\" (dateSelected)=\"onDateSelected($event)\"></zmz-calendar-month>\n  ","styles":["\n    .calendar-nav {\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: space-between;\n      align-items: center;\n      align-content: center;\n      max-width: 100%; }\n      .calendar-nav-show {\n        background-color: #e5e5e5; }\n\n    .nav-btn {\n      color: #3e99f0;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: center;\n      align-items: center;\n      align-content: center;\n      max-width: 100%;\n      width: 70px;\n      height: 34px;\n      cursor: pointer; }\n      .nav-btn .icon {\n        font-size: 15px; }\n      .nav-btn.disabled {\n        color: #E5E5E5;\n        border-color: #E5E5E5; }\n      .nav-btn-form {\n        border: 1px solid #3e99f0;\n        border-radius: 5px; }\n        .nav-btn-form .icon {\n          font-size: 30px; }\n\n    .icon {\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: center;\n      align-items: center;\n      align-content: center;\n      max-width: 100%; }\n\n    .icon:before {\n      font-family: 'ZomoZ', sans-serif !important;\n      -moz-osx-font-smoothing: grayscale;\n      -webkit-font-smoothing: antialiased;\n      font-style: normal !important;\n      font-variant: normal !important;\n      font-weight: normal !important;\n      line-height: 1;\n      text-transform: none !important;\n      speak: none; }\n\n    .icon-chevron-right:before {\n      content: '\\6e';\n      font-size: 15px; }\n\n    .icon-chevron-left:before {\n      content: '\\70';\n      font-size: 15px; }\n\n    .icon-right-arrow:before {\n      content: '\\66'; }\n\n    .icon-left-arrow:before {\n      content: '\\65'; }\n  "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"state":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"month":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"year":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dateSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"weekDaySelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"monthChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"monthCmp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"../month/calendar-month.component","name":"CalendarMonthComponent"}]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"canGoNext":[{"__symbolic":"method"}],"canGoPrev":[{"__symbolic":"method"}],"onNext":[{"__symbolic":"method"}],"onPrev":[{"__symbolic":"method"}],"onDateSelected":[{"__symbolic":"method"}],"onWeekDaySelected":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"CalendarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"zmz-calendar","template":"\n    <div class=\"calendar-nav\" [ngClass]=\"{'calendar-nav-show': theme === 'show'}\">\n      <div class=\"nav-btn\" [ngClass]=\"{disabled: !canGoPrev(), 'nav-btn-form': theme === 'form'}\" (click)=\"onPrev()\">\n        <div class=\"icon\" [ngClass]=\"{'icon-chevron-left': theme === 'show', 'icon-left-arrow': theme === 'form'}\"></div>\n      </div>\n      <div> {{ monthName }} {{ year }} </div>\n      <div class=\"nav-btn\" [ngClass]=\"{disabled: !canGoNext(), 'nav-btn-form': theme === 'form'}\" (click)=\"onNext()\">\n        <div class=\"icon\" [ngClass]=\"{'icon-chevron-right': theme === 'show', 'icon-right-arrow': theme === 'form'}\"></div>\n      </div>\n    </div>\n    <zmz-calendar-week-days (weekday)=\"onWeekDaySelected($event)\" [clickable]=\"weekDayClickable\" [theme]=\"theme\" [locale]=\"locale\"></zmz-calendar-week-days>\n    <zmz-calendar-month [(year)]=\"year\" [(month)]=\"month\" [stateFn]=\"stateFn\" [completeMonth]=\"completeMonth\" (dateSelected)=\"onDateSelected($event)\" [locale]=\"locale\"></zmz-calendar-month>\n  ","styles":["\n    .calendar-nav {\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: space-between;\n      align-items: center;\n      align-content: center;\n      max-width: 100%; }\n      .calendar-nav-show {\n        background-color: #e5e5e5; }\n\n    .nav-btn {\n      color: #3e99f0;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: center;\n      align-items: center;\n      align-content: center;\n      max-width: 100%;\n      width: 70px;\n      height: 34px;\n      cursor: pointer; }\n      .nav-btn .icon {\n        font-size: 15px; }\n      .nav-btn.disabled {\n        color: #E5E5E5;\n        border-color: #E5E5E5; }\n      .nav-btn-form {\n        border: 1px solid #3e99f0;\n        border-radius: 5px; }\n        .nav-btn-form .icon {\n          font-size: 30px; }\n\n    .icon {\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: center;\n      align-items: center;\n      align-content: center;\n      max-width: 100%; }\n\n    .icon:before {\n      font-family: 'ZomoZ', sans-serif !important;\n      -moz-osx-font-smoothing: grayscale;\n      -webkit-font-smoothing: antialiased;\n      font-style: normal !important;\n      font-variant: normal !important;\n      font-weight: normal !important;\n      line-height: 1;\n      text-transform: none !important;\n      speak: none; }\n\n    .icon-chevron-right:before {\n      content: '\\6e';\n      font-size: 15px; }\n\n    .icon-chevron-left:before {\n      content: '\\70';\n      font-size: 15px; }\n\n    .icon-right-arrow:before {\n      content: '\\66'; }\n\n    .icon-left-arrow:before {\n      content: '\\65'; }\n  "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"state":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"month":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"year":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dateSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"weekDaySelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"monthChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"monthCmp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"../month/calendar-month.component","name":"CalendarMonthComponent"}]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"canGoNext":[{"__symbolic":"method"}],"canGoPrev":[{"__symbolic":"method"}],"onNext":[{"__symbolic":"method"}],"onPrev":[{"__symbolic":"method"}],"onDateSelected":[{"__symbolic":"method"}],"onWeekDaySelected":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"CalendarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"zmz-calendar","template":"\n    <div class=\"calendar-nav\" [ngClass]=\"{'calendar-nav-show': theme === 'show'}\">\n      <div class=\"nav-btn\" [ngClass]=\"{disabled: !canGoPrev(), 'nav-btn-form': theme === 'form'}\" (click)=\"onPrev()\">\n        <div class=\"icon\" [ngClass]=\"{'icon-chevron-left': theme === 'show', 'icon-left-arrow': theme === 'form'}\"></div>\n      </div>\n      <div> {{ monthName }} {{ year }} </div>\n      <div class=\"nav-btn\" [ngClass]=\"{disabled: !canGoNext(), 'nav-btn-form': theme === 'form'}\" (click)=\"onNext()\">\n        <div class=\"icon\" [ngClass]=\"{'icon-chevron-right': theme === 'show', 'icon-right-arrow': theme === 'form'}\"></div>\n      </div>\n    </div>\n    <zmz-calendar-week-days (weekday)=\"onWeekDaySelected($event)\" [clickable]=\"weekDayClickable\" [theme]=\"theme\" [locale]=\"locale\"></zmz-calendar-week-days>\n    <zmz-calendar-month [(year)]=\"year\" [(month)]=\"month\" [stateFn]=\"stateFn\" [completeMonth]=\"completeMonth\" (dateSelected)=\"onDateSelected($event)\" [locale]=\"locale\"></zmz-calendar-month>\n  ","styles":["\n    .calendar-nav {\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: space-between;\n      align-items: center;\n      align-content: center;\n      max-width: 100%; }\n      .calendar-nav-show {\n        background-color: #e5e5e5; }\n\n    .nav-btn {\n      color: #3e99f0;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: center;\n      align-items: center;\n      align-content: center;\n      max-width: 100%;\n      width: 70px;\n      height: 34px;\n      cursor: pointer; }\n      .nav-btn .icon {\n        font-size: 15px; }\n      .nav-btn.disabled {\n        color: #E5E5E5;\n        border-color: #E5E5E5; }\n      .nav-btn-form {\n        border: 1px solid #3e99f0;\n        border-radius: 5px; }\n        .nav-btn-form .icon {\n          font-size: 30px; }\n\n    .icon {\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: center;\n      align-items: center;\n      align-content: center;\n      max-width: 100%; }\n\n    .icon:before {\n      font-family: 'ZomoZ', sans-serif !important;\n      -moz-osx-font-smoothing: grayscale;\n      -webkit-font-smoothing: antialiased;\n      font-style: normal !important;\n      font-variant: normal !important;\n      font-weight: normal !important;\n      line-height: 1;\n      text-transform: none !important;\n      speak: none; }\n\n    .icon-chevron-right:before {\n      content: '\\6e';\n      font-size: 15px; }\n\n    .icon-chevron-left:before {\n      content: '\\70';\n      font-size: 15px; }\n\n    .icon-right-arrow:before {\n      content: '\\66'; }\n\n    .icon-left-arrow:before {\n      content: '\\65'; }\n  "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"state":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"month":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"year":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dateSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"weekDaySelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"monthChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"monthCmp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"../month/calendar-month.component","name":"CalendarMonthComponent"}]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"canGoNext":[{"__symbolic":"method"}],"canGoPrev":[{"__symbolic":"method"}],"onNext":[{"__symbolic":"method"}],"onPrev":[{"__symbolic":"method"}],"onDateSelected":[{"__symbolic":"method"}],"onWeekDaySelected":[{"__symbolic":"method"}]}}}}]

lib/components/month/calendar-month.component.d.ts

@@ -1,22 +0,22 @@
-/// <reference types="moment" />
 import { OnInit, EventEmitter } from '@angular/core';
-import * as moment from 'moment';
-import { State } from '../../types';
+import { State, CalendarLocale } from '../../types';
 export declare class CalendarMonthComponent implements OnInit {
     month: number;
     year: number;
-    stateFn: (date: moment.Moment) => State[];
+    stateFn: (date: Date) => State[];
     completeMonth: boolean;
+    locale: CalendarLocale;
     monthChange: EventEmitter<number>;
     yearChange: EventEmitter<number>;
-    dateSelected: EventEmitter<moment.Moment>;
-    weeks: moment.Moment[][];
+    dateSelected: EventEmitter<Date>;
+    weeks: Date[][];
     ngOnInit(): void;
     prev(): void;
     next(): void;
-    inMonth(date: moment.Moment): boolean;
-    selectDate(date: moment.Moment): void;
-    dateState(date: moment.Moment): string[];
+    inMonth(date: Date): boolean;
+    getDateText(date: Date): number | "";
+    selectDate(date: Date): void;
+    dateState(date: Date): string[];
     buildMonth(): void;
-    trackDate(index: number, date: moment.Moment): string;
+    trackDate(index: number, date: Date): number;
 }

lib/components/month/calendar-month.component.js

@@ -5,2 +5,3 @@ "use strict";
 var helpers_1 = require("../../helpers");
+var date_fns_1 = require("date-fns");
 var CalendarMonthComponent = /** @class */ (function () {
@@ -39,4 +40,7 @@ function CalendarMonthComponent() {
     CalendarMonthComponent.prototype.inMonth = function (date) {
-        return date.month() === this.month - 1;
+        return date_fns_1.getMonth(date) === this.month - 1;
     };
+    CalendarMonthComponent.prototype.getDateText = function (date) {
+        return !this.completeMonth && !this.inMonth(date) ? '' : date_fns_1.getDate(date);
+    };
     CalendarMonthComponent.prototype.selectDate = function (date) {
@@ -56,9 +60,9 @@ if (this.inMonth(date) || (!this.inMonth(date) && this.completeMonth)) {
     CalendarMonthComponent.prototype.buildMonth = function () {
-        this.weeks = helpers_1.weeksToShow(this.month, this.year);
+        this.weeks = helpers_1.weeksToShow(this.month, this.year, this.locale);
     };
-    CalendarMonthComponent.prototype.trackDate = function (index, date) { return date.toISOString(); };
+    CalendarMonthComponent.prototype.trackDate = function (index, date) { return date.getTime(); };
     CalendarMonthComponent.decorators = [
         { type: core_1.Component, args: [{
                     selector: 'zmz-calendar-month',
-                    template: "\n    <div>\n      <div class=\"week\" *ngFor=\"let week of weeks\">\n        <zmz-calendar-day \n          *ngFor=\"let date of week; trackBy:trackDate\"\n          [ngClass]=\"dateState(date)\"\n          (click)=\"selectDate(date)\"\n        > {{ !completeMonth && !inMonth(date) ? '' : date.date() }} </zmz-calendar-day>\n      </div>\n    </div>\n  ",
+                    template: "\n    <div>\n      <div class=\"week\" *ngFor=\"let week of weeks\">\n        <zmz-calendar-day \n          *ngFor=\"let date of week; trackBy:trackDate\"\n          [ngClass]=\"dateState(date)\"\n          (click)=\"selectDate(date)\"\n        > {{ getDateText(date) }} </zmz-calendar-day>\n      </div>\n    </div>\n  ",
                     styles: ["\n    .week {\n      display: flex;\n      flex-direction: row; }\n  "]
@@ -74,2 +78,3 @@ },] },
         'completeMonth': [{ type: core_1.Input },],
+        'locale': [{ type: core_1.Input },],
         'monthChange': [{ type: core_1.Output },],
@@ -76,0 +81,0 @@ 'yearChange': [{ type: core_1.Output },],

lib/components/month/calendar-month.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"CalendarMonthComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"zmz-calendar-month","template":"\n    <div>\n      <div class=\"week\" *ngFor=\"let week of weeks\">\n        <zmz-calendar-day \n          *ngFor=\"let date of week; trackBy:trackDate\"\n          [ngClass]=\"dateState(date)\"\n          (click)=\"selectDate(date)\"\n        > {{ !completeMonth && !inMonth(date) ? '' : date.date() }} </zmz-calendar-day>\n      </div>\n    </div>\n  ","styles":["\n    .week {\n      display: flex;\n      flex-direction: row; }\n  "]}]}],"members":{"month":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"year":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"stateFn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"completeMonth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"monthChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"yearChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dateSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"ngOnInit":[{"__symbolic":"method"}],"prev":[{"__symbolic":"method"}],"next":[{"__symbolic":"method"}],"inMonth":[{"__symbolic":"method"}],"selectDate":[{"__symbolic":"method"}],"dateState":[{"__symbolic":"method"}],"buildMonth":[{"__symbolic":"method"}],"trackDate":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"CalendarMonthComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"zmz-calendar-month","template":"\n    <div>\n      <div class=\"week\" *ngFor=\"let week of weeks\">\n        <zmz-calendar-day \n          *ngFor=\"let date of week; trackBy:trackDate\"\n          [ngClass]=\"dateState(date)\"\n          (click)=\"selectDate(date)\"\n        > {{ !completeMonth && !inMonth(date) ? '' : date.date() }} </zmz-calendar-day>\n      </div>\n    </div>\n  ","styles":["\n    .week {\n      display: flex;\n      flex-direction: row; }\n  "]}]}],"members":{"month":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"year":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"stateFn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"completeMonth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"monthChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"yearChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dateSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"ngOnInit":[{"__symbolic":"method"}],"prev":[{"__symbolic":"method"}],"next":[{"__symbolic":"method"}],"inMonth":[{"__symbolic":"method"}],"selectDate":[{"__symbolic":"method"}],"dateState":[{"__symbolic":"method"}],"buildMonth":[{"__symbolic":"method"}],"trackDate":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"CalendarMonthComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"zmz-calendar-month","template":"\n    <div>\n      <div class=\"week\" *ngFor=\"let week of weeks\">\n        <zmz-calendar-day \n          *ngFor=\"let date of week; trackBy:trackDate\"\n          [ngClass]=\"dateState(date)\"\n          (click)=\"selectDate(date)\"\n        > {{ getDateText(date) }} </zmz-calendar-day>\n      </div>\n    </div>\n  ","styles":["\n    .week {\n      display: flex;\n      flex-direction: row; }\n  "]}]}],"members":{"month":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"year":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"stateFn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"completeMonth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"locale":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"monthChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"yearChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dateSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"ngOnInit":[{"__symbolic":"method"}],"prev":[{"__symbolic":"method"}],"next":[{"__symbolic":"method"}],"inMonth":[{"__symbolic":"method"}],"getDateText":[{"__symbolic":"method"}],"selectDate":[{"__symbolic":"method"}],"dateState":[{"__symbolic":"method"}],"buildMonth":[{"__symbolic":"method"}],"trackDate":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"CalendarMonthComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"zmz-calendar-month","template":"\n    <div>\n      <div class=\"week\" *ngFor=\"let week of weeks\">\n        <zmz-calendar-day \n          *ngFor=\"let date of week; trackBy:trackDate\"\n          [ngClass]=\"dateState(date)\"\n          (click)=\"selectDate(date)\"\n        > {{ getDateText(date) }} </zmz-calendar-day>\n      </div>\n    </div>\n  ","styles":["\n    .week {\n      display: flex;\n      flex-direction: row; }\n  "]}]}],"members":{"month":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"year":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"stateFn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"completeMonth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"locale":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"monthChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"yearChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dateSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"ngOnInit":[{"__symbolic":"method"}],"prev":[{"__symbolic":"method"}],"next":[{"__symbolic":"method"}],"inMonth":[{"__symbolic":"method"}],"getDateText":[{"__symbolic":"method"}],"selectDate":[{"__symbolic":"method"}],"dateState":[{"__symbolic":"method"}],"buildMonth":[{"__symbolic":"method"}],"trackDate":[{"__symbolic":"method"}]}}}}]

lib/components/week-days/calendar-week-days.component.d.ts

 import { OnInit, EventEmitter } from '@angular/core';
-import { Theme } from '../../types';
+import { Theme, CalendarLocale } from '../../types';
 export declare class CalendarWeekDaysComponent implements OnInit {
     clickable: boolean;
     theme: Theme;
+    locale: CalendarLocale;
     weekday: EventEmitter<number>;
@@ -7,0 +8,0 @@ weekDays: string[];

lib/components/week-days/calendar-week-days.component.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var core_1 = require("@angular/core");
-var moment = require("moment");
+var locales_1 = require("../../locales");
+var date_fns_1 = require("date-fns");
 var CalendarWeekDaysComponent = /** @class */ (function () {
@@ -11,12 +12,18 @@ function CalendarWeekDaysComponent() {
     CalendarWeekDaysComponent.prototype.ngOnInit = function () {
+        var _this = this;
+        var today = new Date();
+        var weekArray = date_fns_1.eachDay(this.locale === 'en' ? date_fns_1.startOfWeek(today) : date_fns_1.startOfISOWeek(today), this.locale === 'en' ? date_fns_1.endOfWeek(today) : date_fns_1.endOfISOWeek(today));
         switch (this.theme) {
-            case 'show':
-                this.weekDays = moment.weekdaysShort(true).map(function (day) {
-                    return "" + day.charAt(0).toUpperCase();
+            case 'show': {
+                this.weekDays = weekArray.map(function (d) {
+                    var wd = date_fns_1.format(d, 'dd', { locale: locales_1.LOCALES[_this.locale] });
+                    return "" + wd.charAt(0).toUpperCase() + wd.slice(1);
                 });
                 break;
+            }
             /** Default case is theme === 'form' */
             default:
-                this.weekDays = moment.weekdaysShort(true).map(function (day) {
-                    return "" + day.charAt(0).toUpperCase() + day.slice(1).slice(0, -1);
+                this.weekDays = weekArray.map(function (d) {
+                    var wd = date_fns_1.format(d, 'ddd', { locale: locales_1.LOCALES[_this.locale] });
+                    return "" + wd.charAt(0).toUpperCase() + wd.slice(1);
                 });
@@ -43,2 +50,3 @@ break;
         'theme': [{ type: core_1.Input },],
+        'locale': [{ type: core_1.Input },],
         'weekday': [{ type: core_1.Output },],
@@ -45,0 +53,0 @@ };

lib/components/week-days/calendar-week-days.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"CalendarWeekDaysComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"zmz-calendar-week-days","template":"\n    <div class=\"week-day\" *ngFor=\"let day of weekDays; let i=index\" (click)=\"weekDaySelect(i)\" [ngClass]=\"{ clickable: clickable}\">\n      <div class=\"container\">\n        <div class=\"number\">\n          <span> {{day}} </span>\n\n          <div *ngIf=\"clickable\" class=\"click-arrow\">\n            <div class=\"icon icon-down-chevron\"></div>\n          </div>\n\n        </div>\n      </div>\n    </div>\n  ","styles":["\n    :host {\n      width: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: flex-start;\n      align-items: stretch;\n      align-content: stretch; }\n\n    .week-day {\n      width: 100%; }\n\n    .container {\n      position: relative;\n      width: 100%;\n      padding-bottom: 88%; }\n\n    .number {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n      align-content: center;\n      max-width: 100%; }\n\n    .clickable {\n      cursor: pointer;\n      color: #3E99EF; }\n\n    .click-arrow {\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: center;\n      align-items: center;\n      align-content: center;\n      max-width: 100%; }\n\n    .icon {\n      font-size: 12px;\n      height: 1em;\n      width: 1em; }\n\n    .icon:before {\n      font-family: 'ZomoZ', sans-serif !important;\n      -moz-osx-font-smoothing: grayscale;\n      -webkit-font-smoothing: antialiased;\n      font-style: normal !important;\n      font-variant: normal !important;\n      font-weight: normal !important;\n      line-height: 1;\n      text-transform: none !important;\n      speak: none; }\n\n    .icon-down-chevron:before {\n      content: '\\6f'; }\n  "]}]}],"members":{"clickable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"weekday":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"ngOnInit":[{"__symbolic":"method"}],"weekDaySelect":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"CalendarWeekDaysComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"zmz-calendar-week-days","template":"\n    <div class=\"week-day\" *ngFor=\"let day of weekDays; let i=index\" (click)=\"weekDaySelect(i)\" [ngClass]=\"{ clickable: clickable}\">\n      <div class=\"container\">\n        <div class=\"number\">\n          <span> {{day}} </span>\n\n          <div *ngIf=\"clickable\" class=\"click-arrow\">\n            <div class=\"icon icon-down-chevron\"></div>\n          </div>\n\n        </div>\n      </div>\n    </div>\n  ","styles":["\n    :host {\n      width: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: flex-start;\n      align-items: stretch;\n      align-content: stretch; }\n\n    .week-day {\n      width: 100%; }\n\n    .container {\n      position: relative;\n      width: 100%;\n      padding-bottom: 88%; }\n\n    .number {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n      align-content: center;\n      max-width: 100%; }\n\n    .clickable {\n      cursor: pointer;\n      color: #3E99EF; }\n\n    .click-arrow {\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: center;\n      align-items: center;\n      align-content: center;\n      max-width: 100%; }\n\n    .icon {\n      font-size: 12px;\n      height: 1em;\n      width: 1em; }\n\n    .icon:before {\n      font-family: 'ZomoZ', sans-serif !important;\n      -moz-osx-font-smoothing: grayscale;\n      -webkit-font-smoothing: antialiased;\n      font-style: normal !important;\n      font-variant: normal !important;\n      font-weight: normal !important;\n      line-height: 1;\n      text-transform: none !important;\n      speak: none; }\n\n    .icon-down-chevron:before {\n      content: '\\6f'; }\n  "]}]}],"members":{"clickable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"weekday":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"ngOnInit":[{"__symbolic":"method"}],"weekDaySelect":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"CalendarWeekDaysComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"zmz-calendar-week-days","template":"\n    <div class=\"week-day\" *ngFor=\"let day of weekDays; let i=index\" (click)=\"weekDaySelect(i)\" [ngClass]=\"{ clickable: clickable}\">\n      <div class=\"container\">\n        <div class=\"number\">\n          <span> {{day}} </span>\n\n          <div *ngIf=\"clickable\" class=\"click-arrow\">\n            <div class=\"icon icon-down-chevron\"></div>\n          </div>\n\n        </div>\n      </div>\n    </div>\n  ","styles":["\n    :host {\n      width: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: flex-start;\n      align-items: stretch;\n      align-content: stretch; }\n\n    .week-day {\n      width: 100%; }\n\n    .container {\n      position: relative;\n      width: 100%;\n      padding-bottom: 88%; }\n\n    .number {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n      align-content: center;\n      max-width: 100%; }\n\n    .clickable {\n      cursor: pointer;\n      color: #3E99EF; }\n\n    .click-arrow {\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: center;\n      align-items: center;\n      align-content: center;\n      max-width: 100%; }\n\n    .icon {\n      font-size: 12px;\n      height: 1em;\n      width: 1em; }\n\n    .icon:before {\n      font-family: 'ZomoZ', sans-serif !important;\n      -moz-osx-font-smoothing: grayscale;\n      -webkit-font-smoothing: antialiased;\n      font-style: normal !important;\n      font-variant: normal !important;\n      font-weight: normal !important;\n      line-height: 1;\n      text-transform: none !important;\n      speak: none; }\n\n    .icon-down-chevron:before {\n      content: '\\6f'; }\n  "]}]}],"members":{"clickable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"locale":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"weekday":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"ngOnInit":[{"__symbolic":"method"}],"weekDaySelect":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"CalendarWeekDaysComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"zmz-calendar-week-days","template":"\n    <div class=\"week-day\" *ngFor=\"let day of weekDays; let i=index\" (click)=\"weekDaySelect(i)\" [ngClass]=\"{ clickable: clickable}\">\n      <div class=\"container\">\n        <div class=\"number\">\n          <span> {{day}} </span>\n\n          <div *ngIf=\"clickable\" class=\"click-arrow\">\n            <div class=\"icon icon-down-chevron\"></div>\n          </div>\n\n        </div>\n      </div>\n    </div>\n  ","styles":["\n    :host {\n      width: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: flex-start;\n      align-items: stretch;\n      align-content: stretch; }\n\n    .week-day {\n      width: 100%; }\n\n    .container {\n      position: relative;\n      width: 100%;\n      padding-bottom: 88%; }\n\n    .number {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n      align-content: center;\n      max-width: 100%; }\n\n    .clickable {\n      cursor: pointer;\n      color: #3E99EF; }\n\n    .click-arrow {\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: center;\n      align-items: center;\n      align-content: center;\n      max-width: 100%; }\n\n    .icon {\n      font-size: 12px;\n      height: 1em;\n      width: 1em; }\n\n    .icon:before {\n      font-family: 'ZomoZ', sans-serif !important;\n      -moz-osx-font-smoothing: grayscale;\n      -webkit-font-smoothing: antialiased;\n      font-style: normal !important;\n      font-variant: normal !important;\n      font-weight: normal !important;\n      line-height: 1;\n      text-transform: none !important;\n      speak: none; }\n\n    .icon-down-chevron:before {\n      content: '\\6f'; }\n  "]}]}],"members":{"clickable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"locale":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"weekday":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"ngOnInit":[{"__symbolic":"method"}],"weekDaySelect":[{"__symbolic":"method"}]}}}}]

lib/helpers/helpers.d.ts

@@ -1,3 +0,2 @@
-/// <reference types="moment" />
-import * as moment from 'moment';
+import { CalendarLocale } from '../types';
 /**
@@ -7,5 +6,5 @@ * Returns the first day to show in a month depending on the first day of the week
  * @param year
- * @return date as Moment
+ * @return date as Date
  */
-export declare function firstDateToShow(month: number, year: number): moment.Moment;
+export declare function firstDateToShow(month: number, year: number, locale: CalendarLocale): Date;
 /**
@@ -15,5 +14,5 @@ * Returns the last day to show in a month depending on the last day of the week
  * @param year
- * @return date as Moment
+ * @return date as Date
  */
-export declare function lastDateToShow(month: number, year: number): moment.Moment;
+export declare function lastDateToShow(month: number, year: number, locale: CalendarLocale): Date;
 /**
@@ -23,5 +22,5 @@ * Returns an array of weeks (or a matrix of dates) representing the month to show
  * @param year
- * @return weeks as Moment[][]
+ * @return weeks as Date[][]
  */
-export declare function weeksToShow(month: number, year: number): moment.Moment[][];
-export declare function dateHash(date: moment.Moment): string;
+export declare function weeksToShow(month: number, year: number, locale: CalendarLocale): Date[][];
+export declare function dateHash(date: Date): string;

lib/helpers/helpers.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var moment = require("moment");
 var lodash_1 = require("lodash");
+var date_fns_1 = require("date-fns");
 var firstDayOfWeek = 0;
@@ -11,13 +11,7 @@ var lastDayOfWeek = 6;
  * @param year
- * @return date as Moment
+ * @return date as Date
  */
-function firstDateToShow(month, year) {
-    var startMonth = moment([year, month - 1]);
-    if (startMonth.weekday() > firstDayOfWeek) {
-        var diff = startMonth.weekday() - firstDayOfWeek;
-        return startMonth.subtract(diff, 'days');
-    }
-    else {
-        return startMonth;
-    }
+function firstDateToShow(month, year, locale) {
+    var startMonth = date_fns_1.startOfDay(date_fns_1.startOfMonth(new Date(year, month - 1)));
+    return locale === 'en' ? date_fns_1.startOfWeek(startMonth) : date_fns_1.startOfISOWeek(startMonth);
 }
@@ -29,13 +23,7 @@ exports.firstDateToShow = firstDateToShow;
  * @param year
- * @return date as Moment
+ * @return date as Date
  */
-function lastDateToShow(month, year) {
-    var endMonth = moment([year, month - 1]).endOf('month').startOf('day');
-    if (endMonth.weekday() < lastDayOfWeek) {
-        var diff = lastDayOfWeek - endMonth.weekday();
-        return endMonth.add(diff, 'days');
-    }
-    else {
-        return endMonth;
-    }
+function lastDateToShow(month, year, locale) {
+    var endMonth = date_fns_1.startOfDay(date_fns_1.endOfMonth(new Date(year, month - 1)));
+    return date_fns_1.startOfDay(locale === 'en' ? date_fns_1.endOfWeek(endMonth) : date_fns_1.endOfISOWeek(endMonth));
 }
@@ -47,13 +35,13 @@ exports.lastDateToShow = lastDateToShow;
  * @param year
- * @return weeks as Moment[][]
+ * @return weeks as Date[][]
  */
-function weeksToShow(month, year) {
-    var start = firstDateToShow(month, year);
-    var end = lastDateToShow(month, year);
+function weeksToShow(month, year, locale) {
+    var start = firstDateToShow(month, year, locale);
+    var end = lastDateToShow(month, year, locale);
     var weekDays = lodash_1.range(firstDayOfWeek, lastDayOfWeek + 1);
     var weeks = [];
-    while (start.isBefore(end)) {
+    while (date_fns_1.isBefore(start, end)) {
         var week = weekDays.map(function (day) {
-            var currDate = start.clone();
-            start.add(1, 'day');
+            var currDate = new Date(start.getTime());
+            start = date_fns_1.addDays(start, 1);
             return currDate;
@@ -67,5 +55,5 @@ });
 function dateHash(date) {
-    return date.format('YYYY-MM-DD');
+    return date_fns_1.format(date, 'YYYY-MM-DD');
 }
 exports.dateHash = dateHash;
 //# sourceMappingURL=helpers.js.map

lib/helpers/helpers.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"firstDateToShow":{"__symbolic":"function"},"lastDateToShow":{"__symbolic":"function"},"weeksToShow":{"__symbolic":"function"},"dateHash":{"__symbolic":"function","parameters":["date"],"value":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"date"},"member":"format"},"arguments":["YYYY-MM-DD"]}}}},{"__symbolic":"module","version":1,"metadata":{"firstDateToShow":{"__symbolic":"function"},"lastDateToShow":{"__symbolic":"function"},"weeksToShow":{"__symbolic":"function"},"dateHash":{"__symbolic":"function","parameters":["date"],"value":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"date"},"member":"format"},"arguments":["YYYY-MM-DD"]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"firstDateToShow":{"__symbolic":"function"},"lastDateToShow":{"__symbolic":"function"},"weeksToShow":{"__symbolic":"function"},"dateHash":{"__symbolic":"function","parameters":["date"],"value":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"date-fns","name":"format"},"arguments":[{"__symbolic":"reference","name":"date"},"YYYY-MM-DD"]}}}},{"__symbolic":"module","version":1,"metadata":{"firstDateToShow":{"__symbolic":"function"},"lastDateToShow":{"__symbolic":"function"},"weeksToShow":{"__symbolic":"function"},"dateHash":{"__symbolic":"function","parameters":["date"],"value":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"date-fns","name":"format"},"arguments":[{"__symbolic":"reference","name":"date"},"YYYY-MM-DD"]}}}}]

lib/types.d.ts

@@ -1,3 +0,1 @@
-/// <reference types="moment" />
-import * as moment from 'moment';
 export declare type State = 'selected' | 'available' | 'unavailable' | 'disabled' | 'selectable' | 'not-selectable' | '';
@@ -16,3 +14,3 @@ export interface StateMap<T> {
 }
-export declare type Locale = string;
+export declare type CalendarLocale = 'es' | 'en';
 export declare type NavigationStrategy = 'validRange' | 'state' | boolean;
@@ -22,8 +20,8 @@ export declare type Theme = 'form' | 'show';
     theme?: Theme;
-    locale?: Locale;
+    locale?: CalendarLocale;
     weekDayClickable?: boolean;
     completeMonths?: boolean;
     validRange?: {
-        from?: moment.Moment;
-        to?: moment.Moment;
+        from?: Date;
+        to?: Date;
     };
@@ -30,0 +28,0 @@ navigationStrategy?: NavigationStrategy;

lib/types.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"State":{"__symbolic":"interface"},"StateMap":{"__symbolic":"interface"},"DateMap":{"__symbolic":"interface"},"Locale":{"__symbolic":"interface"},"NavigationStrategy":{"__symbolic":"interface"},"Theme":{"__symbolic":"interface"},"CalendarConfig":{"__symbolic":"interface"}}},{"__symbolic":"module","version":1,"metadata":{"State":{"__symbolic":"interface"},"StateMap":{"__symbolic":"interface"},"DateMap":{"__symbolic":"interface"},"Locale":{"__symbolic":"interface"},"NavigationStrategy":{"__symbolic":"interface"},"Theme":{"__symbolic":"interface"},"CalendarConfig":{"__symbolic":"interface"}}}]
+[{"__symbolic":"module","version":3,"metadata":{"State":{"__symbolic":"interface"},"StateMap":{"__symbolic":"interface"},"DateMap":{"__symbolic":"interface"},"CalendarLocale":{"__symbolic":"interface"},"NavigationStrategy":{"__symbolic":"interface"},"Theme":{"__symbolic":"interface"},"CalendarConfig":{"__symbolic":"interface"}}},{"__symbolic":"module","version":1,"metadata":{"State":{"__symbolic":"interface"},"StateMap":{"__symbolic":"interface"},"DateMap":{"__symbolic":"interface"},"CalendarLocale":{"__symbolic":"interface"},"NavigationStrategy":{"__symbolic":"interface"},"Theme":{"__symbolic":"interface"},"CalendarConfig":{"__symbolic":"interface"}}}]

package.json

 {
   "name": "zmz-calendar",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "angular2 responsive calendar",
@@ -40,3 +40,2 @@ "main": "./lib/index.js",
     "@types/lodash": "^4.14.51",
-    "@types/moment": "^2.13.0",
     "@types/node": "^7.0.5",
@@ -46,2 +45,3 @@ "angular2-template-loader": "^0.6.2",
     "core-js": "^2.4.1",
+    "date-fns": "^1.29.0",
     "file-loader": "^0.10.1",
@@ -65,3 +65,2 @@ "gulp": "^3.9.1",
     "lodash": "^4.17.4",
-    "moment": "^2.18.1",
     "node-sass": "^4.5.0",
@@ -87,4 +86,4 @@ "npm-run-all": "^4.0.2",
     "@angular/router": "^4.0.0",
+    "date-fns": "^1.29.0",
     "lodash": "^4.17.4",
-    "moment": "^2.18.1",
     "rxjs": "^5.1.1",
@@ -91,0 +90,0 @@ "zone.js": "^0.8.5"

README.md

@@ -49,3 +49,3 @@ # zmz-calendar
 1. config: Calendar's general configuration. It's a javascript object containing the following:
-    1. locale (_optional_): The calendar locale to use. It uses [moment](https://momentjs.com/docs/) locale and defaults to `es`
+    1. locale (_optional_): The calendar locale to use. It uses [date-fns](https://date-fns.org/v1.29.0/docs/I18n#supported-languages) locales but only supports `en` and `es`. Defaults to `es`
     2. weekDayClickable (_optional_): True if the week days are clickable and emit the day number on click. Defaults to `false`
@@ -91,11 +91,11 @@ 3. completeMonths (_optional_): True if we want the calendar to show days of othe months in the current month. Defaults to `false`
 
-1. constructor(dates: moment.Moment[], defaultState: State = STATES.NO_STATE): Receives an array of dates with a initial state which defaults to none
-2. set(date: moment.Moment, state: State): Sets a state to a date
-3. toggle(date: moment.Moment, state: State): Toggles a state in a date (if it was present it's removed)
-4. has(date: moment.Moment, state: State): True if the date has the specified state
-5. get(date: moment.Moment): Gets an array of states from a date
-6. remove(date: moment.Moment, state: State): Removes the state from date. If it doesn't exist, it's noop
-7. getAll(state: State): Returns an array of moment from those dates matching the state state
-8. getFirst(state: State): Returns the first date matching the state state as a moment
-9. getLast(state: State): Returns the last date matching the state state as a moment
+1. constructor(dates: Date[], defaultState: State = STATES.NO_STATE): Receives an array of dates with a initial state which defaults to none
+2. set(date: Date, state: State): Sets a state to a date
+3. toggle(date: Date, state: State): Toggles a state in a date (if it was present it's removed)
+4. has(date: Date, state: State): True if the date has the specified state
+5. get(date: Date): Gets an array of states from a date
+6. remove(date: Date, state: State): Removes the state from date. If it doesn't exist, it's noop
+7. getAll(state: State): Returns an array of Date from those dates matching the state state
+8. getFirst(state: State): Returns the first date matching the state state as a Date
+9. getLast(state: State): Returns the last date matching the state state as a Date
 
@@ -108,7 +108,7 @@ You should instantiate a `CalendarState` and use its api to modify it
 `app.component.ts`
-```
+```ts
 import { Component } from '@angular/core';
 import { CalendarState, State, STATES } from 'zmz-calendar';
 
-import * as moment from 'moment';
+import { format, addDays, addYears, isBefore } from 'date-fns';
 
@@ -130,3 +130,3 @@ @Component({
 
-  onDateSelected(date: moment.Moment) {
+  onDateSelected(date: Date) {
     const isDisabled = this.state.has(date, STATES.DISABLED);
@@ -136,3 +136,3 @@ if (!isDisabled) {
       if (av) {
-        this.date = date.format();
+        this.date = format(date);
       }
@@ -143,10 +143,13 @@ }
   dates() {
-    const today = moment();
-    const aYear = moment().add(1, 'year');
+    const today = new Date();
+    toda.setHours(0, 0, 0, 0);
 
+    const aYear = addYears(today, 1);
+
     let dates = [];
 
-    while(today.isBefore(aYear)) {
-      dates.push(today.clone());
-      today.add(1, 'day');
+    while(isBefore(today, aYear)) {
+
+      dates.push(new Date(today.getTime());
+      today = addDays(today, 1);
     }
@@ -161,3 +164,3 @@
 `app.component.html`
-```
+```html
 <div style="max-width: 500px; width: 100%">
@@ -164,0 +167,0 @@ <zmz-calendar [state]="state" [config]="config" (dateSelected)="onDateSelected($event)">

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

44

decreased by-2.22%

Number of package files

109

increased by45.33%

Lines of code

32933

increased by3.76%

Number of lines in readme file

189

increased by1.61%

Worsened metrics

Total package byte prevSize

2568939

decreased by-7.68%

Number of downloads

6

decreased by-25%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes