vue-simple-calendar“类”项目属性不起作用

Question

我使用vue-simple-calendar 作为我的vuejs 项目的npm 日历包，我想为每个事件项实现动态类。前任。背景颜色等。但classes 属性不起作用。

参考：https://github.com/richardtallent/vue-simple-calendar#calendar-item-properties

现场演示：https://tallent.us/vue-simple-calendar/（演示中似乎还可以）

Demo（App.vue 文件）：https://github.com/richardtallent/vue-simple-calendar-sample/blob/main/src/App.vue（classes 属性已实现）

style 属性正在工作：

var app = new Vue({
        el: '#app',
        data: function() {
            return {
        showDate: new Date('10/15/2018'),
        events: [
          {
            startDate: '2018-10-06',
            endDate: '2018-10-13',
            title: 'Sample event 2',
            style: 'background-color: red'
          }
        ]
      }
        },
    component: {
        "calendar-view": window.CalendarView,  
    },
        methods: {
            setShowDate(d) {
                this.showDate = d;
            },
      onClickEvent() { alert('event clicked') }
        }
    })

#app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        color: #2c3e50;
        height: 67vh;
        width: 90vw;
        margin-left: auto;
        margin-right: auto;
    }

<script src="https://unpkg.com/vue@2.5.17/dist/vue.js" ></script>
<script src="https://unpkg.com/vue-simple-calendar@4.1.0/dist/CalendarView.umd.js" ></script>
<div id="app">
        <h1>My Calendar</h1>
        <calendar-view
            :show-date="showDate" :events="events" display-period-uom="month" :display-period-count="4"
            class="theme-default holiday-us-traditional holiday-us-official"
       @click-event="onClickEvent">
            <calendar-view-header
                slot="header"
                slot-scope="t"
                :header-props="t.headerProps"
                @input="setShowDate" />
        </calendar-view>
    </div>

另一方面，classes 属性不起作用：

var app = new Vue({
        el: '#app',
        data: function() {
            return {
        showDate: new Date('10/15/2018'),
        events: [
          {
            startDate: '2018-10-06',
            endDate: '2018-10-13',
            title: 'Sample event 2',
            classes: 'bg-red'
          }
        ]
      }
        },
    component: {
        "calendar-view": window.CalendarView,  
    },
        methods: {
            setShowDate(d) {
                this.showDate = d;
            },
      onClickEvent() { alert('event clicked') }
        }
    })

#app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        color: #2c3e50;
        height: 67vh;
        width: 90vw;
        margin-left: auto;
        margin-right: auto;
    }
.bg-red {
  background-color: red
}

<script src="https://unpkg.com/vue@2.5.17/dist/vue.js" ></script>
<script src="https://unpkg.com/vue-simple-calendar@4.1.0/dist/CalendarView.umd.js" ></script>
<div id="app">
        <h1>My Calendar</h1>
        <calendar-view
            :show-date="showDate" :events="events" display-period-uom="month" :display-period-count="4"
            class="theme-default holiday-us-traditional holiday-us-official"
       @click-event="onClickEvent">
            <calendar-view-header
                slot="header"
                slot-scope="t"
                :header-props="t.headerProps"
                @input="setShowDate" />
        </calendar-view>
    </div>

Answer 1

这是文档中的一个错误，现已修复！ classes 属性实际上应该是一个字符串数组，而不是单个字符串。 *例如：

classes: ['bg-red']