tui.calendar基础使用

vue2 中 使用tui.calendar 记录

GIT地址

https://github.com/nhn/tui.calendar

国内：https://gitcode.com/aifengaopeng/tui.calendar.git

基本使用

1. 使用npm 安装

npm install @toast-ui/vue-calendar # latest version
npm install @toast-ui/vue-calendar@<version> # specific version

2. vue中引入使用

 <template>
      <Calendar
        style="height: 600px"
        :view="view"
        :use-detail-popup="true"
        :month="month"
        :calendars="calendars"
        :events="events"
        :usage-statistics="false"
      />
    </template>
    
    <script>
    import Calendar from '@toast-ui/vue-calendar'
    import '@toast-ui/calendar/dist/toastui-calendar.min.css'
    
    export default {
      components: {
        Calendar
      },
      data() {
        return {
          view: 'month', // 展示的视图类型为月视图（month | week| day）
          month: {
            // 月视图顶部的名称
            dayNames: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
            // 在月视图中展示的周列数，一列是一周
            visibleWeeksCount: 3
          },
          // 可以设置多个类型，然后不同的事件可以展示成不同样样式
          calendars: [{ id: 'cal1', name: 'Personal' }],
          // 事件列表
          events: [
            {
              id: '1',  //事件id 不重复
              calendarId: 'cal1', // 对应id
              title: 'Lunch', //事件标题
              category: 'time', // 事件类型（milestone|task|allday|time）
              start: '2024-11-21T12:00:00', // 事件开始时间
              end: '2024-11-21T13:30:00' // 事件结束时间
            },
            {
              id: '2',
              calendarId: 'cal1',
              title: 'Coffee Break',
              category: 'task',
              start: '2024-11-25',
              end: '2024-11-27'
            }
          ]
        }
      }
    }
    </script>

    // 作为组件使用
    import Calendar from '@toast-ui/vue-calendar';
    import '@toast-ui/calendar/dist/toastui-calendar.min.css';
    
    new Vue({
      el: '#app',
      components: {
        Calendar,
      },
    });

---

以上为最基本的使用，后续更新目前使用情况，踩坑中