not disabling the exact dates.

[arqamtahir]

Here I wanna disable the exact dates, my available dates are [ "2024-06-01", "2024-06-08", "2024-06-15", "2024-06-22", "2024-06-29", "2024-07-06", "2024-07-13", "2024-07-20", "2024-07-27"]. but it also enable pre dates and post dates.

Can you please have a look.

[remcoz]

yes we have the same issue/bug

[joffreyBerrier]

Hi @remcoz @arqamtahir do you have a reproduction link ? You need to passed disabledDates, not enable date to the calendar

If you want to disable date before or after you need to use 2 props

There is the link of the documentation: https://github.com/joffreyBerrier/vue-datepicker?tab=readme-ov-file#disableddaysafterdaydate

You need to specify a timezone by default, example if your company is a travel company like airbnb set the timezone of the House destination

Thx

[arqamtahir]

HI @joffreyBerrier thanks for your time. Here Is the link to reproduce this issue in our test app. https://nuxtjs3-two.vercel.app/accommodations/casa-centofinestre, This is the site with you calendar, And here is the the correct dates that old calendar provide https://dev.nice2stay.com/en/accommodations/casa-centofinestre. Can you please indicate that How to disable possible start of stay and possible end of stay. I email you our dev credentials.

Thanks

[joffreyBerrier]

Hi @arqamtahir please provide a minimal reproduction link with codesandbox 🙏

I think you need to read the documentation it’s not a bug, if you want to block specific dates like saturday to saturday you need to use the props periodDates and indicate the period you want to block.

Send me a reproduction link and what you watt to do with an exemple and I help you to solved that

[arqamtahir]

HI @joffreyBerrier hope you are doing great. here is the link codeSandBox. Here I disable some dates, [ "2024-06-01", "2024-06-02", "2024-06-03", "2024-06-23", "2024-06-24", "2024-06-25", ], But it allow me to select "2024-06-03", and "2024-06-25", and also not apply disable style to "2024-06-01" and "2024-06-23".

Here is demo video https://github.com/joffreyBerrier/vue-datepicker/assets/108735137/c6c8956d-437d-4e86-b7f2-cedcfd1daadd

[joffreyBerrier]

Please send me the code not a video I can't help you with a video

[arqamtahir]

<script setup lang="js">
import { ref, defineProps } from "vue";
import { Calendar } from "vue-calendar-3";

// const props = defineProps({
//   accommodation: {
//     type: Object,
//     default: null,
//   },
// });

// const { accommodation } = props;
// const availabilities = ref();
const checkIn = ref();
const checkOut = ref();
const bookingDates = ref([
  {
    checkInDate: "2024-07-01",
    checkOutDate: "2024-07-10",
    type: "admin",
  },
]);

const periodDates = ref([
  // Nightly
  {
    startAt: "2024-08-01",
    endAt: "2024-08-31",
    minimumDuration: 4,
    periodType: "nightly",
  },
  // Weekly Saturday
  {
    startAt: "2024-09-01",
    endAt: "2024-09-30",
    minimumDuration: 2,
    periodType: "nightly",
  },
  // Weekly Sunday
  {
    startAt: "2024-11-01",
    endAt: "2024-11-29",
    minimumDuration: 1,
    periodType: "nightly",
  },
]);

const bookedDates = ref([
  "2024-06-01",
  "2024-06-02",
  "2024-06-03",
  "2024-06-23",
  "2024-06-24",
  "2024-06-25",
]);

const placeholder = { checkIn: "check-in", checkOut: "check-out" };

const en = ref([
  { clearDates: "Clear dates" },
  { close: "Close" },
  {
    days: {
      monday: "Mo",
      tuesday: "Tu",
      wednesday: "We",
      thursday: "Th",
      friday: "Fr",
      saturday: "Sa",
      sunday: "Su",
    },
  },
  { today: "Today" },
  {
    periodType: {
      weeklyBySaturday: "From Saturday to Saturday",
      weeklyBySunday: "From Sunday to Sunday",
      weeklyByMonday: "From Monday to Monday",
      nightly: "A minimum of %{minimumDuration} night is required",
    },
  },
  {
    halfDay: {
      checkIn: "Possible end of stay",
      checkOut: "Possible start of stay",
    },
  },
]);
</script>

<template>
  <h1 class="pr-3">checkIn => {{ checkIn }}</h1>
  <hr />
  <h1>checkOut => {{ checkOut }}</h1>

    <div class="calendar-wrapper">
      <div v-if="true" class="calendar">
        <Calendar
          v-model:checkIn="checkIn"
          v-model:checkOut="checkOut"
          :periodDates="periodDates"
          :periodManagementRule="true"
          :bookingDates="bookingDates"
          :bookedDates="bookedDates"
          :alwaysVisible="true"
          :SingleCalendar="!true"
          :hasFooter="true"
          :placeholder="placeholder"
          :locale="`en`"
          @render-next-date="onNextMonth"
          @render-previous-date="onPreviousMonth"
          @update:checkIn="onCheckInSelect"
          @update:checkOut="onCheckOutSelect"
          @clear-dates="clearDates"
        />
      </div>
    </div>

  <hr />
  <h1>this is disable</h1>
  {{ bookedDates }}
  <hr />
  <h1>this is periodDate</h1>
  {{ periodDates }}
</template>`

[joffreyBerrier]

Here is an example that works perfectly. I noticed that you used props that don’t exist, and I’m not sure why… Just use the component as documented without inventing props. Set the timezone for your destinations as I mentioned, or hardcode it. The default timezone is: ‘Europe/Paris’.

<script setup lang="ts">
import { ref } from 'vue'

import { Calendar } from "vue-calendar-3";
import type { Period } from 'vue-calendar-3'
import "vue-calendar-3/style";

const periodDates = ref<Period[]>([
  // Nightly
  {
    startAt: '2024-08-01',
    endAt: '2024-08-31',
    minimumDuration: 4,
    periodType: 'nightly'
  },
  // Weekly Saturday
  {
    startAt: '2024-09-01',
    endAt: '2024-09-30',
    minimumDuration: 2,
    periodType: 'nightly'
  },
  // Weekly Sunday
  {
    startAt: '2024-11-01',
    endAt: '2024-11-29',
    minimumDuration: 1,
    periodType: 'nightly'
  }
])

const bookedDates = ref([
  '2024-06-01',
  '2024-06-02',
  '2024-06-03',
  '2024-06-23',
  '2024-06-24',
  '2024-06-25'
])
const checkIn = ref(new Date('2024-05-01'))
const checkOut = ref(new Date('2024-05-10'))
</script>

<template>
  <Calendar
    v-model:checkIn="checkIn"
    v-model:checkOut="checkOut"
    :period-dates="periodDates"
    :bookedDates="bookedDates"
    locale="en"
  />
</template>