fix(VCalendar): not usable without v-model (#19586)

vuetifyjs · Apr 10, 2024 · 2fe65f0 · 2fe65f0
1 parent e1e6065
commit 2fe65f0
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 12 deletions.
diff --git a/packages/vuetify/src/composables/calendar.ts b/packages/vuetify/src/composables/calendar.ts
@@ -143,7 +143,7 @@ export function useCalendar (props: CalendarProps) {
  }
 
  const daysInWeek = computed(() => {
- const lastDay = adapter.startOfWeek(model.value)
+ const lastDay = adapter.startOfWeek(displayValue.value)
  const week = []
  for (let day = 0; day <= 6; day++) {
  week.push(adapter.addDays(lastDay, day))

diff --git a/packages/vuetify/src/labs/VCalendar/VCalendar.tsx b/packages/vuetify/src/labs/VCalendar/VCalendar.tsx
@@ -41,31 +41,31 @@ export const VCalendar = genericComponent<VCalendarSlots>()({
  setup (props, { emit, slots }) {
  const adapter = useDate()
 
- const { daysInMonth, daysInWeek, genDays, model, weekNumbers } = useCalendar(props as any)
+ const { daysInMonth, daysInWeek, genDays, model, displayValue, weekNumbers } = useCalendar(props as any)
 
  const dayNames = adapter.getWeekdays()
 
  function onClickNext () {
  if (props.viewMode === 'month') {
- model.value = [adapter.addMonths(model.value[0], 1)]
+ model.value = [adapter.addMonths(displayValue.value, 1)]
  }
  if (props.viewMode === 'week') {
- model.value = [adapter.addDays(model.value[0], 7)]
+ model.value = [adapter.addDays(displayValue.value, 7)]
  }
  if (props.viewMode === 'day') {
- model.value = [adapter.addDays(model.value[0], 1)]
+ model.value = [adapter.addDays(displayValue.value, 1)]
  }
  }
 
  function onClickPrev () {
  if (props.viewMode === 'month') {
- model.value = [adapter.addMonths(model.value[0], -1)]
+ model.value = [adapter.addMonths(displayValue.value, -1)]
  }
  if (props.viewMode === 'week') {
- model.value = [adapter.addDays(model.value[0], -7)]
+ model.value = [adapter.addDays(displayValue.value, -7)]
  }
  if (props.viewMode === 'day') {
- model.value = [adapter.addDays(model.value[0], -1)]
+ model.value = [adapter.addDays(displayValue.value, -1)]
  }
  }
 
@@ -74,7 +74,7 @@ export const VCalendar = genericComponent<VCalendarSlots>()({
  }
 
  const title = computed(() => {
- return adapter.format(model.value[0], 'monthAndYear')
+ return adapter.format(displayValue.value, 'monthAndYear')
  })
 
  useRender(() => {
@@ -173,11 +173,12 @@ export const VCalendar = genericComponent<VCalendarSlots>()({
  { props.viewMode === 'day' && (
  <VCalendarDay
  { ...calendarDayProps }
- day={ genDays([model.value[0] as Date], adapter.date() as Date)[0] }
+ day={ genDays([displayValue.value as Date], adapter.date() as Date)[0] }
+ dayIndex={ 0 }
  events={
  props.events?.filter(e =>
- adapter.isSameDay(e.start, genDays([model.value[0] as Date], adapter.date() as Date)[0].date) ||
- adapter.isSameDay(e.end, genDays([model.value[0] as Date], adapter.date() as Date)[0].date)
+ adapter.isSameDay(e.start, genDays([displayValue.value as Date], adapter.date() as Date)[0].date) ||
+ adapter.isSameDay(e.end, genDays([displayValue.value as Date], adapter.date() as Date)[0].date)
  )
  }
  ></VCalendarDay>