vue-simple-calendar "classes" item properties not working

Question

I am using vue-simple-calendar as npm calendar package for my vuejs project and I want to implement dynamic classes for each event items. Ex. background-color, etc. But the classes property is not working.

Reference: https://github.com/richardtallent/vue-simple-calendar#calendar-item-properties

Live demo: https://tallent.us/vue-simple-calendar/ (seems to be ok in demo)

Demo (App.vue file): https://github.com/richardtallent/vue-simple-calendar-sample/blob/main/src/App.vue (classes property is implemented)

style property is working:

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>

on the other side, classes property is not working:

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

This was a bug in the documentation, now fixed! The classes property is actually expected to be an array of strings, not a single string. *E.g.:

classes: ['bg-red']