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

Posted 2023-02-22

【中文标题】vue-simple-calendar“类”项目属性不起作用

【英文标题】：vue-simple-calendar "classes" item properties not working

【发布时间】：2021-02-13 13:00:36

【问题描述】：

我使用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>

【参考方案1】：

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

classes: ['bg-red']