quasarframework / quasar-ui-qcalendar

QCalendar - Quasar App Extension, Vue CLI plug-in and UMD distributions available
https://quasarframework.github.io/quasar-ui-qcalendar
MIT License
421 stars 116 forks source link

<Script setup> impossible to switch between dates #391

Open JohnyDyxt opened 1 year ago

JohnyDyxt commented 1 year ago

Hello team,

I can't reproduce it on codepen so i will try to be as clear as possible.

I'm under Vue 3.2 with composition api

code console

Bruno17 commented 1 year ago

Doesn't it has to be

calendar.value.prev()

same with next() and moveToToday() ?

JohnyDyxt commented 1 year ago

Hi and thank you for your answer,

If i add () at the end, the behavior is exactly the same. Nothing happened. If i console.log it , the console will display UNDEFINED.

If i console.log(calendar.value.prev) => I see the function but nothing happened.

adgower commented 1 year ago

I have the same issue. Nothing happens.

      <q-calendar-month animated transition-next="flip-left" ref="calendar" :weekdays="[1, 2, 3, 4, 5]">
const calendar = ref(null);

const onNext = () => {
  calendar.value.next();
};
adgower commented 1 year ago

I believe I found the solution, and I may have missed it in the documentation, but in order for the prev/next to work you need to set a v-model for the calendar with a date selected:

v-model="selectedDate"

import { today } from "@quasar/quasar-ui-qcalendar/src/index.js"

const selectedDate = ref(today())

You don't need to import today, but you need to set selectedDate as a valid formatted date according to docs, and then the prev next works.

aasen commented 2 months ago

Shouldn't this issue be closed?