There is a syntax error in your code - you need to move method: {} out of data(), and it should be methods instead of method.
Once you fix that, follow the tutorial to customize your calendar (refer to Available Props in the tutorial).
Don't forget to open your browser console to check for any errors.
Below is a demo allowing you to customize background, open date, and bootstrap styling within the <datepick>.
PS: According to the tutorial, if using CDN directly, you must use <vuejs-datepicker> instead of <datepicker>
PS: If the props provided by datepicker don't meet your needs, you may have to inspect the DOM tree for the calendar and add your CSS selectors to customize it, like I did to change the background.
Update: Be sure to clone a new Date object every time the open Date changes, otherwise reactivity will not trigger.
app = new Vue({
el: "#app",
components: {
vuejsDatepicker
},
data() {
return {
selectedDate: '',
bootstrapStyling: true,
openDate: new Date()
}
},
methods: {
changeBootstrapStyling: function () {
this.bootstrapStyling = !this.bootstrapStyling
},
changeLanguage: function () {
this.openDate = new Date(this.openDate.setDate(this.openDate.getDate() + 90))
}
}
})
.bg-red > div > div {
background-color:red
}
.bg-white > div > div {
background-color:white
}
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e686b7b5e2c302b302f28">[email protected]</a>/dist/vue.js"></script>
<script src="https://unpkg.com/vuejs-datepicker"></script>
<div id="app">
<button @click="changeBootstrapStyling()">Change Bootstrap Styling</button>
<button @click="changeLanguage()">Change Open Date</button>
<form>
<vuejs-datepicker :bootstrap-styling="true" :open-date="openDate"
class="form-control" :class="{'bg-red':bootstrapStyling, 'bg-white':!bootstrapStyling}"></vuejs-datepicker>
</form>
</div>