On v-calendar.io, there is a demo showcasing the correct display where the date "2018-01-01" has a red background and dark text:
However, my display does not match that.
I have included Vue.js and v-calendar through CDN, and the page is formatted in HTML.
Here is the full code snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuejs calendar</title>
</head>
<body>
<div id='app'>
<v-calendar :attributes='attrs'>
</v-calendar>
</div>
<!-- 1. Link Vue Javascript -->
<script src='https://unpkg.com/vue/dist/vue.js'></script>
<!-- 2. Link VCalendar Javascript (Plugin automatically installed) -->
<script src='https://unpkg.com/v-calendar'></script>
<!--3. Create the Vue instance-->
<script>
new Vue({
el: '#app',
data() {
return {
attrs: [
{
key: 'today',
highlight: {
backgroundColor: '#ff8080',
},
// Just use a normal style
contentStyle: {
color: '#fafafa',
},
dates: new Date(2018, 0, 1)
},
],
};
},
})
</script>
</body>
</html>