基于 Vue 日历日程组件FullCalendar-Vue

Vedu • 2020-09-02 17:15 • 资源分享 • 阅读 9226

fullcalendar 一款 star高达12.6K 基于jQuery实现的管理日程安排、工作计划的日历工具。今天给大家分享如何在Vue框架下使用FullCalendar。

fullcalendar-vue 基于FullCalendar.js的Vue版本实现。支持增删改查及拖拽式管理日程安排。

安装

$ npm i @fullcalendar/vue @fullcalendar/daygrid -S

使用插件

<template>
  <FullCalendar :options="calendarOptions" />
template>
<script>
import FullCalendar from \'@fullcalendar/vue\'
import dayGridPlugin from \'@fullcalendar/daygrid\'
import interactionPlugin from \'@fullcalendar/interaction\'
export default {
  components: {
    FullCalendar
  },
  data() {
    return {
      calendarOptions: {
        plugins: [ dayGridPlugin, interactionPlugin ],
        headerToolbar: {
          left: \'prev,next today\'
          center: \'title\',
          right: \'dayGridMonth,timeGridWeek,timeGridDay\'
        },
        initialView: \'dayGridMonth\',
        editable: true,
        selectable: true,
        dateClick: this.handleDateClick,
        events: [
          { title: \'开学安排\', date: \'2020-09-01\' },
          { title: \'课表排班\', date: \'2020-09-02\' }
        ],
        eventClick: this.handleEventClick,
      }
    }
  },
  methods: {
    handleDateClick(arg) {
      alert(\'date click! \'   arg.dateStr)
    },
    handleEventClick(info) {
      alert(\'Event：\'   info.event.title)
      info.el.style.borderColor = \'red\'
      info.evnet.remove()
    }
  }
}
script>

Fullcalendar官网还提供了在React和Angular框架下使用方法。

react版本

https://fullcalendar.io/docs/react
https://github.com/fullcalendar/fullcalendar-react

angular版本

https://fullcalendar.io/docs/angular
https://github.com/fullcalendar/fullcalendar-angular

# fullcalendar文档
https://fullcalendar.io/
https://www.helloweba.net/search.html?keys=fullcalendar
# 项目地址
https://github.com/fullcalendar/fullcalendar

最后附上fullcalendar的vue版本项目地址

# 文档地址
https://fullcalendar.io/docs/vue
# 仓库地址
https://github.com/fullcalendar/fullcalendar-vue

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/share/10755.html

基于 Vue 日历日程组件FullCalendar-Vue

相关推荐

发表评论