相关文章推荐
果断的面包  ·  Sample Reporting ...·  9 月前    · 
礼貌的稀饭  ·  electron-updater的check ...·  1 年前    · 
打盹的水煮肉  ·  Python matplotlib ...·  1 年前    · 
精彩文章免费看

vue-full-calendar的使用

一、下载

npm install vue-fullcalendar
<template>
    <full-calendar
      :config="config"
      :events="events"
    ></full-calendar>
</template>
<script>
import { FullCalendar } from 'vue-full-calendar'
import "fullcalendar/dist/fullcalendar.css";
export default {
  components: { FullCalendar },
  data() {
      return {
        events: [{
          title: '事件内容',  // 事件内容
          start: '2019-05-20 09:00:00', // 事件开始时间
          end: '2019-05-21 12:00:00',   // 事件结束时间
          color: 'rgba(9, 9, 9, 0.2)'       // 事件的显示颜色
        config: {
          buttonText: { today: "今天", month: "月", week: "周", day: "日" },
          locale: "zh-cn",
          editable: false, //是否允许修改事件
          selectable: false,
          eventLimit: 4, //事件个数
          allDaySlot: false, //是否显示allDay
          defaultView: "month", //显示默认视图
          eventClick: this.eventClick, //点击事件
          dayClick: this.dayClick, //点击日程表上面某一天
  methods: {
     // 点击事件
     eventClick (event, jsEvent, pos) {
       console.log('eventClick', event, jsEvent, pos)
     // 点击当天
     dayClick (day, jsEvent) {
        console.log('dayClick', day, jsEvent)
</script>

其他的事件添加方式和eventClick一样,具体有哪些的可以参考

http://keenwon.com/143.html
或者https://blog.csdn.net/supingemail/article/details/48371927