V-calendar: Show days in previous month and next month

Created on 3 Jun 2019 · 5Comments · Source: nathanreyes/v-calendar

I am using the latest beta version of v-calendar (v1.0.0-beta.14) with Vue 3.0.0-rc.10. In the stable version, some days in the previous and next month are visible in a slightly greyed out colour but on the beta version, the default behaviour seems to be to hide these days for previous and next month with vc-opacity-0 which leaves a full row of empty white space as you can see in this fiddle.

Is there an attribute or option to either completely remove the previous/next days or display these days in a greyed out colour as in the stable version?

Source

nirpan

👍8

Most helpful comment

In fact, you can choose display or hide previous and next months dates as you wish.
Just by overriding theme definition.
customizable theme

<template>
  <v-calendar
    class="calendar"
    :theme='themeStyles'
    ...
  />
</template>
<script>
import * as moment from 'moment'

export default {
  data () {
    return {
      themeStyles: {
        dayNotInMonth: 'not-in-month'
      },
    }
  }
  ...
}
</script>
<style scoped>
.calendar >>> .not-in-month {
  color: rgba(0, 0, 0, 0.5); // change this
}
</style>

BattleForged on 20 May 2020

👍2 🚀1

All 5 comments

I agree that showing the previous/next days greyed out as used to be the case would be an improvement.

sigjak on 3 Jun 2019

It cost a lot of time to find out this issue, hope this improvement on the fly asap!

benliu723 on 20 Jun 2019

It's hidden with CSS, so we can use CSS to make them visible again.
This wasn't very well tested, but it works on my end. The first instruction makes the days visible, the second one makes the days clickable.

.vc-day .vc-opacity-0 {
  opacity: 0.5;
}

.vc-day .vc-pointer-events-none {
  pointer-events: all;
}

ptdev on 19 Jul 2019

👍3

In fact, you can choose display or hide previous and next months dates as you wish.
Just by overriding theme definition.
customizable theme

<template>
  <v-calendar
    class="calendar"
    :theme='themeStyles'
    ...
  />
</template>
<script>
import * as moment from 'moment'

export default {
  data () {
    return {
      themeStyles: {
        dayNotInMonth: 'not-in-month'
      },
    }
  }
  ...
}
</script>
<style scoped>
.calendar >>> .not-in-month {
  color: rgba(0, 0, 0, 0.5); // change this
}
</style>

BattleForged on 20 May 2020

👍2 🚀1

I think this is now hidden with JS? The hack isn't working anymore and neither is this (with the new default class):

>>> .vc-container .is-not-in-month {
    color: red;
}

Manually removing the is-not-in-month class from a hidden element makes it visible again.

Edit: this works:

>>> .vc-day.is-not-in-month *[data-v-005dafc8] {
    color: red;
    opacity: 1 !important;
    pointer-events: inherit;
}

Found in node_modules/v-calendar/lib/v-calendar.umd.js

Here's a raw TailwindCSS example that disables interactions with disabled dates, grays out disabled dates, and shows dates of previous and next months a bit less opaque:

>>> .vc-container .vc-day-content:hover:not(.is-disabled) {
    @apply bg-red-400 text-white;
}

>>> .vc-container .vc-day-content.is-disabled {
    @apply pointer-events-none;
}

>>> .vc-container .vc-day-content.is-disabled:hover {
    @apply bg-transparent;
}

>>> .vc-day.is-not-in-month *:not(.is-disabled) {
    @apply opacity-100 text-gray-700 pointer-events-auto;
}

>>> .vc-day.is-not-in-month .is-disabled  {
    @apply opacity-100 text-gray-400 pointer-events-none;
}