From 2a3e65ed5f1acee640bcd03c9bc332eefd6e303c Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <contact@kamilcraft.com>
Date: Fri, 17 Jun 2022 12:55:05 +0200
Subject: [PATCH 1/6] #152 - calendar template added

---
 resources/js/Pages/Dashboard.vue              |   2 +
 .../js/Shared/Widgets/VacationCalendar.vue    | 148 ++++++++++++++++++
 2 files changed, 150 insertions(+)
 create mode 100644 resources/js/Shared/Widgets/VacationCalendar.vue

diff --git a/resources/js/Pages/Dashboard.vue b/resources/js/Pages/Dashboard.vue
index e633816..1188c6d 100644
--- a/resources/js/Pages/Dashboard.vue
+++ b/resources/js/Pages/Dashboard.vue
@@ -3,6 +3,7 @@
   <div class="grid grid-cols-1 gap-4 items-start xl:grid-cols-3 xl:gap-8">
     <div class="grid grid-cols-1 gap-4 xl:col-span-2">
       <Welcome :user="auth.user" />
+      <VacationCalendar />
       <VacationStats :stats="stats" />
     </div>
     <div class="grid grid-cols-1 gap-4">
@@ -38,6 +39,7 @@ import HomeOfficeList from '@/Shared/Widgets/HomeOfficeList'
 import UpcomingHolidays from '@/Shared/Widgets/UpcomingHolidays'
 import UserVacationRequests from '@/Shared/Widgets/UserVacationRequests'
 import PendingVacationRequests from '@/Shared/Widgets/PendingVacationRequests'
