CODEWITHSUNDEEP
javascripthtmlcssvue.js
mbole87
mbole87

Reputation: 49

Vue.js custom calendar, disable days

I started to work with vue.js and I encountered the problem on how to add a class on the past and future days of the current month. So for the March in the first row I want to disable days with numbers 24, 25, 26, 27, 28, 29 and also the last row 1, 2, 3, 4, 5... I made a special class "disabled" in the CSS for that.

Codepen link:

[Codepen] https://codepen.io/mbole87/pen/bGdxgrX

If anyone can help?

Thanks!

Upvotes: 0

Views: 271

Answers (1)

Shoejep
Shoejep

Reputation: 4839

You can add the class binding below, to the div above the span, which should give you what you want. This adds the class 'disabled' when the date month is not the same as the current month.

:class="{ 'disabled': data.getMonth() !== currentDate.month }"

Here's a fork of your codepen with it working.

Upvotes: 1

Related Questions