For my Vue.js project, I am utilizing the npm calendar package called `vue-simple-calendar` and aiming to implement dynamic classes for each event item like background-color, etc. However, the `classes` property doesn't seem to be functioning as expected.
If you need more information, you can refer to: https://github.com/richardtallent/vue-simple-calendar#calendar-item-properties
To see a live demo, visit: (It appears to work fine in the demo)
Check out the implementation of the `classes` property in the demo App.vue file here: https://github.com/richardtallent/vue-simple-calendar-sample/blob/main/src/App.vue (`classes` property is successfully implemented there)
The `style` property seems to be functional, as shown below:
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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2056554560120e150e1117">[email protected]</a>/dist/vue.js" ></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="017774642c72686c716d642c62606d646f65607341352f302f31">[email protected]</a>/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 flip side, it seems that the `classes` property is not working as intended:
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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b3c5c6d6f3819d869d8284">[email protected]</a>/dist/vue.js" ></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3c4a4959114f55514c5059115f5d505952585d4e7c08120d120c">[email protected]</a>/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>