+import VacationCalendar from '@/Shared/Widgets/VacationCalendar'
 
 defineProps({
   auth: Object,
diff --git a/resources/js/Shared/Widgets/VacationCalendar.vue b/resources/js/Shared/Widgets/VacationCalendar.vue
new file mode 100644
index 0000000..1ce49a1
--- /dev/null
+++ b/resources/js/Shared/Widgets/VacationCalendar.vue
@@ -0,0 +1,148 @@
+<template>
+  <div class="shadow ring-1 ring-black ring-opacity-5 lg:flex lg:flex-auto lg:flex-col">
+    <div class="grid grid-cols-7 gap-px border-b border-gray-300 bg-gray-200 text-center text-xs font-semibold leading-6 text-gray-700 lg:flex-none">
+      <div class="bg-white py-2">
+        M<span class="sr-only sm:not-sr-only">on</span>
+      </div>
+      <div class="bg-white py-2">
+        T<span class="sr-only sm:not-sr-only">ue</span>
+      </div>
+      <div class="bg-white py-2">
+        W<span class="sr-only sm:not-sr-only">ed</span>
+      </div>
+      <div class="bg-white py-2">
+        T<span class="sr-only sm:not-sr-only">hu</span>
+      </div>
+      <div class="bg-white py-2">
+        F<span class="sr-only sm:not-sr-only">ri</span>
+      </div>
+      <div class="bg-white py-2">
+        S<span class="sr-only sm:not-sr-only">at</span>
+      </div>
+      <div class="bg-white py-2">
+        S<span class="sr-only sm:not-sr-only">un</span>
+      </div>
+    </div>
+    <div class="flex bg-gray-200 text-xs leading-6 text-gray-700 lg:flex-auto">
+      <div class="w-full grid grid-cols-7 grid-rows-6 gap-px">
+        <div
+          v-for="day in days"
+          :key="day.date"
+          :class="[day.isCurrentMonth ? 'bg-white' : 'bg-gray-50 text-gray-500', 'relative py-2 px-3']"
+        >
+          <time
+            :datetime="day.date"
+            :class="day.isToday ? 'flex h-6 w-6 items-center justify-center rounded-full bg-indigo-600 font-semibold text-white' : undefined"
+          >
+            {{ day.date.split('-').pop().replace(/^0/, '') }}
+          </time>
+          <ol
+            v-if="day.events.length > 0"
+            class="mt-2"
+          >
+            <li
+              v-for="event in day.events.slice(0, 2)"
+              :key="event.id"
+            >
+              <a
+                :href="event.href"
+                class="group flex"
+              >
+                <p class="flex-auto truncate font-medium text-gray-900 group-hover:text-indigo-600">
+                  {{ event.name }}
+                </p>
+                <time
+                  :datetime="event.datetime"
+                  class="ml-3 hidden flex-none text-gray-500 group-hover:text-indigo-600 xl:block"
+                >
+                  {{ event.time }}
+                </time>
+              </a>
+            </li>
+            <li
+              v-if="day.events.length > 2"
+              class="text-gray-500"
+            >
+              + {{ day.events.length - 2 }} more
+            </li>
+          </ol>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const days = [
+  { date: '2021-12-27', events: [] },
+  { date: '2021-12-28', events: [] },
+  { date: '2021-12-29', events: [] },
+  { date: '2021-12-30', events: [] },
+  { date: '2021-12-31', events: [] },
+  { date: '2022-01-01', isCurrentMonth: true, events: [] },
+  { date: '2022-01-02', isCurrentMonth: true, events: [] },
+  {
+    date: '2022-01-03',
+    isCurrentMonth: true,
+    events: [
+      { id: 1, name: 'Design review', time: '10AM', datetime: '2022-01-03T10:00', href: '#' },
+      { id: 2, name: 'Sales meeting', time: '2PM', datetime: '2022-01-03T14:00', href: '#' },
+    ],
+  },
+  { date: '2022-01-04', isCurrentMonth: true, events: [] },
+  { date: '2022-01-05', isCurrentMonth: true, events: [] },
+  { date: '2022-01-06', isCurrentMonth: true, events: [] },
+  {
+    date: '2022-01-07',
+    isCurrentMonth: true,
+    events: [{ id: 3, name: 'Date night', time: '6PM', datetime: '2022-01-08T18:00', href: '#' }],
+  },
+  { date: '2022-01-08', isCurrentMonth: true, events: [] },
+  { date: '2022-01-09', isCurrentMonth: true, events: [] },
+  { date: '2022-01-10', isCurrentMonth: true, events: [] },
+  { date: '2022-01-11', isCurrentMonth: true, events: [] },
+  {
+    date: '2022-01-12',
+    isCurrentMonth: true,
+    isToday: true,
+    events: [{ id: 6, name: "Sam's birthday party", time: '2PM', datetime: '2022-01-25T14:00', href: '#' }],
+  },
+  { date: '2022-01-13', isCurrentMonth: true, events: [] },
+  { date: '2022-01-14', isCurrentMonth: true, events: [] },
+  { date: '2022-01-15', isCurrentMonth: true, events: [] },
+  { date: '2022-01-16', isCurrentMonth: true, events: [] },
+  { date: '2022-01-17', isCurrentMonth: true, events: [] },
+  { date: '2022-01-18', isCurrentMonth: true, events: [] },
+  { date: '2022-01-19', isCurrentMonth: true, events: [] },
+  { date: '2022-01-20', isCurrentMonth: true, events: [] },
+  { date: '2022-01-21', isCurrentMonth: true, events: [] },
+  {
+    date: '2022-01-22',
+    isCurrentMonth: true,
+    isSelected: true,
+    events: [
+      { id: 4, name: 'Maple syrup museum', time: '3PM', datetime: '2022-01-22T15:00', href: '#' },
+      { id: 5, name: 'Hockey game', time: '7PM', datetime: '2022-01-22T19:00', href: '#' },
+    ],
+  },
+  { date: '2022-01-23', isCurrentMonth: true, events: [] },
+  { date: '2022-01-24', isCurrentMonth: true, events: [] },
+  { date: '2022-01-25', isCurrentMonth: true, events: [] },
+  { date: '2022-01-26', isCurrentMonth: true, events: [] },
+  { date: '2022-01-27', isCurrentMonth: true, events: [] },
+  { date: '2022-01-28', isCurrentMonth: true, events: [] },
+  { date: '2022-01-29', isCurrentMonth: true, events: [] },
+  { date: '2022-01-30', isCurrentMonth: true, events: [] },
+  { date: '2022-01-31', isCurrentMonth: true, events: [] },
+  { date: '2022-02-01', events: [] },
+  { date: '2022-02-02', events: [] },
+  {
+    date: '2022-02-03',
+    events: [{ id: 7, name: 'Cinema with friends', time: '9PM', datetime: '2022-02-04T21:00', href: '#' }],
+  },
+  { date: '2022-02-04', events: [] },
+  { date: '2022-02-05', events: [] },
+  { date: '2022-02-06', events: [] },
+]
+const selectedDay = days.find((day) => day.isSelected)
+</script>

From dcc380842826299a73c5faebf848c80a41eea936 Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <contact@kamilcraft.com>
Date: Fri, 17 Jun 2022 17:55:03 +0200
Subject: [PATCH 2/6] #152 - wip

---
 .../js/Shared/Widgets/VacationCalendar.vue    | 273 +++++++++---------
 1 file changed, 136 insertions(+), 137 deletions(-)

diff --git a/resources/js/Shared/Widgets/VacationCalendar.vue b/resources/js/Shared/Widgets/VacationCalendar.vue
index 1ce49a1..f233601 100644
--- a/resources/js/Shared/Widgets/VacationCalendar.vue
+++ b/resources/js/Shared/Widgets/VacationCalendar.vue
@@ -1,148 +1,147 @@
 <template>
-  <div class="shadow ring-1 ring-black ring-opacity-5 lg:flex lg:flex-auto lg:flex-col">
-    <div class="grid grid-cols-7 gap-px border-b border-gray-300 bg-gray-200 text-center text-xs font-semibold leading-6 text-gray-700 lg:flex-none">
-      <div class="bg-white py-2">
-        M<span class="sr-only sm:not-sr-only">on</span>
-      </div>
-      <div class="bg-white py-2">
-        T<span class="sr-only sm:not-sr-only">ue</span>
-      </div>
-      <div class="bg-white py-2">
-        W<span class="sr-only sm:not-sr-only">ed</span>
-      </div>
-      <div class="bg-white py-2">
-        T<span class="sr-only sm:not-sr-only">hu</span>
-      </div>
-      <div class="bg-white py-2">
-        F<span class="sr-only sm:not-sr-only">ri</span>
-      </div>
-      <div class="bg-white py-2">
-        S<span class="sr-only sm:not-sr-only">at</span>
-      </div>
-      <div class="bg-white py-2">
-        S<span class="sr-only sm:not-sr-only">un</span>
-      </div>
-    </div>
-    <div class="flex bg-gray-200 text-xs leading-6 text-gray-700 lg:flex-auto">
-      <div class="w-full grid grid-cols-7 grid-rows-6 gap-px">
-        <div
-          v-for="day in days"
-          :key="day.date"
-          :class="[day.isCurrentMonth ? 'bg-white' : 'bg-gray-50 text-gray-500', 'relative py-2 px-3']"
+  <section class="bg-white shadow-md">
+    <div class="flex items-center justify-between p-4 sm:px-6">
+      <h2 class="text-lg font-medium leading-6 text-gray-900">
+        Kalendarz
+      </h2>
+      <Menu
+        as="div"
+        class="relative"
+      >
+        <MenuButton
+          type="button"
+          class="flex items-center rounded-md border border-gray-300 bg-white py-2 pl-3 pr-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50"
         >
-          <time
-            :datetime="day.date"
-            :class="day.isToday ? 'flex h-6 w-6 items-center justify-center rounded-full bg-indigo-600 font-semibold text-white' : undefined"
+          {{ viewMode }} view
+          <ChevronDownIcon
+            class="ml-2 h-5 w-5 text-gray-400"
+            aria-hidden="true"
+          />
+        </MenuButton>
+
+        <transition
+          class="z-10"
+          enter-active-class="transition ease-out duration-100"
+          enter-from-class="transform opacity-0 scale-95"
+          enter-to-class="transform opacity-100 scale-100"
+          leave-active-class="transition ease-in duration-75"
+          leave-from-class="transform opacity-100 scale-100"
+          leave-to-class="transform opacity-0 scale-95"
+        >
+          <MenuItems class="absolute right-0 mt-3 w-36 origin-top-right overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+            <div class="py-1">
+              <MenuItem v-slot="{ active }">
+                <a
+                  :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-4 py-2 text-sm']"
+                  @click="updateViewMode('week')"
+                >Week view</a>
+              </MenuItem>
+              <MenuItem v-slot="{ active }">
+                <a
+                  :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-4 py-2 text-sm']"
+                  @click="updateViewMode('month')"
+                >Month view</a>
+              </MenuItem>
+            </div>
+          </MenuItems>
+        </transition>
+      </Menu>
+    </div>
+    <div class="ring-1 ring-black ring-opacity-5 lg:flex lg:flex-auto lg:flex-col">
+      <div class="flex bg-gray-200 text-xs leading-6 text-gray-700 lg:flex-auto">
+        <div :class="[viewMode === 'week' ? 'grid-rows-1' : 'grid-rows-5', 'w-full grid grid-cols-7 gap-px']">
+          <div
+            v-for="day in days"
+            :key="day.date"
+            class="flex flex-col"
+            :class="[day.isCurrentMonth ? 'bg-white' : 'bg-gray-50 text-gray-500', 'day relative py-2 px-3']"
           >
-            {{ day.date.split('-').pop().replace(/^0/, '') }}
-          </time>
-          <ol
-            v-if="day.events.length > 0"
-            class="mt-2"
-          >
-            <li
-              v-for="event in day.events.slice(0, 2)"
-              :key="event.id"
+            <time
+              :datetime="day.date"
+              :class="day.isToday ? 'flex h-6 w-6 items-center justify-center rounded-full bg-indigo-600 font-semibold text-white' : undefined"
             >
-              <a
-                :href="event.href"
-                class="group flex"
-              >
-                <p class="flex-auto truncate font-medium text-gray-900 group-hover:text-indigo-600">
-                  {{ event.name }}
-                </p>
-                <time
-                  :datetime="event.datetime"
-                  class="ml-3 hidden flex-none text-gray-500 group-hover:text-indigo-600 xl:block"
-                >
-                  {{ event.time }}
-                </time>
-              </a>
-            </li>
-            <li
-              v-if="day.events.length > 2"
-              class="text-gray-500"
-            >
-              + {{ day.events.length - 2 }} more
-            </li>
-          </ol>
+              {{ day.date.split('-').pop().replace(/^0/, '') }}
+            </time>
+          </div>
         </div>
       </div>
     </div>
-  </div>
+  </section>
 </template>
 
 <script setup>
-const days = [
-  { date: '2021-12-27', events: [] },
-  { date: '2021-12-28', events: [] },
-  { date: '2021-12-29', events: [] },
-  { date: '2021-12-30', events: [] },
-  { date: '2021-12-31', events: [] },
-  { date: '2022-01-01', isCurrentMonth: true, events: [] },
-  { date: '2022-01-02', isCurrentMonth: true, events: [] },
-  {
-    date: '2022-01-03',
-    isCurrentMonth: true,
-    events: [
-      { id: 1, name: 'Design review', time: '10AM', datetime: '2022-01-03T10:00', href: '#' },
-      { id: 2, name: 'Sales meeting', time: '2PM', datetime: '2022-01-03T14:00', href: '#' },
-    ],
-  },
-  { date: '2022-01-04', isCurrentMonth: true, events: [] },
-  { date: '2022-01-05', isCurrentMonth: true, events: [] },
-  { date: '2022-01-06', isCurrentMonth: true, events: [] },
-  {
-    date: '2022-01-07',
-    isCurrentMonth: true,
-    events: [{ id: 3, name: 'Date night', time: '6PM', datetime: '2022-01-08T18:00', href: '#' }],
-  },
-  { date: '2022-01-08', isCurrentMonth: true, events: [] },
-  { date: '2022-01-09', isCurrentMonth: true, events: [] },
-  { date: '2022-01-10', isCurrentMonth: true, events: [] },
-  { date: '2022-01-11', isCurrentMonth: true, events: [] },
-  {
-    date: '2022-01-12',
-    isCurrentMonth: true,
-    isToday: true,
-    events: [{ id: 6, name: "Sam's birthday party", time: '2PM', datetime: '2022-01-25T14:00', href: '#' }],
-  },
-  { date: '2022-01-13', isCurrentMonth: true, events: [] },
-  { date: '2022-01-14', isCurrentMonth: true, events: [] },
-  { date: '2022-01-15', isCurrentMonth: true, events: [] },
-  { date: '2022-01-16', isCurrentMonth: true, events: [] },
-  { date: '2022-01-17', isCurrentMonth: true, events: [] },
-  { date: '2022-01-18', isCurrentMonth: true, events: [] },
-  { date: '2022-01-19', isCurrentMonth: true, events: [] },
-  { date: '2022-01-20', isCurrentMonth: true, events: [] },
-  { date: '2022-01-21', isCurrentMonth: true, events: [] },
-  {
-    date: '2022-01-22',
-    isCurrentMonth: true,
-    isSelected: true,
-    events: [
-      { id: 4, name: 'Maple syrup museum', time: '3PM', datetime: '2022-01-22T15:00', href: '#' },
-      { id: 5, name: 'Hockey game', time: '7PM', datetime: '2022-01-22T19:00', href: '#' },
-    ],
-  },
-  { date: '2022-01-23', isCurrentMonth: true, events: [] },
-  { date: '2022-01-24', isCurrentMonth: true, events: [] },
-  { date: '2022-01-25', isCurrentMonth: true, events: [] },
-  { date: '2022-01-26', isCurrentMonth: true, events: [] },
-  { date: '2022-01-27', isCurrentMonth: true, events: [] },
-  { date: '2022-01-28', isCurrentMonth: true, events: [] },
-  { date: '2022-01-29', isCurrentMonth: true, events: [] },
-  { date: '2022-01-30', isCurrentMonth: true, events: [] },
-  { date: '2022-01-31', isCurrentMonth: true, events: [] },
-  { date: '2022-02-01', events: [] },
-  { date: '2022-02-02', events: [] },
-  {
-    date: '2022-02-03',
-    events: [{ id: 7, name: 'Cinema with friends', time: '9PM', datetime: '2022-02-04T21:00', href: '#' }],
-  },
-  { date: '2022-02-04', events: [] },
-  { date: '2022-02-05', events: [] },
-  { date: '2022-02-06', events: [] },
-]
-const selectedDay = days.find((day) => day.isSelected)
+import { ChevronDownIcon } from '@heroicons/vue/solid'
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
+import { ref, watch } from 'vue'
+import { DateTime } from 'luxon'
+
+let days = ref([])
+const viewMode = ref('week')
+watch(viewMode, () => {
+  loadMonth()
+})
+loadMonth()
+
+function loadMonth() {
+  const tmpDays = []
+  const currentMonth = DateTime.fromObject({ year: 2022, month: 6 }).startOf('month')
+
+  const start = currentMonth.startOf('week')
+  const end = viewMode.value === 'week' ? currentMonth.endOf('week') : currentMonth.endOf('month').endOf('week')
+
+  for (let day = start; day < end; day = day.plus({ day: 1 })) {
+    const isCurrentMonth = isInCurrentMonth(day, currentMonth)
+    const okIsToday = isToday(day)
+
+    tmpDays.push({
+      date: day.toISODate(),
+      isCurrentMonth,
+      isToday: okIsToday,
+    })
+  }
+
+  days.value = tmpDays
+}
+
+function updateViewMode(type) {
+  viewMode.value = type
+}
+
+function isInCurrentMonth(date, currentMonth) {
+  return currentMonth.hasSame(date, 'month')
+}
+
+function isToday(date) {
+  return date.toISODate() === DateTime.local().toISODate()
+}
 </script>
+
+<style lang="css">
+.day:nth-of-type(7n - 6):before {
+  content: "Pn";
+}
+
+.day:nth-of-type(7n - 5):before {
+  content: "Wt";
+}
+
+.day:nth-of-type(7n - 4):before {
+  content: "Śr";
+}
+
+.day:nth-of-type(7n - 3):before {
+  content: "Cz";
+}
+
+.day:nth-of-type(7n - 2):before {
+  content: "Pt";
+}
+
+.day:nth-of-type(7n - 1):before {
+  content: "Sb";
+}
+
+.day:nth-of-type(7n):before {
+  content: "Nd";
+}
+</style>

From db874d439521d97db95b592445a2971ab55112aa Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <contact@kamilcraft.com>
Date: Tue, 21 Jun 2022 00:13:48 +0200
Subject: [PATCH 3/6] #152 - wip

---
 .../js/Shared/Widgets/VacationCalendar.vue    | 135 ++++++++++++++----
 1 file changed, 110 insertions(+), 25 deletions(-)

diff --git a/resources/js/Shared/Widgets/VacationCalendar.vue b/resources/js/Shared/Widgets/VacationCalendar.vue
index f233601..1779ab8 100644
--- a/resources/js/Shared/Widgets/VacationCalendar.vue
+++ b/resources/js/Shared/Widgets/VacationCalendar.vue
@@ -4,6 +4,18 @@
       <h2 class="text-lg font-medium leading-6 text-gray-900">
         Kalendarz
       </h2>
+      <div class="flex items-center rounded-md shadow-sm md:items-stretch">
+        <button type="button" class="flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 pl-3 pr-4 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50">
+          <span class="sr-only">Previous month</span>
+          <ChevronLeftIcon class="h-5 w-5" aria-hidden="true" />
+        </button>
+        <button type="button" class="hidden border-t border-b border-gray-300 bg-white px-3.5 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:relative md:block">Today</button>
+        <span class="relative -mx-px h-5 w-px bg-gray-300 md:hidden" />
+        <button type="button" class="flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 pl-4 pr-3 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50">
+          <span class="sr-only">Next month</span>
+          <ChevronRightIcon class="h-5 w-5" aria-hidden="true" />
+        </button>
+      </div>
       <Menu
         as="div"
         class="relative"
@@ -12,7 +24,7 @@
           type="button"
           class="flex items-center rounded-md border border-gray-300 bg-white py-2 pl-3 pr-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50"
         >
-          {{ viewMode }} view
+          {{ viewMode.name }}
           <ChevronDownIcon
             class="ml-2 h-5 w-5 text-gray-400"
             aria-hidden="true"
@@ -30,17 +42,21 @@
         >
           <MenuItems class="absolute right-0 mt-3 w-36 origin-top-right overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
             <div class="py-1">
-              <MenuItem v-slot="{ active }">
-                <a
-                  :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-4 py-2 text-sm']"
-                  @click="updateViewMode('week')"
-                >Week view</a>
-              </MenuItem>
-              <MenuItem v-slot="{ active }">
-                <a
-                  :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-4 py-2 text-sm']"
-                  @click="updateViewMode('month')"
-                >Month view</a>
+              <MenuItem
+                v-for="option in viewModeOptions"
+                :key="option.key"
+                v-slot="{ active }"
+              >
+                <button
+                  :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'flex px-4 py-2 text-sm text-left w-full']"
+                  @click="updateViewMode(option.key)"
+                >
+                  {{ option.name }}
+                  <CheckIcon
+                    v-if="option.key === viewMode.key"
+                    class="ml-2 w-5 h-5 text-blumilk-500"
+                  />
+                </button>
               </MenuItem>
             </div>
           </MenuItems>
@@ -48,13 +64,39 @@
       </Menu>
     </div>
     <div class="ring-1 ring-black ring-opacity-5 lg:flex lg:flex-auto lg:flex-col">
+      <div
+        v-if="viewMode.key === 'month'"
+        class="grid grid-cols-7 gap-px border-b border-gray-300 bg-gray-200 text-center text-xs font-semibold leading-6 text-gray-700 lg:flex-none"
+      >
+        <div class="bg-white py-2">
+          Pn
+        </div>
+        <div class="bg-white py-2">
+          Wt
+        </div>
+        <div class="bg-white py-2">
+          Śr
+        </div>
+        <div class="bg-white py-2">
+          Cz
+        </div>
+        <div class="bg-white py-2">
+          Pt
+        </div>
+        <div class="bg-red-100 py-2">
+          Sb
+        </div>
+        <div class="bg-red-100 py-2">
+          Nd
+        </div>
+      </div>
       <div class="flex bg-gray-200 text-xs leading-6 text-gray-700 lg:flex-auto">
-        <div :class="[viewMode === 'week' ? 'grid-rows-1' : 'grid-rows-5', 'w-full grid grid-cols-7 gap-px']">
+        <div :class="[viewMode.key === 'week' ? 'grid-rows-1' : 'grid-rows-5', 'w-full grid grid-cols-7 gap-px']">
           <div
-            v-for="day in days"
-            :key="day.date"
+            v-for="(day, index) in days"
+            :key="index"
             class="flex flex-col"
-            :class="[day.isCurrentMonth ? 'bg-white' : 'bg-gray-50 text-gray-500', 'day relative py-2 px-3']"
+            :class="[day.isCurrentMonth ? 'bg-white' : 'bg-gray-50 text-gray-500', viewMode.key === 'week' && index !== 0 && (index % 5 === 0 || index % 6 === 0) ? 'bg-red-100' : undefined, viewMode.key === 'week' ? 'day' : undefined, 'relative py-2 px-3']"
           >
             <time
               :datetime="day.date"
@@ -70,27 +112,68 @@
 </template>
 
 <script setup>
-import { ChevronDownIcon } from '@heroicons/vue/solid'
+import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/solid'
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
-import { ref, watch } from 'vue'
+import { ref, watch, computed } from 'vue'
 import { DateTime } from 'luxon'
+import useCurrentYearPeriodInfo from '@/Composables/yearPeriodInfo'
 
 let days = ref([])
-const viewMode = ref('week')
-watch(viewMode, () => {
+function getCurrentDate() {
+  const { year, month, weekNumber } = DateTime.now()
+  return { year, month, weekNumber }
+}
+const selectedYear = useCurrentYearPeriodInfo().year.value
+const currentDate = getCurrentDate()
+let viewModeOptions = [
+  { key: 'week', name: 'Week view' },
+  { key: 'month', name: 'Month view' },
+]
+const calendar = {
+  viewMode: ref('week'),
+  currents: ref({
+    year: selectedYear,
+    month: selectedYear === currentDate.year ? currentDate.month : 1,
+    week: selectedYear === currentDate.year ? currentDate.weekNumber : 1,
+  }),
+}
+console.log(calendar, selectedYear, currentDate)
+watch(() => calendar.viewMode.value, () => {
   loadMonth()
 })
+
+const viewMode = computed(() => {
+  const key = calendar.viewMode.value
+  return {
+    key,
+    name: viewModeOptions.find((obj) => obj.key === key)?.name,
+  }
+})
+
 loadMonth()
 
 function loadMonth() {
   const tmpDays = []
-  const currentMonth = DateTime.fromObject({ year: 2022, month: 6 }).startOf('month')
 
-  const start = currentMonth.startOf('week')
-  const end = viewMode.value === 'week' ? currentMonth.endOf('week') : currentMonth.endOf('month').endOf('week')
+  let focusDate = DateTime.fromObject({
+    year: calendar.currents.value.year,
+    month: calendar.currents.value.month,
+  })
+  let start, end
+
+  if (viewMode.value.key === 'week') {
+    if (currentDate.year === selectedYear)
+      focusDate = DateTime.fromObject({ weekNumber: calendar.currents.value.week })
+    start = focusDate.startOf('week')
+    end = focusDate.endOf('week')
+  } else if (viewMode.value.key === 'month') {
+    focusDate = focusDate.startOf('month')
+    start = focusDate.startOf('week')
+    end = focusDate.endOf('month').endOf('week')
+  }
 
   for (let day = start; day < end; day = day.plus({ day: 1 })) {
-    const isCurrentMonth = isInCurrentMonth(day, currentMonth)
+    const isCurrentMonth = isInCurrentMonth(day, focusDate)
     const okIsToday = isToday(day)
 
     tmpDays.push({
@@ -104,7 +187,7 @@ function loadMonth() {
 }
 
 function updateViewMode(type) {
-  viewMode.value = type
+  calendar.viewMode.value = type
 }
 
 function isInCurrentMonth(date, currentMonth) {
@@ -139,9 +222,11 @@ function isToday(date) {
 
 .day:nth-of-type(7n - 1):before {
   content: "Sb";
+  color: red;
 }
 
 .day:nth-of-type(7n):before {
   content: "Nd";
+  color: red;
 }
 </style>

From 78932823852df0a40e99f45ebb59b195c3c35273 Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <contact@kamilcraft.com>
Date: Thu, 23 Jun 2022 10:47:23 +0200
Subject: [PATCH 4/6] #152 - wip

---
 .../js/Shared/Widgets/VacationCalendar.vue    | 168 +++++++++++++-----
 .../VacationCalendar/ViewModeOptions.js       |  13 ++
 2 files changed, 133 insertions(+), 48 deletions(-)
 create mode 100644 resources/js/Shared/Widgets/VacationCalendar/ViewModeOptions.js

diff --git a/resources/js/Shared/Widgets/VacationCalendar.vue b/resources/js/Shared/Widgets/VacationCalendar.vue
index 1779ab8..558e467 100644
--- a/resources/js/Shared/Widgets/VacationCalendar.vue
+++ b/resources/js/Shared/Widgets/VacationCalendar.vue
@@ -1,30 +1,55 @@
 <template>
   <section class="bg-white shadow-md">
-    <div class="flex items-center justify-between p-4 sm:px-6">
+    <div class="grid grid-cols-3 grid-rows-1 items-center justify-center p-4 sm:px-6">
       <h2 class="text-lg font-medium leading-6 text-gray-900">
-        Kalendarz
+        {{ calendarState.monthName }} {{ calendar.currents.year !== selectedYear ? calendar.currents.year : undefined }}
       </h2>
-      <div class="flex items-center rounded-md shadow-sm md:items-stretch">
-        <button type="button" class="flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 pl-3 pr-4 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50">
-          <span class="sr-only">Previous month</span>
-          <ChevronLeftIcon class="h-5 w-5" aria-hidden="true" />
-        </button>
-        <button type="button" class="hidden border-t border-b border-gray-300 bg-white px-3.5 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:relative md:block">Today</button>
-        <span class="relative -mx-px h-5 w-px bg-gray-300 md:hidden" />
-        <button type="button" class="flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 pl-4 pr-3 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50">
-          <span class="sr-only">Next month</span>
-          <ChevronRightIcon class="h-5 w-5" aria-hidden="true" />
-        </button>
+      <div class="flex justify-center">
+        <div class="flex items-center rounded-md shadow-sm md:items-stretch">
+          <button
+            v-if="calendarState.isPrevious"
+            type="button"
+            class="flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 pl-3 pr-4 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
+            @click="toLast"
+          >
+            <span class="sr-only">Poprzedni {{ calendarState.viewMode.details.shortcut }}</span>
+            <ChevronLeftIcon
+              class="h-5 w-5"
+              aria-hidden="true"
+            />
+          </button>
+          <button
+            type="button"
+            class="hidden border-t border-b border-gray-300 bg-white px-3.5 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:relative md:block"
+            :class="{ 'rounded-l-md border border-r-0': !calendarState.isPrevious, 'rounded-r-md border border-l-0': !calendarState.isNext }"
+            @click="resetCalendar"
+          >
+            Dziś
+          </button>
+          <span class="relative -mx-px h-5 w-px bg-gray-300 md:hidden" />
+          <button
+            v-if="calendarState.isNext"
+            type="button"
+            class="flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 pl-4 pr-3 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
+            @click="toNext"
+          >
+            <span class="sr-only">Następny {{ calendarState.viewMode.details.shortcut }}</span>
+            <ChevronRightIcon
+              class="h-5 w-5"
+              aria-hidden="true"
+            />
+          </button>
+        </div>
       </div>
       <Menu
         as="div"
-        class="relative"
+        class="flex justify-end relative"
       >
         <MenuButton
           type="button"
           class="flex items-center rounded-md border border-gray-300 bg-white py-2 pl-3 pr-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50"
         >
-          {{ viewMode.name }}
+          {{ calendarState.viewMode.details.name }}
           <ChevronDownIcon
             class="ml-2 h-5 w-5 text-gray-400"
             aria-hidden="true"
@@ -43,7 +68,7 @@
           <MenuItems class="absolute right-0 mt-3 w-36 origin-top-right overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
             <div class="py-1">
               <MenuItem
-                v-for="option in viewModeOptions"
+                v-for="option in viewModes.all"
                 :key="option.key"
                 v-slot="{ active }"
               >
@@ -51,9 +76,9 @@
                   :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'flex px-4 py-2 text-sm text-left w-full']"
                   @click="updateViewMode(option.key)"
                 >
-                  {{ option.name }}
+                  {{ option.shortcut }}
                   <CheckIcon
-                    v-if="option.key === viewMode.key"
+                    v-if="option.is(calendar.viewMode)"
                     class="ml-2 w-5 h-5 text-blumilk-500"
                   />
                 </button>
@@ -65,7 +90,7 @@
     </div>
     <div class="ring-1 ring-black ring-opacity-5 lg:flex lg:flex-auto lg:flex-col">
       <div
-        v-if="viewMode.key === 'month'"
+        v-if="calendarState.viewMode.isMonth"
         class="grid grid-cols-7 gap-px border-b border-gray-300 bg-gray-200 text-center text-xs font-semibold leading-6 text-gray-700 lg:flex-none"
       >
         <div class="bg-white py-2">
@@ -91,12 +116,12 @@
         </div>
       </div>
       <div class="flex bg-gray-200 text-xs leading-6 text-gray-700 lg:flex-auto">
-        <div :class="[viewMode.key === 'week' ? 'grid-rows-1' : 'grid-rows-5', 'w-full grid grid-cols-7 gap-px']">
+        <div :class="[calendarState.viewMode.isWeek ? 'grid-rows-1' : 'grid-rows-5', 'w-full grid grid-cols-7 gap-px']">
           <div
             v-for="(day, index) in days"
             :key="index"
             class="flex flex-col"
-            :class="[day.isCurrentMonth ? 'bg-white' : 'bg-gray-50 text-gray-500', viewMode.key === 'week' && index !== 0 && (index % 5 === 0 || index % 6 === 0) ? 'bg-red-100' : undefined, viewMode.key === 'week' ? 'day' : undefined, 'relative py-2 px-3']"
+            :class="[day.isCurrentMonth ? 'bg-white' : 'bg-gray-50 text-gray-500', calendarState.viewMode.isWeek && index !== 0 && (index % 5 === 0 || index % 6 === 0) ? 'bg-red-100' : undefined, calendarState.viewMode.isWeek ? 'day' : 'month-day', 'relative py-2 px-3']"
           >
             <time
               :datetime="day.date"
@@ -114,65 +139,76 @@
 <script setup>
 import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/solid'
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
-import { ref, watch, computed } from 'vue'
+import { ref, watch, computed, reactive } from 'vue'
 import { DateTime } from 'luxon'
 import useCurrentYearPeriodInfo from '@/Composables/yearPeriodInfo'
+import { useMonthInfo } from '@/Composables/monthInfo'
+import viewModes from '@/Shared/Widgets/VacationCalendar/ViewModeOptions'
 
 let days = ref([])
+const months = useMonthInfo().getMonths()
 function getCurrentDate() {
   const { year, month, weekNumber } = DateTime.now()
   return { year, month, weekNumber }
 }
 const selectedYear = useCurrentYearPeriodInfo().year.value
 const currentDate = getCurrentDate()
-let viewModeOptions = [
-  { key: 'week', name: 'Week view' },
-  { key: 'month', name: 'Month view' },
-]
+
 const calendar = {
   viewMode: ref('week'),
-  currents: ref({
+  currents: reactive({
     year: selectedYear,
     month: selectedYear === currentDate.year ? currentDate.month : 1,
     week: selectedYear === currentDate.year ? currentDate.weekNumber : 1,
   }),
+  toPreviousActive: computed(() => calendar.currents.month !== 1),
 }
-console.log(calendar, selectedYear, currentDate)
-watch(() => calendar.viewMode.value, () => {
-  loadMonth()
+
+const calendarState = reactive({
+  viewMode: {
+    isWeek: computed(() => calendar.viewMode.value === 'week'),
+    isMonth: computed(() => calendar.viewMode.value === 'month'),
+    details: computed(() => viewModes.find(calendar.viewMode.value)),
+  },
+  monthName: computed(() => months[calendar.currents.month - 1]?.name),
+  isActualYear: computed(() => calendar.currents.year !== selectedYear),
+  isPrevious: computed(() => calendar.currents.month !== 1),
+  isNext: computed(() => calendar.currents.month !== 12),
 })
 
-const viewMode = computed(() => {
-  const key = calendar.viewMode.value
-  return {
-    key,
-    name: viewModeOptions.find((obj) => obj.key === key)?.name,
-  }
+watch([calendar.viewMode, calendar.currents], () => {
+  loadCalendar()
 })
 
-loadMonth()
-
-function loadMonth() {
-  const tmpDays = []
+loadCalendar()
 
+function loadCalendar() {
+  console.log('Loaded')
   let focusDate = DateTime.fromObject({
-    year: calendar.currents.value.year,
-    month: calendar.currents.value.month,
+    year: calendar.currents.year,
+    month: calendar.currents.month,
   })
   let start, end
 
-  if (viewMode.value.key === 'week') {
+  if (calendar.viewMode.value === 'week') {
     if (currentDate.year === selectedYear)
-      focusDate = DateTime.fromObject({ weekNumber: calendar.currents.value.week })
+      focusDate = DateTime.fromObject({ weekNumber: calendar.currents.week })
+    else
+      focusDate = focusDate.plus({ week: calendar.currents.week - 1 })
     start = focusDate.startOf('week')
     end = focusDate.endOf('week')
-  } else if (viewMode.value.key === 'month') {
+  } else if (calendar.viewMode.value === 'month') {
     focusDate = focusDate.startOf('month')
     start = focusDate.startOf('week')
     end = focusDate.endOf('month').endOf('week')
   }
 
-  for (let day = start; day < end; day = day.plus({ day: 1 })) {
+  generateCalendarData(start, end, focusDate)
+}
+
+function generateCalendarData(startDate, endDate, focusDate) {
+  const tmpDays = []
+  for (let day = startDate; day < endDate; day = day.plus({ day: 1 })) {
     const isCurrentMonth = isInCurrentMonth(day, focusDate)
     const okIsToday = isToday(day)
 
@@ -186,7 +222,36 @@ function loadMonth() {
   days.value = tmpDays
 }
 
+function toLast() {
+  if (calendar.viewMode.value === 'week')
+    addWeeks(-1)
+  else
+    addMonths(-1)
+}
+
+function toNext() {
+  if (calendar.viewMode.value === 'week') {
+    addWeeks()
+  } else
+    addMonths()
+}
+
+function resetCalendar() {
+  calendar.currents.year = selectedYear
+  calendar.currents.month = selectedYear === currentDate.year ? currentDate.month : 1
+  calendar.currents.week = selectedYear === currentDate.year ? currentDate.weekNumber : 1
+}
+
+function addWeeks(howMany = 1) {
+  calendar.currents.week += howMany
+}
+
+function addMonths(howMany = 1) {
+  calendar.currents.month += howMany
+}
+
 function updateViewMode(type) {
+  resetCalendar()
   calendar.viewMode.value = type
 }
 
@@ -220,13 +285,20 @@ function isToday(date) {
   content: "Pt";
 }
 
+.day:nth-of-type(7n - 1):before,
+.day:nth-of-type(7n):before {
+  color: #991b1b;
+}
+
 .day:nth-of-type(7n - 1):before {
   content: "Sb";
-  color: red;
 }
 
 .day:nth-of-type(7n):before {
   content: "Nd";
-  color: red;
+}
+
+.month-day:nth-of-type(7n - 1), .month-day:nth-of-type(7n) {
+  background-color: #fee2e2;
 }
 </style>
diff --git a/resources/js/Shared/Widgets/VacationCalendar/ViewModeOptions.js b/resources/js/Shared/Widgets/VacationCalendar/ViewModeOptions.js
new file mode 100644
index 0000000..4f7370a
--- /dev/null
+++ b/resources/js/Shared/Widgets/VacationCalendar/ViewModeOptions.js
@@ -0,0 +1,13 @@
+function isViewModeKey(key) {
+  return this.key === key.value
+}
+
+const modes = [
+  { key: 'week', name: 'Widok tygodnia', shortcut: 'Tydzień', is: isViewModeKey },
+  { key: 'month', name: 'Widok miesiąca', shortcut: 'Miesiąc', is: isViewModeKey },
+]
+
+export default {
+  all: modes,
+  find: whereMode => modes.find(mode => mode.key === whereMode),
+}

From 4e16f363ac7a6148548321465e4c135fc43c008f Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <contact@kamilcraft.com>
Date: Thu, 23 Jun 2022 20:46:17 +0200
Subject: [PATCH 5/6] #152 - optimization

---
 .../ViewModeOptions.js                        |   7 +-
 .../js/Shared/Widgets/VacationCalendar.vue    | 119 ++++++++++--------
 2 files changed, 70 insertions(+), 56 deletions(-)
 rename resources/js/Shared/Widgets/{VacationCalendar => Calendar}/ViewModeOptions.js (65%)

diff --git a/resources/js/Shared/Widgets/VacationCalendar/ViewModeOptions.js b/resources/js/Shared/Widgets/Calendar/ViewModeOptions.js
similarity index 65%
rename from resources/js/Shared/Widgets/VacationCalendar/ViewModeOptions.js
rename to resources/js/Shared/Widgets/Calendar/ViewModeOptions.js
index 4f7370a..a04d99d 100644
--- a/resources/js/Shared/Widgets/VacationCalendar/ViewModeOptions.js
+++ b/resources/js/Shared/Widgets/Calendar/ViewModeOptions.js
@@ -2,12 +2,11 @@ function isViewModeKey(key) {
   return this.key === key.value
 }
 
-const modes = [
+export const viewModes = [
   { key: 'week', name: 'Widok tygodnia', shortcut: 'Tydzień', is: isViewModeKey },
   { key: 'month', name: 'Widok miesiąca', shortcut: 'Miesiąc', is: isViewModeKey },
 ]
 
-export default {
-  all: modes,
-  find: whereMode => modes.find(mode => mode.key === whereMode),
+export function find(modeKey) {
+  return viewModes.find(mode => mode.key === modeKey)
 }
diff --git a/resources/js/Shared/Widgets/VacationCalendar.vue b/resources/js/Shared/Widgets/VacationCalendar.vue
index 558e467..6aa90e0 100644
--- a/resources/js/Shared/Widgets/VacationCalendar.vue
+++ b/resources/js/Shared/Widgets/VacationCalendar.vue
@@ -2,7 +2,7 @@
   <section class="bg-white shadow-md">
     <div class="grid grid-cols-3 grid-rows-1 items-center justify-center p-4 sm:px-6">
       <h2 class="text-lg font-medium leading-6 text-gray-900">
-        {{ calendarState.monthName }} {{ calendar.currents.year !== selectedYear ? calendar.currents.year : undefined }}
+        {{ calendarState.monthName }} {{ calendarState.isActualYear ? undefined : calendar.currents.year }}
       </h2>
       <div class="flex justify-center">
         <div class="flex items-center rounded-md shadow-sm md:items-stretch">
@@ -68,7 +68,7 @@
           <MenuItems class="absolute right-0 mt-3 w-36 origin-top-right overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
             <div class="py-1">
               <MenuItem
-                v-for="option in viewModes.all"
+                v-for="option in viewModes"
                 :key="option.key"
                 v-slot="{ active }"
               >
@@ -143,7 +143,7 @@ import { ref, watch, computed, reactive } from 'vue'
 import { DateTime } from 'luxon'
 import useCurrentYearPeriodInfo from '@/Composables/yearPeriodInfo'
 import { useMonthInfo } from '@/Composables/monthInfo'
-import viewModes from '@/Shared/Widgets/VacationCalendar/ViewModeOptions'
+import { viewModes, find as findViewMode } from '@/Shared/Widgets/Calendar/ViewModeOptions'
 
 let days = ref([])
 const months = useMonthInfo().getMonths()
@@ -159,16 +159,15 @@ const calendar = {
   currents: reactive({
     year: selectedYear,
     month: selectedYear === currentDate.year ? currentDate.month : 1,
-    week: selectedYear === currentDate.year ? currentDate.weekNumber : 1,
+    weekPosition: 0,
   }),
-  toPreviousActive: computed(() => calendar.currents.month !== 1),
 }
 
 const calendarState = reactive({
   viewMode: {
     isWeek: computed(() => calendar.viewMode.value === 'week'),
     isMonth: computed(() => calendar.viewMode.value === 'month'),
-    details: computed(() => viewModes.find(calendar.viewMode.value)),
+    details: computed(() => findViewMode(calendar.viewMode.value)),
   },
   monthName: computed(() => months[calendar.currents.month - 1]?.name),
   isActualYear: computed(() => calendar.currents.year !== selectedYear),
@@ -176,51 +175,57 @@ const calendarState = reactive({
   isNext: computed(() => calendar.currents.month !== 12),
 })
 
+const customCalendar = {
+  loadCalendar() {
+    const date = DateTime.fromObject({
+      year: calendar.currents.year,
+      month: calendar.currents.month,
+    })
+    days.value = this.generateCalendarData(date)
+  },
+  generateCalendarData(date) {
+    const firstMonthDay = date.startOf('month')
+    const lastMonthDay = date.endOf('month')
+
+    if (calendarState.viewMode.isWeek) {
+      return this.generateWeekData(firstMonthDay.startOf('week'))
+    } else if (calendarState.viewMode.isMonth) {
+      return this.generateMonthData(firstMonthDay.startOf('week'), lastMonthDay.endOf('week'))
+    }
+    return []
+  },
+  generateWeekData(start) {
+    let days = []
+    const startWeek = start.plus({ week: calendar.currents.weekPosition })
+    const endWeek = startWeek.endOf('week')
+    for (let day = startWeek; day < endWeek; day = day.plus({ day: 1 })) {
+      days.push(this.prepareDay(day))
+    }
+    return days
+  },
+  generateMonthData(start, end) {
+    let days = []
+    for (let day = start; day < end; day = day.plus({ day: 1 })) {
+      days.push(this.prepareDay(day))
+    }
+
+    return days
+  },
+  prepareDay(day) {
+    return {
+      date: day.toISODate(),
+      dayNumber: day.day,
+      isCurrentMonth: isInCurrentMonth(day),
+      isToday: isToday(day),
+    }
+  },
+}
+
 watch([calendar.viewMode, calendar.currents], () => {
-  loadCalendar()
+  customCalendar.loadCalendar()
 })
 
-loadCalendar()
-
-function loadCalendar() {
-  console.log('Loaded')
-  let focusDate = DateTime.fromObject({
-    year: calendar.currents.year,
-    month: calendar.currents.month,
-  })
-  let start, end
-
-  if (calendar.viewMode.value === 'week') {
-    if (currentDate.year === selectedYear)
-      focusDate = DateTime.fromObject({ weekNumber: calendar.currents.week })
-    else
-      focusDate = focusDate.plus({ week: calendar.currents.week - 1 })
-    start = focusDate.startOf('week')
-    end = focusDate.endOf('week')
-  } else if (calendar.viewMode.value === 'month') {
-    focusDate = focusDate.startOf('month')
-    start = focusDate.startOf('week')
-    end = focusDate.endOf('month').endOf('week')
-  }
-
-  generateCalendarData(start, end, focusDate)
-}
-
-function generateCalendarData(startDate, endDate, focusDate) {
-  const tmpDays = []
-  for (let day = startDate; day < endDate; day = day.plus({ day: 1 })) {
-    const isCurrentMonth = isInCurrentMonth(day, focusDate)
-    const okIsToday = isToday(day)
-
-    tmpDays.push({
-      date: day.toISODate(),
-      isCurrentMonth,
-      isToday: okIsToday,
-    })
-  }
-
-  days.value = tmpDays
-}
+customCalendar.loadCalendar()
 
 function toLast() {
   if (calendar.viewMode.value === 'week')
@@ -239,11 +244,21 @@ function toNext() {
 function resetCalendar() {
   calendar.currents.year = selectedYear
   calendar.currents.month = selectedYear === currentDate.year ? currentDate.month : 1
-  calendar.currents.week = selectedYear === currentDate.year ? currentDate.weekNumber : 1
+  calendar.currents.weekPosition = 1
 }
 
 function addWeeks(howMany = 1) {
-  calendar.currents.week += howMany
+  const date = DateTime.fromObject({
+    year: calendar.currents.year,
+    month: calendar.currents.month,
+  })
+  const nextMonth = date.plus({ week: calendar.currents.weekPosition }).month
+  if (calendarState.viewMode.isWeek && nextMonth !== calendar.currents.month) {
+    calendar.currents.month = nextMonth
+    calendar.currents.weekPosition = 0
+    return
+  }
+  calendar.currents.weekPosition += howMany
 }
 
 function addMonths(howMany = 1) {
@@ -255,8 +270,8 @@ function updateViewMode(type) {
   calendar.viewMode.value = type
 }
 
-function isInCurrentMonth(date, currentMonth) {
-  return currentMonth.hasSame(date, 'month')
+function isInCurrentMonth(date) {
+  return calendar.currents.month === date.month
 }
 
 function isToday(date) {

From a7bc4695a7f909910bda63220b64b3c55c5a0c18 Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <contact@kamilcraft.com>
Date: Fri, 24 Jun 2022 02:16:51 +0200
Subject: [PATCH 6/6] #152 - final support for weeks

---
 .../js/Shared/Widgets/VacationCalendar.vue    | 107 ++++++++++++------
 1 file changed, 75 insertions(+), 32 deletions(-)

diff --git a/resources/js/Shared/Widgets/VacationCalendar.vue b/resources/js/Shared/Widgets/VacationCalendar.vue
index 6aa90e0..7d9de57 100644
--- a/resources/js/Shared/Widgets/VacationCalendar.vue
+++ b/resources/js/Shared/Widgets/VacationCalendar.vue
@@ -2,7 +2,7 @@
   <section class="bg-white shadow-md">
     <div class="grid grid-cols-3 grid-rows-1 items-center justify-center p-4 sm:px-6">
       <h2 class="text-lg font-medium leading-6 text-gray-900">
-        {{ calendarState.monthName }} {{ calendarState.isActualYear ? undefined : calendar.currents.year }}
+        {{ calendarState.monthName }} {{ !calendarState.isActualYear ? calendar.currents.year : undefined }}
       </h2>
       <div class="flex justify-center">
         <div class="flex items-center rounded-md shadow-sm md:items-stretch">
@@ -22,7 +22,7 @@
             type="button"
             class="hidden border-t border-b border-gray-300 bg-white px-3.5 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:relative md:block"
             :class="{ 'rounded-l-md border border-r-0': !calendarState.isPrevious, 'rounded-r-md border border-l-0': !calendarState.isNext }"
-            @click="resetCalendar"
+            @click="goToToday"
           >
             Dziś
           </button>
@@ -116,7 +116,10 @@
         </div>
       </div>
       <div class="flex bg-gray-200 text-xs leading-6 text-gray-700 lg:flex-auto">
-        <div :class="[calendarState.viewMode.isWeek ? 'grid-rows-1' : 'grid-rows-5', 'w-full grid grid-cols-7 gap-px']">
+        <div
+          class="w-full grid grid-cols-7 gap-px"
+          :class="{ 'grid-rows-1': calendarState.viewMode.isWeek }"
+        >
           <div
             v-for="(day, index) in days"
             :key="index"
@@ -149,7 +152,7 @@ let days = ref([])
 const months = useMonthInfo().getMonths()
 function getCurrentDate() {
   const { year, month, weekNumber } = DateTime.now()
-  return { year, month, weekNumber }
+  return { year, month, week: weekNumber }
 }
 const selectedYear = useCurrentYearPeriodInfo().year.value
 const currentDate = getCurrentDate()
@@ -159,7 +162,7 @@ const calendar = {
   currents: reactive({
     year: selectedYear,
     month: selectedYear === currentDate.year ? currentDate.month : 1,
-    weekPosition: 0,
+    week: selectedYear === currentDate.year ? currentDate.week : 0,
   }),
 }
 
@@ -170,16 +173,17 @@ const calendarState = reactive({
     details: computed(() => findViewMode(calendar.viewMode.value)),
   },
   monthName: computed(() => months[calendar.currents.month - 1]?.name),
-  isActualYear: computed(() => calendar.currents.year !== selectedYear),
-  isPrevious: computed(() => calendar.currents.month !== 1),
-  isNext: computed(() => calendar.currents.month !== 12),
+  isActualYear: computed(() => calendar.currents.year === DateTime.now().year),
+  isPrevious: computed(() => calendarState.viewMode.isMonth ? calendar.currents.month !== 1 : calendar.currents.week > 0),
+  isNext: computed(() => calendarState.viewMode.isMonth ? calendar.currents.month !== 12 : calendar.currents.week < DateTime.fromObject({ year: selectedYear, month: 12, day: 31 }).weekNumber),
 })
 
 const customCalendar = {
   loadCalendar() {
     const date = DateTime.fromObject({
       year: calendar.currents.year,
-      month: calendar.currents.month,
+      month: calendarState.viewMode.isMonth ? calendar.currents.month : 1,
+      day: 1,
     })
     days.value = this.generateCalendarData(date)
   },
@@ -195,8 +199,13 @@ const customCalendar = {
     return []
   },
   generateWeekData(start) {
-    let days = []
-    const startWeek = start.plus({ week: calendar.currents.weekPosition })
+    let days = [], startWeek
+    if (calendar.currents.month === 1 && calendar.currents.week === 0)
+      startWeek = DateTime.fromObject({ year: calendar.currents.year, month: 1, day: 1 }).startOf('week')
+    else if (calendarState.isActualYear)
+      startWeek = DateTime.fromObject({ weekNumber: calendar.currents.week })
+    else
+      startWeek = start.plus({ week: calendar.currents.week })
     const endWeek = startWeek.endOf('week')
     for (let day = startWeek; day < endWeek; day = day.plus({ day: 1 })) {
       days.push(this.prepareDay(day))
@@ -229,44 +238,78 @@ customCalendar.loadCalendar()
 
 function toLast() {
   if (calendar.viewMode.value === 'week')
-    addWeeks(-1)
+    minusWeek()
   else
-    addMonths(-1)
+    minusMonth()
 }
 
 function toNext() {
-  if (calendar.viewMode.value === 'week') {
-    addWeeks()
-  } else
-    addMonths()
+  if (calendar.viewMode.value === 'week')
+    addWeek()
+  else
+    addMonth()
 }
 
-function resetCalendar() {
-  calendar.currents.year = selectedYear
-  calendar.currents.month = selectedYear === currentDate.year ? currentDate.month : 1
-  calendar.currents.weekPosition = 1
+function resetCalendar(config = {}) {
+  const currentMonth = isUndefined(config.month) ? currentDate.month : config.month
+  const currentWeek = isUndefined(config.week) ? currentDate.week : config.week
+
+  calendar.currents.year = isUndefined(config.year) ? selectedYear : config.month
+  calendar.currents.month = calendarState.isActualYear || !isUndefined(config.year) ? currentMonth : 1
+  calendar.currents.week = calendarState.isActualYear || !isUndefined(config.year) ? currentWeek : 1
 }
 
-function addWeeks(howMany = 1) {
-  const date = DateTime.fromObject({
+function isUndefined(value) {
+  return value === undefined
+}
+
+function addWeek(minus = false) {
+  const howMany = minus ? -1: 1
+  let nextMonth, date = DateTime.fromObject({
     year: calendar.currents.year,
-    month: calendar.currents.month,
+    month: 1,
+    day: 1,
   })
-  const nextMonth = date.plus({ week: calendar.currents.weekPosition }).month
-  if (calendarState.viewMode.isWeek && nextMonth !== calendar.currents.month) {
-    calendar.currents.month = nextMonth
-    calendar.currents.weekPosition = 0
+
+  date = date.plus({ week: calendar.currents.week + howMany })
+
+  const startWeekDay = date.startOf('week'), endWeekDay = date.endOf('week')
+  nextMonth = howMany > 0 ? startWeekDay.month : endWeekDay.month
+  if (howMany < 0 && endWeekDay.day === endWeekDay.daysInMonth)
+    calendar.currents.week--
+  else if (howMany > 0 && startWeekDay.day === 1)
+    calendar.currents.week++
+
+  if (nextMonth !== calendar.currents.month) {
+    calendar.currents.month = calendar.currents.week > 1 ? nextMonth : 1
+    if (calendar.currents.week === 1)
+      calendar.currents.week = 0
     return
   }
-  calendar.currents.weekPosition += howMany
+  calendar.currents.week += howMany
 }
 
-function addMonths(howMany = 1) {
-  calendar.currents.month += howMany
+function minusWeek() {
+  addWeek(true)
+}
+
+function addMonth(minus = false) {
+  calendar.currents.month += minus ? -1 : 1
+}
+
+function minusMonth() {
+  addMonth(true)
+}
+
+function goToToday() {
+  resetCalendar({ year: currentDate.year, months: currentDate.month, week: currentDate.week })
 }
 
 function updateViewMode(type) {
-  resetCalendar()
+  if (type === 'month')
+    resetCalendar({ week: 1 })
+  else
+    resetCalendar()
   calendar.viewMode.value = type
 }