Fix issue #5

Author: chrissy-dev

dist/vanillaCalendar.js

@@ -7,109 +7,120 @@ var vanillaCalendar = {
   date: new Date(),
   todaysDate: new Date(),
 
-  init: function () {
-    this.date.setDate(1)
-    this.createMonth()
-    this.createListeners()
+  init: function() {
+    this.date.setDate(1);
+    this.createMonth();
+    this.createListeners();
   },
 
-  createListeners: function () {
-    var _this = this
-    this.next.addEventListener('click', function () {
-      _this.clearCalendar()
-      var nextMonth = _this.date.getMonth() + 1
-      _this.date.setMonth(nextMonth)
-      _this.createMonth()
-    })
+  createListeners: function() {
+    var _this = this;
+    this.next.addEventListener("click", function() {
+      _this.clearCalendar();
+      var nextMonth = _this.date.getMonth() + 1;
+      _this.date.setMonth(nextMonth);
+      _this.createMonth();
+    });
     // Clears the calendar and shows the previous month
-    this.previous.addEventListener('click', function () {
-      _this.clearCalendar()
-      var prevMonth = _this.date.getMonth() - 1
-      _this.date.setMonth(prevMonth)
-      _this.createMonth()
-    })
+    this.previous.addEventListener("click", function() {
+      _this.clearCalendar();
+      var prevMonth = _this.date.getMonth() - 1;
+      _this.date.setMonth(prevMonth);
+      _this.createMonth();
+    });
   },
 
-  createDay: function (num, day, year) {
-    var newDay = document.createElement('div')
-    var dateEl = document.createElement('span')
-    dateEl.innerHTML = num
-    newDay.className = 'vcal-date'
-    newDay.setAttribute('data-calendar-date', this.date)
+  createDay: function(num, day, year) {
+    var newDay = document.createElement("div");
+    var dateEl = document.createElement("span");
+    dateEl.innerHTML = num;
+    newDay.className = "vcal-date";
+    newDay.setAttribute("data-calendar-date", this.date);
 
+    // if it's the first day of the month
     if (num === 1) {
-      var offset = ((day - 1) * 14.28)
-      if (offset > 0) {
-        newDay.style.marginLeft = offset + '%'
+      if (day === 0) {
+        newDay.style.marginLeft = (6 * 14.28) + "%";
+      } else {
+        newDay.style.marginLeft = ((day - 1) * 14.28) + "%";
       }
     }
 
     if (this.date.getTime() <= this.todaysDate.getTime() - 1) {
-      newDay.classList.add('vcal-date--disabled')
+      newDay.classList.add("vcal-date--disabled");
     } else {
-      newDay.classList.add('vcal-date--active')
-      newDay.setAttribute('data-calendar-status', 'active')
+      newDay.classList.add("vcal-date--active");
+      newDay.setAttribute("data-calendar-status", "active");
     }
 
     if (this.date.toString() === this.todaysDate.toString()) {
-      newDay.classList.add('vcal-date--today')
+      newDay.classList.add("vcal-date--today");
     }
 
-    newDay.appendChild(dateEl)
-    this.month.appendChild(newDay)
+    newDay.appendChild(dateEl);
+    this.month.appendChild(newDay);
   },
 
-  dateClicked: function () {
-    var _this = this
-    this.activeDates = document.querySelectorAll('[data-calendar-status="active"]')
+  dateClicked: function() {
+    var _this = this;
+    this.activeDates = document.querySelectorAll(
+      '[data-calendar-status="active"]'
+    );
     for (var i = 0; i < this.activeDates.length; i++) {
-      this.activeDates[i].addEventListener('click', function (event) {
-        var picked = document.querySelectorAll('[data-calendar-label="picked"]')[0]
-        picked.innerHTML = this.dataset.calendarDate
-        _this.removeActiveClass()
-        this.classList.add('vcal-date--selected')
-      })
+      this.activeDates[i].addEventListener("click", function(event) {
+        var picked = document.querySelectorAll(
+          '[data-calendar-label="picked"]'
+        )[0];
+        picked.innerHTML = this.dataset.calendarDate;
+        _this.removeActiveClass();
+        this.classList.add("vcal-date--selected");
+      });
     }
   },
 
-  createMonth: function () {
-    var currentMonth = this.date.getMonth()
+  createMonth: function() {
+    var currentMonth = this.date.getMonth();
     while (this.date.getMonth() === currentMonth) {
-      this.createDay(this.date.getDate(), this.date.getDay(), this.date.getFullYear())
-      this.date.setDate(this.date.getDate() + 1)
+      this.createDay(
+        this.date.getDate(),
+        this.date.getDay(),
+        this.date.getFullYear()
+      );
+      this.date.setDate(this.date.getDate() + 1);
     }
     // while loop trips over and day is at 30/31, bring it back
-    this.date.setDate(1)
-    this.date.setMonth(this.date.getMonth() - 1)
+    this.date.setDate(1);
+    this.date.setMonth(this.date.getMonth() - 1);
 
-    this.label.innerHTML = this.monthsAsString(this.date.getMonth()) + ' ' + this.date.getFullYear()
-    this.dateClicked()
+    this.label.innerHTML =
+      this.monthsAsString(this.date.getMonth()) + " " + this.date.getFullYear();
+    this.dateClicked();
   },
 
-  monthsAsString: function (monthIndex) {
+  monthsAsString: function(monthIndex) {
     return [
-      'January',
-      'Febuary',
-      'March',
-      'April',
-      'May',
-      'June',
-      'July',
-      'August',
-      'September',
-      'October',
-      'November',
-      'December'
-    ][monthIndex]
+      "January",
+      "Febuary",
+      "March",
+      "April",
+      "May",
+      "June",
+      "July",
+      "August",
+      "September",
+      "October",
+      "November",
+      "December"
+    ][monthIndex];
   },
 
-  clearCalendar: function () {
-    vanillaCalendar.month.innerHTML = ''
+  clearCalendar: function() {
+    vanillaCalendar.month.innerHTML = "";
   },
 
-  removeActiveClass: function () {
+  removeActiveClass: function() {
     for (var i = 0; i < this.activeDates.length; i++) {
-      this.activeDates[i].classList.remove('vcal-date--selected')
+      this.activeDates[i].classList.remove("vcal-date--selected");
     }
   }
-}
+};