万普插件库

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

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

安装

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

使用插件

<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

ok，就介绍到这里。感兴趣的可以去看下哈，欢迎一起交流讨论！