[projects overview], changes

app/src/plugins/tm@dashboard/projects/_components/a-project-calendar.vue

@@ -0,0 +1,68 @@
+<template>
+  <div id="calendar" class="mb-12">
+    <FullCalendar ref="fullCalendar" :options="calendarOptions" />
+  </div>
+</template>
+<script>
+import FullCalendar from '@fullcalendar/vue3'
+import dayGridPlugin from '@fullcalendar/daygrid'
+
+export default {
+  components: {
+    FullCalendar
+  },
+  props: ['events', 'month'],
+  computed: {
+    calendarOptions() {
+      return {
+        plugins: [ dayGridPlugin ],
+        initialView: 'dayGridMonth',
+        headerToolbar: false,
+        locale: 'sk',
+        height: 650,
+        firstDay: 1,
+        dayHeaderClassNames: ['w-day-header'],
+        events: this.events
+      }
+    }
+  },
+  watch: {
+    month(selectedMonth) {
+      const currentYear = (new Date()).getFullYear()
+      this.$refs.fullCalendar?.getApi().gotoDate(new Date(currentYear, selectedMonth, 1))
+    }
+  },
+  mounted() {
+    const currentYear = (new Date()).getFullYear()
+    this.calendarOptions.events = this.events
+    this.$refs.fullCalendar?.getApi().gotoDate(new Date(currentYear, this.month, 1))
+  }
+}
+</script>
+<style lang="sass" scoped>
+#calendar
+  &:deep(.w-day-header)
+    text-align: left
+    padding-left: 10px
+  &:deep(.fc-daygrid-day-number)
+    color: black
+  &:deep(.fc-col-header-cell-cushion)
+    font-size: 20px
+    font-weight: 500
+    line-height: 45px
+    text-transform: capitalize
+    color: black
+  &:deep(.fc-theme-standard .fc-scrollgrid)
+    border: none
+  &:deep(.fc-event-start)
+    border-top-left-radius: 30px
+    border-bottom-left-radius: 30px
+  &:deep(.fc-event-end)
+    border-top-right-radius: 30px
+    border-bottom-right-radius: 30px
+  &:deep(.fc-event-title)
+    font-size: 12px
+    padding-left: 10px
+  &:deep(.fc-event)
+    margin-top: 5px
+</style>