vue-full-calendar基本使用

vue-full-calendar基本使用

安装

npm install vue-full-calendar
npm install moment

全局引入
可以将fullcalendar里面fullcalendar.css放到assets中，方便对日历样式进行自定义的修改

import FullCalendar from 'vue-full-calendar'
import './assets/fullcalendar.css'
Vue.use(FullCalendar)

安装jqery

npm i jquery --save-d

全局引入jqery

//在main.js中引入
import jquery from 'jquery'
Vue.prototype.$ = jquery

设置周六周日背景色
在fullcalendar.css添加

/*星期六背景色和字体颜色wheat */
.fc-unthemed td.fc-sat{
  /*background: #F5DEB3;*/
  background-color:#8fdf82;
}
/*星期天背景色和字体颜色burlywood */
.fc-unthemed td.fc-sun{
  /*background: #DEB887;*/
  background-color:#8fdf82 ;
}

页面代码

<template>
  <div class="hello">
    <full-calendar ref="calendar" :events="events" :config="config">
    </full-calendar>
  </div>
</template>

<script>
var demoEvents = [
  {
    title: "Sunny Out of Office",
    start: "2021-04-05",
    end: "2021-04-05",
    backgroundColor: "green",
    // borderColor:"none",
    // color:"black", // 背景色和边框色
    // textColor:"white",
  },
  {
    title: "Sunny Out of Office",
    start: "2021-04-06",
    end: "2021-04-06",
  },
];
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      events: demoEvents,
      config: {
        locale: "zh-cn",
        defaultView: "month",
        firstDay:1,
        header: {
          left: "",
          center: "title",
          right: "",
        },
        editable: false, // 禁止拖动
        aspectRatio: 2,
        eventLimit: 3, // 限制一天中显示的事件数，默认false
        eventClick: this.eventClick,
      },
    };
  },
  created() {
    this.$nextTick(() => {
      // 在 header title 左边 插入 自定义按钮
      this.$(".fc-center").prepend(
        this.$(
          '<button type="button" class="fc-button fc-state-default fc-corner-left fc-corner-right"> < </button>'
        ).on("click", () => {
          this.$refs.calendar.fireMethod("prev");
        })
      );
      // 在 header title 右边 插入 自定义按钮
      this.$(".fc-center").append(
        this.$(
          '<button type="button" class="fc-button fc-state-default fc-corner-left fc-corner-right"> > </button>'
        ).on("click", () => {
          this.$refs.calendar.fireMethod("next");
        })
      );
    });
  },
  methods: {
    eventClick: function (event, jsEvent, view) {
      console.log("??");
    },
  },
};
</script>