[Vue-Cal] Vue.js 캘린더 라이브러리

https://antoniandre.github.io/vue-cal/#installation

설치

$ npm i vue-cal

사용

// scss/app.scss
@import 'vue-cal/dist/vuecal.css'

<script setup lang="ts">
import VueCal from 'vue-cal'

</script>

<template>
      <VueCal
        :disable-views="['years', 'year', 'month', 'week']"
        :split-days="splitDays"
        :events="events"
        :time-step="30"
        :time-from="9 * 60"
        :time-to="19 * 60"
        hideViewSelector
        hideTitleBar
        sticky-split-labels
        :locale="{ noEvent: '' }"
      >
        <!-- editableEvents -->
        <template #split-label="{ split }">
          <strong>{{ split.label }}</strong>
        </template>
        <template #event="{ event }">
          <div class="vuecal__event-title" v-html="event.title" />
          <!-- <div
            class="vuecal__event-title vuecal__event-title--edit"
            contenteditable
            v-html="event.title"
          /> -->
        </template>
      </VueCal>
</template>

<style scoped lang="scss">
::v-deep(.vuecal) {
  border-radius: 20px;
  background-color: #fff;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.14);
  overflow: hidden;

  .vuecal__header,
  .vuecal__split-days-headers {
    height: 5rem;
    color: #fff;
    background-color: #6c54ab;
    font-size: 1rem;
    font-weight: 700;
  }
  .vuecal__time-cell-label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #303030;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
  }
  .vuecal__bg::-webkit-scrollbar {
    display: none;
  }
  .vuecal__cell-split:not(:last-child) {
    border-right: 1px solid #f0f0f0;
  }
  .vuecal__no-event {
    height: 100%;
    background-color: rgba(217, 217, 217, 0.5);
  }
  .vuecal__event {
    color: #fff;
    border-radius: 50px;
    // background: #ff6928;
    // background: #9a92ff;
    // background: #487bff;
    background: #a0a0a0;
    line-height: 40px;
    text-align: center;
    font-size: 0.92857rem;
    font-weight: 700;
  }
  .vuecal__now-line {
    color: #a482ff;
    opacity: 1;
    border-top: 2.5px solid currentColor;
    // font-weight: 700;
  }
}
</style>

• 연간/월간/주간 탭 숨기기해당 배열에 각각의 탭 이름 넣어주기

:disable-views="['years', 'year', 'month', 'week']"

• 시간 간격 설정하기

:time-step="30" // 시간 간격 (30분 간격)
:time-from="9 * 60" (9시 부터)
:time-to="19 * 60" (19시 까지)

• 출력 날짜 설정하기

selected-date="2018-11-19"

• 날짜를 여러 개의 컬럼으로 쪼개기

:split-days="splitDays"
sticky-split-labels

 

sticky-split-labels 옵션을 주면 컬럼이 최상단에 sticky 됩니다.
해당 splitDays는 아래와 같은 배열로 작성합니다.

const splitDays = [
  // The id property is added automatically if none (starting from 1), but you can set a custom one.
  // If you need to toggle the splits, you must set the id explicitly.
  { id: 1, label: "Dr.정구환" },
  { id: 2, label: "Dr.정구환" },
  { id: 3, label: "Dr.정구환" },
  { id: 4, label: "Dr.정구환" },
  { id: 5, label: "Dr.정구환" },
];

const events = [
  {
    start: "2023-07-03 14:00",
    end: "2023-07-03 14:30",
    title: "예약: 1건 / 접수: 3건",
    class: "leisure",
    split: 1,
  },
  {
    start: "2023-07-03 10:00",
    end: "2023-07-03 10:30",
    title: "예약: 1건 / 접수: 3건",
    class: "sport",
    split: 5,
  },
  {
    start: "2023-07-03 10:00",
    end: "2023-07-03 10:30",
    title: "예약: 1건 / 접수: 3건",
    class: "sport",
    split: 3,
  },
  {
    start: "2023-07-03 10:00",
    end: "2023-07-03 10:30",
    title: "예약: 1건 / 접수: 3건",
    class: "sport",
    split: 2,
  },
];

split에 몇 번째 split에 적용할지 1, 2, 3.. 등의 숫자를 넣어줍니다

• 상단 탭/바 숨기기

hideViewSelector
hideTitleBar

• 커스텀 이벤트
  (기본)

        <template #event="{ event }">
          <div class="vuecal__event-title" v-html="event.title" />
        </template>

• (수정 가능)

        <template #event="{ event }">
          <div
            class="vuecal__event-title vuecal__event-title--edit"
            contenteditable
            v-html="event.title"
          />
        </template>

• 이벤트를 드래그 앤 드롭으로 수정하려면 VueCal 컴포넌트에 editableEvents 옵션을 추가합니다.

<VueCal editableEvents />

더 많은 옵션은 vue-cal docs를 확인하세요!