From 1d81ce288825c6fac21833d1b2332e6490e1bf0e Mon Sep 17 00:00:00 2001
From: Prannaya <prannayagupta@gmail.com>
Date: Sun, 16 Apr 2023 13:29:19 +0800
Subject: [PATCH] custom calendar widget

---
 frontend/src/components/calendar/Calendar.vue | 398 ++++++++++++++++++
 .../src/components/calendar/EventsModal.vue   | 222 ++++++++++
 frontend/src/components/calendar/Top.vue      | 105 +++++
 frontend/src/store/calendar.ts                |  71 ++++
 4 files changed, 796 insertions(+)
 create mode 100644 frontend/src/components/calendar/Calendar.vue
 create mode 100644 frontend/src/components/calendar/EventsModal.vue
 create mode 100644 frontend/src/components/calendar/Top.vue
 create mode 100644 frontend/src/store/calendar.ts

diff --git a/frontend/src/components/calendar/Calendar.vue b/frontend/src/components/calendar/Calendar.vue
new file mode 100644
index 0000000..65c777c
--- /dev/null
+++ b/frontend/src/components/calendar/Calendar.vue
@@ -0,0 +1,398 @@
+<template>
+  <div ref="calendarContainer" class="min-h-full min-w-full text-gray-800">
+    <div class="w-full border grid grid-cols-7">
+      <Top />
+      <div
+        v-for="day in daysOfTheWeek" :key="day"
+        class="text-center text-sm md:text-base lg:text-lg font-semibold border"
+      >
+        {{ day.substring(0, 3) }}
+      </div>
+
+
+      <!-- <div v-if="firstDayOfCurrentMonth > 0"> -->
+      <div
+        v-for="day in firstDayOfCurrentMonth"
+        :key="day"
+        class="h-16 md:h-36 w-full border opacity-50"
+      ></div>
+    <!-- </div> -->
+      <div
+        v-for="day in daysInCurrentMonth"
+        :key="day"
+        class="h-16 md:h-36 w-full border align-top"
+      >
+        <div
+          class="w-full h-full text-xs md:text-sm lg:text-base text-center transition-colors"
+          :class="{
+            'bg-slate-200 text-gray-600 font-medium': isToday(day),
+            'hover:bg-gray-100 hover:text-gray-700': !isToday(day),
+          }"
+        >
+
+        <div v-if="isToday(day)" class="flex w-full justify-center items-center pt-1">
+          <div  class="h-6 w-6 flex justify-center items-center rounded-full shadow-sm" :class="{'bg-purple-600 text-white': isToday(day)}">
+              <h3 class="font-medium"> {{ day }} </h3>
+            </div>
+          </div>
+          <div v-else>{{ day }}</div>
+
+
+          <!-- <span>{{ day }}</span> -->
+          <div
+            v-for="evt in maxThreeTodaysEvent(day, events)"
+            :key="evt.id"
+            class="hidden md:block"
+          >
+          <!-- color="#ffcccb" -->
+            <v-card
+              class="w-full px-2 py-1 flex space-x-1 items-center whitespace-nowrap overflow-hidden cursor-pointer rounded-sm my-1"
+              @click="togglePopover($event, evt)"
+              :class="{'bg-red-200': evt.conference, 'bg-blue-200': evt.competition}">
+              <div class="w-1/12">
+                <div class="h-2 w-2 rounded-full bg-purple-600"></div>
+              </div>
+              <div class="w-11/12">
+                <h5 class="text-xs tracking-tight text-clip overflow-hidden">
+                  {{ evt.title }}
+                </h5>
+              </div>
+            </v-card>
+          </div>
+
+          <div
+            v-if="allTodaysEvent(day, events).length > 3"
+            class="hidden md:flex mt-2 w-full px-2 py-1 space-x-2 items-center whitespace-nowrap overflow-hidden hover:text-gray-800 hover:font-medium cursor-pointer rounded-sm"
+            @click="openModal(day, allTodaysEvent(day, events))"
+          >
+            <div class="w-1/12">
+
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                class="w-4 h-4"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M12 6v12m6-6H6"
+                />
+              </svg>
+            </div>
+            <div class="w-11/12">
+              <h6
+                class="text-xs tracking-tight text-clip text-left overflow-hidden"
+              >
+              {{ allTodaysEvent(day, events).length - 3 + " more events" }}
+              </h6>
+            </div>
+          </div>
+
+          <div
+            v-if="allTodaysEvent(day, events).length > 0"
+            class="flex md:hidden h-2/3 w-full justify-center items-center"
+            @click="openModal(day, allTodaysEvent(day, events))"
+          >
+            <div
+              class="h-6 w-6 flex justify-center items-center text-xs bg-purple-600 rounded-full shadow-sm"
+            >
+              <h3 class="font-medium text-white">
+                {{ allTodaysEvent(day, events).length }}
+              </h3>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- <div v-if="lastEmptyCells > 0"> -->
+      <div
+        v-for="day in lastEmptyCells"
+        :key="day"
+        class="h-16 md:h-36 w-full border opacity-50"
+      ></div></div>
+
+      <!-- mobile navigation -->
+      <div class="md:hidden col-span-7 flex justify-between items-center p-2">
+        <div>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            class="w-5 h-5 hover:text-gray-500 cursor-pointer hover:h-6 hover:w-6 transition-all"
+            @click="calendarStore.decrementMonth(1)"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M18.75 19.5l-7.5-7.5 7.5-7.5m-6 15L5.25 12l7.5-7.5"
+            />
+          </svg>
+        </div>
+        <div>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            class="w-5 h-5 hover:text-gray-500 cursor-pointer hover:h-6 hover:w-6 transition-all"
+            @click="calendarStore.incrementMonth(1)"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5"
+            />
+          </svg>
+        </div>
+      <!-- </div> -->
+    </div>
+  </div>
+
+  <!-- use the modal component -->
+  <transition name="modal">
+    <Modal
+      v-if="modalShow"
+      @close-modal="closeModal"
+      @toggle-popover="togglePopover"
+      :day="modalDay"
+      :month="calendarStore.getMonth"
+      :year="calendarStore.getYear"
+      :events="modalEvents"
+    />
+  </transition>
+
+  <!-- popover component  -->
+  <div
+    ref="popoverRef"
+    :class="{ hidden: !popoverShow, block: popoverShow }"
+    class="bg-gray-100 mb-3 block z-50 max-w-xs rounded-lg shadow-md"
+  >
+    <slot
+      name="eventDialog"
+      :eventDialogData="todaysEvent"
+      :closeEventDialog="togglePopover"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, onUpdated, type Ref } from "vue";
+import Top from "@/components/calendar/Top.vue";
+import Modal from "@/components/calendar/EventsModal.vue";
+import { useCalendarStore } from "@/store/calendar";
+import { usePopover } from "@/composables/popover";
+import { Event } from "@/types/calendar"
+
+/**************************************
+ * PROPS
+ * ************************************
+ */
+const props = defineProps({
+  events: {
+    type: Array<Event>,
+    required: true,
+  },
+});
+
+// Store initialization and subscription
+const calendarStore = useCalendarStore();
+calendarStore.$subscribe((mutation, state) => {
+  getDaysInMonth();
+  getFirstDayOfMonth();
+});
+
+// component variables
+const daysOfTheWeek = {
+  1: "Sunday",
+  2: "Monday",
+  3: "Tuesday",
+  4: "Wednesday",
+  5: "Thursday",
+  6: "Friday",
+  7: "Saturday",
+};
+const daysInCurrentMonth = ref(0);
+const firstDayOfCurrentMonth = ref(0);
+const lastEmptyCells = ref(0);
+const modalShow = ref(false);
+const modalDay = ref(0);
+const popoverRef: Ref<HTMLElement | null> = ref(null);
+const modalEvents: Ref<Event[]> = ref([]);
+
+// popover composable
+const { popoverShow, todaysEvent, togglePopover } = usePopover(popoverRef);
+
+/**
+ * Gets the number of days present in a month
+ * The month is gotten from the calendar store
+ */
+const getDaysInMonth = () => {
+  daysInCurrentMonth.value = new Date(
+    calendarStore.getYear,
+    calendarStore.getMonth + 1,
+    0
+  ).getDate();
+};
+
+/**
+ * Gets in number, the first day of a month
+ * The month is gottenn from the calendar store
+ */
+const getFirstDayOfMonth = () => {
+  firstDayOfCurrentMonth.value = new Date(
+    calendarStore.getYear,
+    calendarStore.getMonth,
+    1
+  ).getDay();
+};
+
+/**
+ * Gets the last empty cells (if any) on the calendar grid
+ */
+const lastCalendarCells = () => {
+  let totalGrid = firstDayOfCurrentMonth.value <= 5 ? 35 : 42;
+
+  lastEmptyCells.value =
+    totalGrid - daysInCurrentMonth.value - firstDayOfCurrentMonth.value;
+};
+
+/**
+ * Validates a day to check if it's today or not
+ *
+ * @param {number} day The day to validate
+ * @return boolean True or false if it's today or not
+ */
+const isToday = (day: number) => {
+  let today = new Date();
+  if (
+    calendarStore.getYear == today.getFullYear() &&
+    calendarStore.getMonth == today.getMonth() &&
+    day == today.getDate()
+  )
+    return true;
+
+  return false;
+};
+
+/**
+ * Validates a day to check if event start date is current calendar date or not
+ *
+ * @param {number} day The calendar month date to check against
+ * @param {string} startdate The event start date
+ * @return boolean True or false if event is today or not
+ */
+const isEventToday = (day: number, startdate: string) => {
+  if (
+    calendarStore.getYear == parseInt(startdate.substring(0, 4)) &&
+    calendarStore.getMonth + 1 == parseInt(startdate.substring(5, 7)) &&
+    day == parseInt(startdate.substring(8, 10))
+  )
+    return true;
+
+  return false;
+};
+
+/**
+ * Gets at most, 3 calendar events on a given day
+ * This events are displayed on the calendar grid (>= Large screens)
+ *
+ * @param {number} day calendar month day whose event(s) we're getting
+ * @param {array} events Array of events objects to filter through
+ *
+ * @return array Array of the filtered day's event(s)
+ */
+const maxThreeTodaysEvent = (day: number, events: Event[]) => {
+  if (!events.length) return [];
+
+  let threeTodaysEventArr = [] as Event[];
+
+  events.forEach((event: Event) => {
+    if (threeTodaysEventArr.length == 3) return threeTodaysEventArr;
+
+    if (isEventToday(day, event.time.start)) {
+      threeTodaysEventArr.push(event);
+    }
+  });
+
+  return threeTodaysEventArr;
+};
+
+/**
+ * Gets all the calendar events on a given day
+ *
+ * @param {number} day calendar month day whose event(s) we're getting
+ * @param {array} events Array of events objects to filter through
+ *
+ * @return array Array of the filtered day's event(s)
+ */
+const allTodaysEvent = (day: number, events: Event[]) => {
+  if (!events.length) return [];
+
+  let todaysEvent = [] as Event[];
+  events.forEach((event) => {
+    if (isEventToday(day, event.time.start)) {
+      todaysEvent.push(event);
+    }
+  });
+
+  return todaysEvent;
+};
+
+/**
+ * Open the event details modal
+ *
+ * @param {number} day current calendar month day
+ * @param {array} events Array of events objects to show on the modal
+ *
+ * @return null
+ */
+const openModal = (day: number, events: Event[]) => {
+  popoverShow.value = false; // close any open popover before opening modal
+  modalEvents.value = events;
+  modalDay.value = day;
+  modalShow.value = true;
+};
+
+/**
+ * Close the event details modal
+ */
+const closeModal = () => {
+  modalEvents.value = [];
+  modalShow.value = false;
+  modalDay.value = 0;
+};
+
+/************************************************************************
+ *  LIFECYCLE HOOKS
+ * **********************************************************************
+ */
+onMounted(() => {
+  getDaysInMonth();
+  getFirstDayOfMonth();
+  lastCalendarCells();
+});
+
+onUpdated(() => {
+  getFirstDayOfMonth();
+  lastCalendarCells();
+});
+</script>
+
+<style scoped>
+.modal-enter-active,
+.modal-leave-active {
+  transition: translate 0.5s ease;
+}
+
+.modal-enter-from,
+.modal-leave-to {
+  /** opacity: 0; **/
+  translate: 0px 100%;
+}
+</style>
diff --git a/frontend/src/components/calendar/EventsModal.vue b/frontend/src/components/calendar/EventsModal.vue
new file mode 100644
index 0000000..021897f
--- /dev/null
+++ b/frontend/src/components/calendar/EventsModal.vue
@@ -0,0 +1,222 @@
+<template>
+  <div class="fixed inset-0 grid place-items-center z-50">
+    <div
+      class="modal-container bg-gray-100 w-4/5 h-4/6 lg:h-5/6 rounded-xl shadow-sm border overflow-y-hidden"
+    >
+      <div class="modal-header w-full h-[14%]">
+        <slot name="header">
+          <div
+            class="w-full flex justify-between items-center border-b-2 py-2 md:py-3"
+          >
+            <div class="w-2/3 pl-4">
+              <h4 class="text-xl lg:text-2xl text-left font-semibold">
+                {{ modalWeekDay + " " + modalDate.getDate() }}
+                <span class="font-medium text-sm lg:text-base">
+                  {{ modalShortMonth }}</span
+                >
+              </h4>
+            </div>
+            <div class="w-1/3 pr-3" align="right">
+              <div>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                  stroke="currentColor"
+                  class="w-6 h-6"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+        </slot>
+      </div>
+
+      <div class="modal-body h-[72%] overflow-y-scroll transition-none">
+        <slot name="body">
+          <div class="h-full w-full px-1 md:px-5">
+            <div class="w-full flex space-x-2 items-center">
+              <div>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                  stroke="currentColor"
+                  class="w-5 h-5 text-purple-600"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M15.59 14.37a6 6 0 01-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 006.16-12.12A14.98 14.98 0 009.631 8.41m5.96 5.96a14.926 14.926 0 01-5.841 2.58m-.119-8.54a6 6 0 00-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 00-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 01-2.448-2.448 14.9 14.9 0 01.06-.312m-2.24 2.39a4.493 4.493 0 00-1.757 4.306 4.493 4.493 0 004.306-1.758M16.5 9a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"
+                  />
+                </svg>
+              </div>
+              <div>
+                <h5 class="text-xs md:text-sm text-left">
+                  {{ events.length + " Total Events" }}
+                </h5>
+              </div>
+            </div>
+
+            <div class="w-full mt-5">
+              <div
+                v-for="event in events" :key="event.id"
+                @click="eventClick($event, event)"
+                class="w-full px-1 md:px-4 py-2 md:py-4 flex space-x-3 md:space-x-5 items-center cursor-pointer border lg:border-none rounded hover:shadow-md hover:bg-slate-300 transition-colors"
+              >
+                <div class="w-2/6 md:w-1/6">
+                  <h2 class="text-xl md:text-2xl font-medium">
+                    <span>{{
+                      formatTime(event.time.start).substring(0, 5)
+                    }}</span>
+                    <!-- <br class="md:hidden" /> -->
+                    <span class="text-xs uppercase">{{
+                      formatTime(event.time.start).slice(-2)
+                    }}</span>
+                  </h2>
+                </div>
+                <div
+                  class="w-4/6 md:w-5/6 border-l-4 border-purple-600 rounded overflow-x-hidden"
+                >
+                  <div class="w-full">
+                    <p
+                      class="tracking-tight text-clip text-left overflow-hidden text-sm md:text-base font-medium pl-2 whitespace-nowrap"
+                    >
+                      {{ event.title }}
+                    </p>
+                  </div>
+                  <div>
+                    <h5 class="text-left text-xs md:text-base pl-2 uppercase">
+                      {{ formatTime(event.time.start) }} -
+                      {{ formatTime(event.time.end) }}
+                    </h5>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </slot>
+      </div>
+
+      <div
+        class="modal-foooter w-full flex justify-center items-center h-[14%]"
+      >
+        <slot name="footer">
+          <div class="flex space-x-1 items-center">
+            <div>
+              <h3 class="text-sm md:text-base font-medium">close</h3>
+            </div>
+            <div
+              class="font-semibold hover:rotate-90 transition-all duration-700 cursor-pointer"
+              @click="$emit('closeModal')"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                class="w-6 h-6"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M6 18L18 6M6 6l12 12"
+                />
+              </svg>
+            </div>
+          </div>
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref, computed } from "vue";
+import { Event } from "@/types/calendar";
+
+/**************************************
+ * PROPS
+ * ************************************
+ */
+const props = defineProps({
+  day: {
+    type: Number,
+    required: true,
+  },
+  month: {
+    type: Number,
+    required: true,
+  },
+  year: {
+    type: Number,
+    required: true,
+  },
+  events: {
+    type: Array<Event>,
+    required: true,
+  },
+});
+
+/**************************************
+ * EMITS
+ * ************************************
+ */
+const emit = defineEmits(["togglePopover"]);
+const eventClick = (evt: any, event: Event) => {
+  emit("togglePopover", evt, event);
+};
+
+// Component state
+const modalDate = ref(new Date());
+const modalWeekDay = computed(() =>
+  new Intl.DateTimeFormat("en-US", { weekday: "long" }).format(modalDate.value)
+);
+const modalShortMonth = computed(() =>
+  new Intl.DateTimeFormat("en-US", { month: "short" }).format(modalDate.value)
+);
+
+/**
+ * Format date from year, month and day prop
+ */
+const getDisplayDate = () => {
+  modalDate.value = new Date(props.year, props.month, props.day);
+};
+
+// const getTodaysDate = computed(() =>
+//   new Intl.DateTimeFormat("en-US", {
+//     day: "numeric",
+//     month: "short",
+//     year: "numeric",
+//   }).format(new Date())
+// );
+
+/**
+ * Re-format given time string
+ * @param {string} timeStr The time string to reformat
+ *
+ * @return The formatted time string
+ */
+const formatTime = (timeStr: string) => {
+  let rearrangedTimeStr = timeStr.replace(" ", "T");
+
+  let constructedTime = new Date(rearrangedTimeStr + ":00");
+  return constructedTime.toLocaleTimeString();
+};
+
+/************************************************************************
+ *  LIFECYCLE HOOKS
+ * **********************************************************************
+ */
+onMounted(() => {
+  getDisplayDate();
+});
+</script>
diff --git a/frontend/src/components/calendar/Top.vue b/frontend/src/components/calendar/Top.vue
new file mode 100644
index 0000000..c918ac7
--- /dev/null
+++ b/frontend/src/components/calendar/Top.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="col-span-7">
+    <div class="w-full flex justify-between items-center">
+      <!-- Current month and year -->
+      <div class="w-1/3 p-2 md:p-4">
+        <div
+          class="w-full inline-flex space-x-1 text-sm md:text-xl lg:text-2xl text-left font-bold md:font-semibold"
+        >
+          <span class="md:hidden">{{ calendarStore.monthStr.substring(0, 3) }}</span>
+          <span class="hidden md:block">{{ calendarStore.monthStr }}</span>
+          <span>{{ calendarStore.getYear }}</span>
+        </div>
+      </div>
+      <!-- -------------------------- -->
+
+      <!-- Naviigation -->
+      <div
+        class="hidden md:flex w-1/3 items-center justify-center text-gray-600"
+      >
+        <div class="flex space-x-3 items-center">
+          <div>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+              class="w-5 h-5 hover:text-gray-800 cursor-pointer hover:h-6 hover:w-6 transition-all"
+              @click="calendarStore.decrementMonth(1)"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M18.75 19.5l-7.5-7.5 7.5-7.5m-6 15L5.25 12l7.5-7.5"
+              />
+            </svg>
+            <!-- <v-icon class="w-5 h-5 hover:text-gray-800 cursor-pointer hover:h-6 hover:w-6 transition-all">mdi-arrow-left</v-icon> -->
+          </div>
+          <div>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+              class="w-5 h-5 hover:text-gray-800 cursor-pointer hover:h-6 hover:w-6 transition-all"
+              @click="calendarStore.incrementMonth(1)"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+      <!-- ----------------------------- -->
+
+      <!-- Date picker and date view -->
+      <div class="w-2/3 md:w-1/3 flex justify-end pr-2 md:pr-4">
+        <div class="flex space-x-2 md:space-x-5">
+          <div
+            class="flex justify-center items-center border rounded-sm px-2 md:px-5 py-1 md:py-2 cursor-pointer hover:bg-gray-200 transition-colors"
+            @click="calendarStore.resetDate()"
+          >
+            <h1 class="text-xs md:text-base font-medium md:font-semibold">
+              Today
+            </h1>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from "vue";
+import { useCalendarStore } from "@/store/calendar";
+
+// Store initialization and subscription
+const calendarStore = useCalendarStore();
+
+// Component variables
+const monthStr = ref("");
+const shortMonthStr = ref("");
+
+/**
+ * Populate the month variable with month data from store
+ */
+function prepareMonths() {
+  monthStr.value = new Intl.DateTimeFormat("en-US", { month: "long" }).format(
+    new Date(
+      calendarStore.getYear,
+      calendarStore.getMonth,
+      calendarStore.getDay
+    )
+  );
+  shortMonthStr.value = monthStr.value.substring(0, 3);
+}
+
+onMounted(() => {
+  prepareMonths();
+});
+</script>
diff --git a/frontend/src/store/calendar.ts b/frontend/src/store/calendar.ts
new file mode 100644
index 0000000..756cf43
--- /dev/null
+++ b/frontend/src/store/calendar.ts
@@ -0,0 +1,71 @@
+import { defineStore } from "pinia";
+import { computed, ref } from "vue";
+
+export const useCalendarStore = defineStore("calendar", () => {
+  const year = ref(new Date().getFullYear());
+  const month = ref(new Date().getMonth());
+  const day = ref(new Date().getDate());
+
+  const getYear = computed(() => year.value);
+  const getMonth = computed(() => month.value);
+  const getDay = computed(() => day.value);
+
+  const monthStr = computed(() => new Intl.DateTimeFormat("en-US", { month: "long" }).format(
+    new Date(year.value, month.value, day.value)
+  ))
+
+  function incrementYear(val: number) {
+    year.value = year.value + val;
+  }
+  function decrementYear(val: number) {
+    year.value = year.value - val;
+  }
+  function incrementMonth(val: number) {
+    if (month.value == 11) {
+      incrementYear(1);
+      month.value = 0;
+      return;
+    }
+
+    month.value = month.value + val;
+  }
+  function decrementMonth(val: number) {
+    if (month.value == 0) {
+      decrementYear(1);
+      month.value = 11;
+      return;
+    }
+
+    month.value = month.value - val;
+  }
+
+  function setMonth(val: number) {
+    month.value = val;
+  }
+
+  function setYear(val: number) {
+    year.value = val;
+  }
+
+  function resetDate() {
+    year.value = new Date().getFullYear();
+    month.value = new Date().getMonth();
+    day.value = new Date().getDate();
+  }
+
+  return {
+    year,
+    month,
+    day,
+    getYear,
+    getMonth,
+    getDay,
+    monthStr,
+    incrementYear,
+    incrementMonth,
+    decrementMonth,
+    setMonth,
+    setYear,
+    resetDate,
+  };
+});