vue-fullcalendar 日历插件

最新推荐文章于 2024-08-15 09:53:53 发布

cesium vue

最新推荐文章于 2024-08-15 09:53:53 发布

阅读量755

点赞数 1

分类专栏： vue 文章标签： fullcalendar vue日历

本文链接：https://blog.csdn.net/qq_29384639/article/details/120313905

版权

vue 专栏收录该内容

43 篇文章 2 订阅

订阅专栏

该博客介绍了如何在Vue项目中安装和使用vue-fullcalendar组件来展示和管理日程事件。通过步骤演示了从下载安装到在模板中配置和监听事件的过程，包括事件点击、日期点击和更多事件的回调函数。示例代码展示了如何定义和显示带有样式的事件。

摘要由CSDN通过智能技术生成

最终效果：

安装过程：

1、下载

npm install vue-fullcalendar

2、main.js引用

import FullCalendar from 'vue-fullcalendar'
Vue.use(FullCalendar)

3、vue中使用

<template>
  <div>
    <full-calendar
      :events="monthData"
      class="test-fc"
      first-day="1"
      locale="fr"
      @changeMonth="changeMonth"
      @eventClick="eventClick"
      @dayClick="dayClick"
      @moreClick="moreClick"
      lang="zh"
    ></full-calendar>
  </div>
</template>

<script>
import { FullCalendar } from "vue-fullcalendar";
export default {
  data() {
    return {
      monthData: [
        {
          title: "调查活动", // 事件内容
          start: "2021-09-06", // 事件开始时间
          end: "2021-09-07", // 事件结束时间
          cssClass: "red" // 事件的样式   class名（由后台返回数据）  red为自己定义的class名
        }
      ]
    };
  },
  methods: {
    // 选择月份
    changeMonth(start, end, current) {
      console.log(
        "changeMonth",
        start.format(),
        end.format(),
        current.format()
      );
    },
    // 点击事件
    eventClick(event, jsEvent, pos) {
      console.log("eventClick", event, jsEvent, pos);
    },
    // 点击当天
    dayClick(day, jsEvent) {
      console.log("dayClick", day, jsEvent);
    },
    // 查看更多
    moreClick(day, events, jsEvent) {
      console.log("moreCLick", day, events, jsEvent);
    }
  },
  components: {
    "full-calendar": require("vue-fullcalendar")
  }
};
</script>
<style scoped>
.red {
  background: red;
}
.blue {
  background: blue;
}
</style>