Fixes Turkish locale. Fixes weekday formatting (Closes #104).

Author: Nathan Reyes

CHANGELOG.md

@@ -1,36 +1,45 @@
+# v0.9.0
 ## Bug Fixes
+### `v-calendar`
+* Fixes Turkish locale identifier
+* Fixes weekday formatting by using UNC dates with `Intl.DateTimeFormat`. Closes #104.
+* Other small bug fixes
+
 ### `v-date-picker`
-* Fixed glitch with highlight cap animation when `mode === "range"`
-* Fixed bug with `themeStyles.dayContent` style getting ignored. Closes #115.
+* Fixes glitch with highlight cap animation when `mode === "range"`
+* Fixes bug with `themeStyles.dayContent` style getting ignored. Closes #115.
 
 ## Improvements
 ### `v-calendar`
-* Added `min-date` prop as a convenient alternative to `min-page`
-* Added `max-date` prop as a convenient alternative to `max-page`
-* Added `is-linked` prop to link panes to consecutive months when `is-double-paned` is set. Closes #80.
-* Added `is-vertical` prop for vertical calendar orientation when `is-double-paned` is set. Closes #89.
+* Adds `min-date` prop as a convenient alternative to `min-page`
+* Adds `max-date` prop as a convenient alternative to `max-page`
+* Adds `is-linked` prop to link panes to consecutive months when `is-double-paned` is set. Closes #80.
+* Adds `is-vertical` prop for vertical calendar orientation when `is-double-paned` is set. Closes #89.
+
+### `v-date-picker`
+* `min-date` and `max-date` props are now forwarded to `v-calendar`. Closes #78.
 
 ### Defaults
 Theme styles modifications. Closes #93.
 
 | Style | Modification | Description |
 | ----- | ------------ | ----- |
-| `horizontalDivider` | Added | Horizontal divider when calendars are in vertical orientation (`is-vertical`) |
-| `navHeader` | Added | Navigation pane header. |
-| `navHeaderTitle` | Added | Navigation pane header title. |
-| `navHeaderArrows` | Added | Navigation pane header arrows. |
-| `navMonthCell` | Added | Navigation pane month cells. |
-| `navYearCell` | Added | Navigation pane year cells. |
+| `horizontalDivider` | Add | Horizontal divider when calendars are in vertical orientation (`is-vertical`) |
+| `navHeader` | Add | Navigation pane header. |
+| `navHeaderTitle` | Add | Navigation pane header title. |
+| `navHeaderArrows` | Add | Navigation pane header arrows. |
+| `navMonthCell` | Add | Navigation pane month cells. |
+| `navYearCell` | Add | Navigation pane year cells. |
 | `header` | Edited | Supports use of function that accepts a [`page`](https://docs.vcalendar.io/api#page-object) object and return a style |
-| `headerTitle` | Edited | Supports use of function that accepts a [`page`](https://docs.vcalendar.io/api#page-object) object and return a style |
-| `headerArrows` | Edited | Supports use of function that accepts a [`page`](https://docs.vcalendar.io/api#page-object) object and return a style |
-| `headerHorizontalDivider` | Edited | Supports use of function that accepts a [`page`](https://docs.vcalendar.io/api#page-object) object and return a style |
-| `weekdays` | Edited | Supports use of function that accepts a [`page`](https://docs.vcalendar.io/api#page-object) object and return a style |
-| `weekdaysHorizontalDivider` | Edited | Supports use of function that accepts a [`page`](https://docs.vcalendar.io/api#page-object) object and return a style |
-| `weeks` | Edited | Supports use of function that accepts a [`page`](https://docs.vcalendar.io/api#page-object) object and return a style |
-| ~~`headerVerticalDivider`~~ | Removed | *Reference note below* |
-| ~~`weekdaysVerticalDivider`~~ | Removed | *Reference note below* |
-| ~~`weeksVerticalDivider`~~ | Removed | *Reference note below* |
+| `headerTitle` | Edit | Supports use of function that accepts a [`page`](https://docs.vcalendar.io/api#page-object) object and return a style |
+| `headerArrows` | Edit | Supports use of function that accepts a [`page`](https://docs.vcalendar.io/api#page-object) object and return a style |
+| `headerHorizontalDivider` | Edit | Supports use of function that accepts a [`page`](https://docs.vcalendar.io/api#page-object) object and return a style |
+| `weekdays` | Edit | Supports use of function that accepts a [`page`](https://docs.vcalendar.io/api#page-object) object and return a style |
+| `weekdaysHorizontalDivider` | Edit | Supports use of function that accepts a [`page`](https://docs.vcalendar.io/api#page-object) object and return a style |
+| `weeks` | Edit | Supports use of function that accepts a [`page`](https://docs.vcalendar.io/api#page-object) object and return a style |
+| ~~`headerVerticalDivider`~~ | Remove | *Reference note below* |
+| ~~`weekdaysVerticalDivider`~~ | Remove | *Reference note below* |
+| ~~`weeksVerticalDivider`~~ | Remove | *Reference note below* |
 
 * Styles removed in favor of defining functions for the `header`, `weekdays` and `weeks` styles like so...
 
@@ -59,9 +68,6 @@ export default {
 }
 ```
 
-### `v-date-picker`
-* `min-date` and `max-date` props are now forwarded to `v-calendar`. Closes #78.
-
 # v0.8.0
 ## Bug Fixes
 ### `v-date-picker`

src/components/Calendar.vue

@@ -174,23 +174,28 @@ export default {
         this.fromPage_ = getPrevPage(val);
     },
     isDoublePaned_() {
-      this.refreshContainerWidth();
+      this.refreshIsConstrained();
       this.refreshToPage();
     },
+    isLinked(val) {
+      if (val) this.toPage_ = getNextPage(this.fromPage_);
+    },
     isExpanded() {
-      this.refreshContainerWidth();
+      this.refreshIsConstrained();
     },
   },
   created() {
     this.refreshFromPage();
     this.refreshToPage();
   },
   mounted() {
-    this.refreshContainerWidth();
-    window.addEventListener('resize', this.refreshContainerWidth);
+    this.$nextTick(() => {
+      this.refreshIsConstrained();
+      window.addEventListener('resize', this.refreshIsConstrained);
+    });
   },
   beforeDestroy() {
-    window.removeEventListener('resize', this.refreshContainerWidth);
+    window.removeEventListener('resize', this.refreshIsConstrained);
   },
   methods: {
     refreshFromPage() {
@@ -212,7 +217,7 @@ export default {
         getNextPage(this.minPage_),
       );
     },
-    refreshContainerWidth() {
+    refreshIsConstrained() {
       // Only test for constrained environment if needed
       if (!window || !this.isDoublePaned || this.isVertical) {
         this.isConstrained = false;

src/components/CalendarDay.vue

@@ -248,7 +248,6 @@ export default {
       return this.popoverState.isInteractive;
     },
     contentStyle() {
-      // if (this.styles.dayContent) console.log(this.styles.dayContent);
       const userStyle = this.styles.dayContent;
       const disableEvents =
         this.dayCellStyle &&

src/components/CalendarPane.vue

@@ -209,8 +209,8 @@ export default {
       );
     },
     weekdayLabels() {
-      return getWeekdayDates(defaults.firstDayOfWeek).map(d =>
-        format(d, this.formats.weekdays || 'WW'),
+      return getWeekdayDates({ firstDayOfWeek: defaults.firstDayOfWeek }).map(
+        d => format(d, this.formats.weekdays || 'WW'),
       );
     },
     titleClass() {

src/utils/helpers.js

@@ -53,11 +53,16 @@ export const getMonthDates = (year = 2000) => {
   return dates;
 };
 
-export const getWeekdayDates = (firstDayOfWeek = 1, year = 2000) => {
+export const getWeekdayDates = ({
+  firstDayOfWeek = 1,
+  year = 2000,
+  utc = false,
+}) => {
   const dates = [];
   for (let i = 1, j = 0; j < 7; i++) {
-    const d = new Date(year, 0, i);
-    if (d.getDay() === firstDayOfWeek - 1 || j > 0) {
+    const d = utc ? new Date(Date.UTC(year, 0, i)) : new Date(year, 0, i);
+    const day = utc ? d.getUTCDay() : d.getDay();
+    if (day === firstDayOfWeek - 1 || j > 0) {
       dates.push(d);
       j++;
     }

src/utils/locales.js

@@ -71,19 +71,25 @@ const locales = {
   // Thai
   th: { L: 'DD/MM/YYYY' },
   // Turkish
-  tk: { dow: 2, L: 'DD.MM.YYYY' },
+  tr: { dow: 2, L: 'DD.MM.YYYY' },
 };
 locales.en = locales['en-US'];
 locales.zh = locales['zh-CN'];
 
 // Month and day names are derived from Intl.DateTimeFormat
 const getMonthNames = (locale, length) => {
-  const dtf = new Intl.DateTimeFormat(locale, { month: length });
+  const dtf = new Intl.DateTimeFormat(locale, {
+    month: length,
+    timezome: 'UTC',
+  });
   return getMonthDates().map(d => dtf.format(d));
 };
 const getDayNames = (locale, length) => {
-  const dtf = new Intl.DateTimeFormat(locale, { weekday: length });
-  return getWeekdayDates().map(d => dtf.format(d));
+  const dtf = new Intl.DateTimeFormat(locale, {
+    weekday: length,
+    timeZone: 'UTC',
+  });
+  return getWeekdayDates({ utc: true }).map(d => dtf.format(d));
 };
 
 export default (locale, defaults) => {