如何使用 Vue Js 自定义全日历？答案

【问题标题】：How to custom fullcalendar using Vue Js?如何使用 Vue Js 自定义全日历？
【发布时间】：2020-01-06 04:46:42
【问题描述】：

问题：

我无法自定义我的完整日历视图。

我想做的事：

我想将默认视图设为月。不过，我可以使用JQuery 来做到这一点，但我想知道如何使用Vue-js 来做同样的事情？

我的研究成果：

我的 JQuery 代码

$(document).ready(function() {
  $("#calendar").fullCalendar("changeView", "month");
});

我的 Vue.js 代码

export default {
  data() {
    return {
      eventSources: [
        {
          events(start, end, timezone, callback) {
            axios.get("http://localhost:8000/api/events").then(response => {
              callback(response.data.data);
            });
          },
          color: "yellow",
          textColor: "black",
        }
      ]
    };
  }
};

我如何通过Vue.js 代码使用Jquery 实现相同的操作？

【问题讨论】：

您能否提供您使用全日历组件的视图，我会为您解决。
如果您准备升级到 fullCalendar 4，那么与 Vue 的集成将变得更加容易，因为有现成的组件：fullcalendar.io/docs/vue

标签： laravel vue.js laravel-5 vuejs2 fullcalendar

【解决方案1】：

你可以试试：defaultView: 'month'

你的视图中应该有这样的东西：

<full-calendar :config="calendarConfig"/>

在你的data 中你需要设置你的配置：

data () {
      return {
         calendarConfig: {
            defaultView: 'month'
         }
    }
}

注意

如果你使用v4，你可以check doc。

【讨论】：