Vue 2.5.2中如何为v-year-calendar添加事件/数据源？

先解决显示空白问题 #

最可能的原因是没引入组件样式文件，新手很容易忽略这一步：

• 在使用组件的Vue文件中，除了导入组件，必须同时导入样式：

  import Calendar from 'v-year-calendar'
  import 'v-year-calendar/lib/style.css' // 这行必须加，否则日历会无样式显示空白
  
  export default {
    components: {
      Calendar
    },
    // 其他代码...
  }
  

• 如果是全局注册组件，在main.js里也要导入样式：

  import Vue from 'vue'
  import Calendar from 'v-year-calendar'
  import 'v-year-calendar/lib/style.css'
  
  Vue.component('Calendar', Calendar)
  

正确添加事件/数据源 #

你之前的写法:data-Source=[1,4]有两个关键错误：

1. 属性名拼写错误：应该是data-source（或驼峰式dataSource，Vue2两种都支持），不是data-Source
2. 数据源格式错误：组件不接受简单数字数组，必须是含日期结构的对象数组

正确步骤： #

1. 在组件的data选项中定义符合要求的事件数组：

   data() {
     return {
       calendarEvents: [
         // 示例1：跨天事件
         {
           startDate: new Date(2024, 0, 1), // 月份从0开始，这里是2024年1月1日
           endDate: new Date(2024, 0, 4),
           name: '新年假期',
           color: '#ff4444' // 可选：自定义事件颜色
         },
         // 示例2：单日事件
         {
           startDate: new Date(2024, 2, 15), // 2024年3月15日
           name: '项目截止日'
         }
       ]
     }
   }
   

2. 在模板中绑定数据源：

   <template>
     <Calendar language="de" :data-source="calendarEvents"></Calendar>
   </template>
   

额外排查点 #

如果还是有问题，打开浏览器F12控制台：

• 查看Console标签是否有组件未注册、日期格式错误等报错
• 查看Network标签确认样式文件是否成功加载

内容的提问来源于stack exchange，提问作者Marko24