vue3使用fullcalendar日历插件

星河顾盼

于 2024-08-07 13:17:58 发布

阅读量704

点赞数 3

分类专栏： vue JS 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/gusensen/article/details/140987709

版权

JS 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

vue

2 篇文章 1 订阅

订阅专栏

fullcalendar介绍

fullcalendar是一个JavaScript日历组件，支持React\Vue等第三方插件

fullcalendar安装

vue3的安装

npm install --save \
  @fullcalendar/core \
  @fullcalendar/vue3

补充：vue的安装

npm install --save \
  @fullcalendar/core \
  @fullcalendar/vue2

常用安装插件

//日期网格
@fullcalendar/daygrid
//时间网格
@fullcalendar/timegrid

fullcalendar使用教程

基本使用

<template>
  <div ref="calendar"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Calendar } from '@fullcalendar/core'
import timeGridPlugin from '@fullcalendar/timegrid'

const calendarEl = ref(null)

onMounted(() => {
  const calendar = new Calendar(calendarEl.value, {
    plugins: [timeGridPlugin],
    initialView: 'timeGridWeek',
    headerToolbar: {
      left: 'prev,next',
      center: 'title',
      right: 'timeGridWeek,timeGridDay'
    }
  })
  calendar.render()
})
</script>

<style scoped>
/* 你可以在这里添加你的样式 */
</style>

fullcalendar常用API&方法

eventClick点击事件
datesSet切换日期触发事件
events渲染数据
locale中文/英文

示例代码

包含：

点击编辑当前事件
切换日、周、月触发事件

<template>
    <div>
        <FullCalendar :options="calendarOptions" />
        <el-dialog v-model="dialogVisible" title="编辑事件" width="30%" @close="resetForm">
            <el-form :model="form">
                <el-form-item label="标题">
                    <el-input v-model="form.title" disabled></el-input>
                </el-form-item>
                <el-form-item label="开始时间">
                    <el-date-picker v-model="form.start" type="datetime" placeholder="选择开始时间"
                        format="YYYY-MM-DDTHH:mm:ss"></el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间">
                    <el-date-picker v-model="form.end" type="datetime" placeholder="选择结束时间"
                        format="YYYY-MM-DDTHH:mm:ss"></el-date-picker>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="updateEvent">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import FullCalendar from '@fullcalendar/vue3'
import timeGridPlugin from '@fullcalendar/timegrid'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
import zhLocale from '@fullcalendar/core/locales/zh-cn'
import { ElMessage } from 'element-plus'
// import { useLocale, zhCn } from 'element-plus/es'

const calendarOptions = ref({
    plugins: [timeGridPlugin, dayGridPlugin, interactionPlugin],
    initialView: 'timeGridWeek',
    dragScroll: true,
    headerToolbar: {
        left: 'prev,next',
        center: 'title',
        right: 'timeGridDay,timeGridWeek,dayGridMonth'
    },
    locale: zhLocale,
    editable: true,
    droppable: true,
    events: generateEvents(),
    datesSet: handleDatesSet,
    eventClick: handleEventClick,
})

const dialogVisible = ref(false)
const form = reactive({
    id: '',
    title: '',
    start: '',
    end: ''
})

// useLocale(zhCn)

function handleDateClick(arg: any) {
    console.log(arg, '-----arg')
}

function handleEventClick(arg: any) {
    console.log(arg, '-----arg')
    form.id = arg.event.id
    form.title = arg.event.title
    form.start = arg.event.startStr
    form.end = arg.event.endStr
    dialogVisible.value = true
}

function handleDatesSet(info: any) {
    const type = info.view.type
    const start = info.start
    const end = info.end
    fetchData(type, start, end)
}

function fetchData(type: string, start: Date, end: Date) {
    const data = {
        type,
        timeRange: { start, end }
    }
    console.log(data)
    // 在这里调用接口并传递数据
    // 例如：axios.post('/api/data', data).then(response => { ... })
}

