Fullcalendar 与 Vue 没有 CLI答案

【问题标题】：Fullcalendar with Vue without CLIFullcalendar 与 Vue 没有 CLI
【发布时间】：2021-07-26 20:55:16
【问题描述】：

我有一个小型 Vue 项目，它不在构建环境中，它只是一堆 JS 文件并使用 CDN 中的 Vue

我想在我的 Vue 项目中使用 FullCalendar，最好使用官方的 FullCalendar Vue 组件，但这似乎只适用于使用 CLI 构建环境的项目。

是否有可用于非构建项目的 Vue 组件，我可以使用它仍然实现正常的<FullCalendar /> 标签？

【问题讨论】：

未建成的项目是枪。没有必要使用 Vue CLI，它只是可能的设置之一。但是您需要使用一些构建环境（Webpack 或其他）才能在实际项目中使用 Vue，因为很多第三方 Vue 库不提供捆绑包。您可以为需要使用的每个库自己做一些腿部工作，看看它是否是预构建的。 FC 是，unpkg.com/browse/@fullcalendar/vue@5.8.0/dist/main.global.js

标签： vue.js fullcalendar

【解决方案1】：

关于CDNsee

new Vue({
  el: '#app',
  mounted() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
      initialView: 'dayGridMonth'
    });
    calendar.render();
  }    
})

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
    <link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.8.0/main.min.css' rel='stylesheet' />
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.8.0/main.min.js'></script>
  </head>
  <body>
  <div id="app">
    <div id='calendar'></div>
  </div>
  </body>
</html>

【讨论】：

在这种情况下，如何让日历对 v-model 中的更改做出反应，比如添加和编辑事件？
我认为您最好使用 Vuetify 日历 然后，我稍微修改了示例并将作为 sn-p 添加到答案的末尾。 original example is here 要获取任何示例，请在沙箱中打开它，然后导出。您将在dist 文件夹中的存档中找到结果（将使用CDN），祝您好运！