hrms-user/src/modules/05_leave/componenst/Calendar.vue

<template>
  <div class="q-mt-sm">
    <div class="row q-gutter-sm q-pb-sm main-content">
        <div class="demo-app-main">
          <FullCalendar
            ref="fullCalendar"
            class="demo-app-calendar"
            :options="calendarOptions"
          >
            <template v-slot:eventContent="arg">
              <b>{{ arg.timeText }}</b>
              <i>{{ arg.event.title }}</i>
            </template>
          </FullCalendar>
        </div>
      </div>
      <div class="row q-col-gutter-lg justify-end">
        <div class="items-center row">
          <q-icon size="10px" color="light-green" name="mdi-circle" class="q-mr-sm" />
          <span class="text-caption text-grey-8">สถานะอนุมัติ</span>
        </div>
        <div class="items-center row">
          <q-icon size="10px" color="red-6" name="mdi-circle" class="q-mr-sm" />
          <span class="text-caption text-grey-8">สถานะไม่อนุมัติ</span>
        </div>
        <div class="items-center row">
          <q-icon size="10px" color="light-blue-14" name="mdi-circle" class="q-mr-sm" />
          <span class="text-caption text-grey-8">สถานะอยู่ระหว่างดำเนินการ</span>
        </div>
        <div class="items-center row">
          <q-icon size="10px" color="orange" name="mdi-circle" class="q-mr-sm" />
          <span class="text-caption text-grey-8">สถานะใหม่</span>
        </div>
      </div>
    </div>  

</template>
<script lang="ts">
import { ref } from "vue";
import FullCalendar from "@fullcalendar/vue3";
import dayGridPlugin from "@fullcalendar/daygrid";

import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
import allLocales from "@fullcalendar/core/locales-all";
import listPlugin from "@fullcalendar/list";

// import interactionPlugin from "@fullcalendar/interaction";
export default {
  components: {
    FullCalendar, // make the <FullCalendar> tag available
    calendar() {
      return (
        this.$refs.fullCalendar as InstanceType<typeof FullCalendar>
      ).getApi();
    },
  },
  setup() {
    const name = ref<string>("");
    const date = ref<Date>(new Date());
    const fullCalendar = ref<InstanceType<typeof FullCalendar>>();  
    const calendarOptions = ref({
      plugins: [
        dayGridPlugin,
        timeGridPlugin,
        interactionPlugin, // needed for dateClick
        listPlugin,
      ],
      buttonText: {
        listYear: "รายการ",
        dayGridMonth: "ปฏิทิน",
        test: "เพิ่มวันหยุด",
      },
      headerToolbar: null,
      initialView: "dayGridMonth",
      initialEvents: [], // alternatively, use the `events` setting to fetch from a feed
      selectable: true,
      dayMaxEvents: true,
      weekends: true,
      locale: "th",
      locales: allLocales,
      expandRows: true,
      nowIndicator: true,
      height: "100%",
      eventColor: "#e4f3ff",
      eventTextColor: "#4A5568",
      eventBorderColor: "#50a5fc",
      displayEventTime: false,
      editable: true,
      events: []
    });
    calendarOptions.value.events = [
      { groupId: "2", title: "ลากิจส่วนตัว", start: "2023-09-10", allDay: true, color: '#E3FDDA' },
      { groupId: "1", title: "ลาป่วย", start: "2023-09-19", allDay: true, color: '#e4f3ff' },
      { groupId: "1", title: "ลาป่วย", start: "2023-09-20", allDay: true, color: '#FFF1CC' },
    ];
    return {
      calendarOptions,
      name,
      date
    };
  },
};
</script>

<style scope lang="scss">
.main-content {
  height: 65vh;
}

.color-main {
  color: #18a259;
}

.padding-content {
  padding: 10px;
}

.demo-app-main {
  flex-grow: 1;
  /* padding: 3em; */
}

.fc {
  /* the calendar root */
  max-width: 1100px;
  margin: 0 auto;
  background-color: white;
  border-radius: 10px;
}

.fc-day-today {
  background-color: #F8F8F8 !important;
}

.fc-day-today .fc-daygrid-day-number {
  display: flex;
  justify-content: center;
  align-items: center;
  /* border: 2px solid #17a259; */
  /* border-radius: 50%;
  height: 25px;
  width: 25px;
  font-weight: bold;
  color: white !important;
  background: #17a259; */
}

.fc-day-today .fc-daygrid-day-frame {
  padding: 5%;
}

.fc .fc-button-group > .fc-button {
  color: black;
  background-color: #fafafa;
  border: none;
}

.fc .fc-button-group > .fc-button:active {
  color: white;
  background-color: #22a15e;
  border: none;
}

.fc .fc-button-group > .fc-button.fc-button-active {
  color: white;
  background-color: #22a15e;
  border: none;
}

.fc-header-toolbar {
  background-color: white;
  padding: 0px 10px 0px 10px;
  border-radius: 10px 10px 0px 0px;
}

.fc .fc-scrollgrid-liquid > thead {
  background-color: white;
}

.dp-custom-cell {
  border-radius: 50%;
}

.dp__today {
  border: 1px solid var(--q-primary);
}

.dp__range_end,
.dp__range_start,
.dp__active_date {
  background: var(--q-primary);
  color: var(--dp-primary-text-color);
}

.datepicker .q-field__label {
  padding-left: 5px;
}

.datepicker .q-field__messages {
  padding-left: 20px;
}

.datepicker .q-field__native {
  padding-left: 5px;
  color: var(--q-primary) !important;
}

.datepicker .q-field__prepend {
  padding-left: 6px;
}

.datepicker .q-field__append {
  padding-right: 6px;
}

.datepicker .q-field__after {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-weight: 500;
}

.fc .fc-popover {
  z-index: 6000;
}

.fc-direction-ltr .fc-daygrid-event.fc-event-end,
.fc-direction-rtl .fc-daygrid-event.fc-event-start {
  cursor: pointer;
}

.subName {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-weight: 500;
}

.subInput {
  display: flex;
  align-items: center;
}

.fc-event {
  overflow: hidden;
  border-color: transparent !important;
  font-weight: 500;
}

.fc-event-main {
  text-align: left;
  padding:0px 5px;
}

.fc-direction-ltr .fc-daygrid-event.fc-event-end,
.fc-direction-rtl .fc-daygrid-event.fc-event-start {
  padding-left: 0px;
}

.fc-theme-standard td, .fc-theme-standard th{
  border: 1px solid #EBE9F1;
}
</style>