VUE3 開発の基本: Vue.js プラグインを使用してカレンダー スケジュール コンポーネントをカプセル化する

vue create vue-calendar-scheduler-plugin

vue add plugin my-calendar-scheduler

npm install dayjs --save

import { createApp, provide, h, reactive, onMounted } from 'vue';
import dayjs from 'dayjs'

const CalendarScheduler = {
  name: 'Calendar',
  setup() {
    const schedule = reactive({
      title: '',
      startDate: '',
      endDate: '',
      startTime: '',
      endTime: '',
      description: ''
    });

    const handleAddSchedule = () => {
      // 添加日程逻辑
    }

    const handleDeleteSchedule = () => {
      // 删除日程逻辑
    }

    const handleUpdateSchedule = () => {
      // 更新日程逻辑
    }


    return {
      schedule,
      handleAddSchedule,
      handleDeleteSchedule,
      handleUpdateSchedule
    };
  }
};

<template>
  <div class="calendar-scheduler">
    <div class="calendar-header">
      <span class="calendar-prev-month" @click="changeMonth(-1)"> &lt;&lt; </span>

      <span class="calendar-cur-month-year">{{ month }} {{ year }}</span>
      <span class="calendar-next-month" @click="changeMonth(1)"> &gt;&gt; </span>
    </div>

    <div class="calendar-body">
      <table>
        <thead>
          <tr>
            <th>日</th>
            <th>一</th>
            <th>二</th>
            <th>三</th>
            <th>四</th>
            <th>五</th>
            <th>六</th>
          </tr>
        </thead>

        <tbody>
          <tr v-for="week in data" :key="week">
            <td v-for="day in week" :key="day" :class="dayClass(day)">
              <span class="day-number" @click="handleDayClick(day)">{{ day }}</span>

              <ul class="schedule-list">
                <li v-for="(item, index) in scheduleList(day)" :key="item.title + index ">{{ item.title }}</li>
              </ul>

              <div class="add-schedule-button" @click="handleAddSchedule(day)">{{ addScheduleButtonLabel }}</div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

  const dayjsMixin = {
    computed: {
      month() {
        return dayjs(`${this.year}-${this.monthNumber}-01`).format('MMMM');
      },

      daysInMonth() {
        return dayjs(`${this.year}-${this.monthNumber}-01`).daysInMonth();
      },

      monthNumber() {
        return dayjs(`${this.year}-${this.monthNumber}-01`).month() + 1;
      },

      firstDayOfWeek() {
        return dayjs(`${this.year}-${this.monthNumber}-01`).startOf('month').day();
      },
    }
  };

export default {
  install: (app) => {
    app.mixin(dayjsMixin);

    app.component('CalendarScheduler', defineComponent(CalendarScheduler));

    provide(CalendarScheduler.name, {
      title: '',
      startDate: '',
      endDate: '',
      startTime: '',
      endTime: '',
      description: ''
    });
  }
};