tui.calendar使用

tui.calendar支持js版本 vue2版本 react版本   vue3使用js版本

yarn add @toast-ui/calendar // 安装js版本

vue文件中引入
import Calendar from '@toast-ui/calendar'
import '@toast-ui/calendar/dist/toastui-calendar.min.css'

使用方法

<template>
  <div id="calendarRef"  style="height: 100%"></div>
</template>
<script setup>
import Calendar from '@toast-ui/calendar'
import '@toast-ui/calendar/dist/toastui-calendar.min.css'
import { onMounted } from 'vue'
import dayjs from 'dayjs'

let calendar = null
let canlendarList = [{ // 测试数据
    id: 0,
    start: '2024-02-22 09:20',
    end: '2024-02-22 10:20'
}]

function init() {
  const options = { // 配置项
    defaultView: 'week',
    isReadOnly: true,
    week: {
      startDayOfWeek: 1,
      taskView: false,
      showNowIndicator: false,
      workweek: false,
      hourStart: 5,
      eventView: ['time'],
      dayNames: ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
    },
    template: {
      time(title) { // 模板显示内容
        return `${dayjs(title.start).format('HH:mm')} -         
                ${dayjs(title.end).format('HH:mm')}`
      },
      timegridDisplayPrimaryTime({ time }) { //左边时间显示内容
        return `${dayjs(time).format('HH:mm')}`
      }
    }
  }
  calendar = new Calendar('#calendarRef', options) //实例
}

function createdCalendar() {// 创建数据
  canlendarList.map((m) => {
    calendar.createEvents([ // 这里看官网文档
      {
        id: m.id,
        calendarId: m.id,
        start: dayjs(m.start).format('YYYY-MM-DD HH:mm:ss'),
        end: dayjs(m.end).format('YYYY-MM-DD HH:mm:ss'),
        color: '#3c056d',
        backgroundColor: '#3c056d',
        borderColor: '#B92E47',
        dragBackgroundColor: '#B92E47',
        ...m
      }
    ])
  })
}

onMounted(async () => {
    init()
    createdCalendar()
})
</script>

官方文档属性配置项

官方文档地址: tui.calendar/docs/en/apis/template.md 在 main ·nhn/tui.calendar ·GitHub上https://github.com/nhn/tui.calendar/blob/main/docs/en/apis/template.md#timegriddisplayprimarytime