function generateEvents() {
    const events = [
        { id: '1', title: '事件 1', start: '2024-08-05T14:30:00', end: '2024-08-05T15:30:00', color: 'blue' },
        { id: '2', title: '事件 1', start: '2024-08-05T15:00:00', end: '2024-08-05T16:30:00', color: 'red' },
        { id: '3', title: '事件 3', start: '2024-08-06T14:30:00', end: '2024-08-06T15:30:00', color: '#000' },
        { id: '4', title: '事件 4', start: '2024-08-06T15:00:00', end: '2024-08-06T16:30:00', color: '#333' },
        { id: '5', title: '事件 5', start: '2024-08-06T15:30:00', end: '2024-08-06T17:00:00', color: '#666' },
        { id: '6', title: '事件 6', start: '2024-08-06T16:00:00', end: '2024-08-06T17:30:00', color: '#999' },
        { id: '7', title: '事件 7', start: '2024-08-06T16:30:00', end: '2024-08-06T18:00:00', color: '#ccc' },
        { id: '8', title: '事件 8', start: '2024-08-06T17:00:00', end: '2024-08-06T18:30:00', color: '#ff0000' },
        { id: '9', title: '事件 9', start: '2024-08-06T17:30:00', end: '2024-08-06T19:00:00', color: '#00ff00' },
        { id: '10', title: '事件 10', start: '2024-08-06T18:00:00', end: '2024-08-06T19:30:00', color: '#0000ff' },
        { id: '11', title: '事件 11', start: '2024-08-06T18:30:00', end: '2024-08-06T20:00:00', color: '#ffff00' },
        { id: '12', title: '事件 12', start: '2024-08-06T19:00:00', end: '2024-08-06T20:30:00', color: '#00ffff' },
        { id: '13', title: '事件 13', start: '2024-08-06T19:30:00', end: '2024-08-06T21:00:00', color: '#000' },
        { id: '14', title: '事件 14', start: '2024-08-06T20:00:00', end: '2024-08-06T21:30:00', color: '#333' },
        { id: '15', title: '事件 15', start: '2024-08-06T20:30:00', end: '2024-08-06T22:00:00', color: '#666' },
        { id: '16', title: '事件 16', start: '2024-08-06T21:00:00', end: '2024-08-06T22:30:00', color: '#999' },
        { id: '17', title: '事件 17', start: '2024-08-06T21:30:00', end: '2024-08-06T23:00:00', color: '#ccc' },
        { id: '18', title: '事件 18', start: '2024-08-06T22:00:00', end: '2024-08-06T23:30:00', color: '#ff0000' },
        { id: '19', title: '事件 19', start: '2024-08-06T22:30:00', end: '2024-08-07T00:00:00', color: '#00ff00' },
        { id: '20', title: '事件 20', start: '2024-08-06T23:00:00', end: '2024-08-07T00:30:00', color: '#0000ff' },
        { id: '21', title: '事件 21', start: '2024-08-06T23:30:00', end: '2024-08-07T01:00:00', color: '#ffff00' },
        { id: '22', title: '事件 22', start: '2024-08-07T00:00:00', end: '2024-08-07T01:30:00', color: '#00ffff' },
        { id: '23', title: '事件 23', start: '2024-08-07T00:30:00', end: '2024-08-07T02:00:00', color: '#000' }
    ]

    return events
}

function updateEvent() {
    const event = calendarOptions.value.events.find((e: any) => e.id === form.id)
    if (event) {
        event.start = form.start
        event.end = form.end
        ElMessage({
            message: '事件已更新',
            type: 'success'
        })
        dialogVisible.value = false
    }
}

function resetForm() {
    form.id = ''
    form.title = ''
    form.start = ''
    form.end = ''
}
</script>

<style scoped lang="scss">
/* 你的样式可以在这里编写 */
</style>