fix(VCalendar): weekdays and day views conflict (#11025) (#11129)

fixes #11025 fixes #10123 * fix(VCalendar): weekdays and day views conflict (#11129 * fix(VCalendar): multi-day events not spanning day views (#10123)
vuetifyjs · Apr 20, 2020 · c4eb5da · c4eb5da
1 parent 20af37d
commit c4eb5da
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 10 deletions.
diff --git a/packages/vuetify/src/components/VCalendar/VCalendar.ts b/packages/vuetify/src/components/VCalendar/VCalendar.ts
@@ -39,6 +39,7 @@ interface VCalendarRenderProps {
   end: CalendarTimestamp
   component: string | Component
   maxDays: number
+  weekdays: number[]
 }
 
 /* @vue/component */
@@ -66,6 +67,7 @@ export default CalendarWithEvents.extend({
       const around = this.parsedValue
       let component: any = null
       let maxDays = this.maxDays
+      let weekdays = this.parsedWeekdays
       let start = around
       let end = around
       switch (this.type) {
@@ -83,12 +85,19 @@ export default CalendarWithEvents.extend({
         case 'day':
           component = VCalendarDaily
           maxDays = 1
+          weekdays = [start.weekday]
           break
         case '4day':
           component = VCalendarDaily
           end = relativeDays(copyTimestamp(end), nextDay, 4)
           updateFormatted(end)
           maxDays = 4
+          weekdays = [
+            start.weekday,
+            (start.weekday + 1) % 7,
+            (start.weekday + 2) % 7,
+            (start.weekday + 3) % 7,
+          ]
           break
         case 'custom-weekly':
           component = VCalendarWeekly
@@ -104,7 +113,10 @@ export default CalendarWithEvents.extend({
           throw new Error(this.type + ' is not a valid Calendar type')
       }
 
-      return { component, start, end, maxDays }
+      return { component, start, end, maxDays, weekdays }
+    },
+    eventWeekdays (): number[] {
+      return this.renderProps.weekdays
     },
   },
 
@@ -150,9 +162,7 @@ export default CalendarWithEvents.extend({
             relativeDays(moved, mover, DAYS_IN_WEEK)
             break
           case 'day':
-            const index = moved.weekday
-            const days = forward ? this.weekdaySkips[index] : this.weekdaySkipsReverse[index]
-            relativeDays(moved, mover, days)
+            relativeDays(moved, mover, 1)
             break
           case '4day':
             relativeDays(moved, mover, 4)
@@ -200,7 +210,7 @@ export default CalendarWithEvents.extend({
   },
 
   render (h): VNode {
-    const { start, end, maxDays, component } = this.renderProps
+    const { start, end, maxDays, component, weekdays } = this.renderProps
 
     return h(component, {
       staticClass: 'v-calendar',
@@ -212,6 +222,7 @@ export default CalendarWithEvents.extend({
         start: start.date,
         end: end.date,
         maxDays,
+        weekdays,
       },
       directives: [{
         modifiers: { quiet: true },

diff --git a/packages/vuetify/src/components/VCalendar/__tests__/__snapshots__/VCalendar.spec.ts.snap b/packages/vuetify/src/components/VCalendar/__tests__/__snapshots__/VCalendar.spec.ts.snap
@@ -317,14 +317,14 @@ exports[`VCalendar should go to correct day when using next/prev public function
     </div>
     <div class="v-calendar-daily_head-day v-past">
       <div class="v-calendar-daily_head-weekday">
-        Mon
+        Sat
       </div>
       <div class="v-calendar-daily_head-day-label">
         <button type="button"
                 class="v-btn v-btn--depressed v-btn--fab v-btn--round theme--light v-size--default transparent"
         >
           <span class="v-btn__content">
-            14
+            12
           </span>
         </button>
       </div>

diff --git a/packages/vuetify/src/components/VCalendar/mixins/calendar-with-events.ts b/packages/vuetify/src/components/VCalendar/mixins/calendar-with-events.ts
@@ -117,6 +117,9 @@ export default CalendarBase.extend({
         ? this.eventOverlapMode as CalendarEventOverlapMode
         : CalendarEventOverlapModes[this.eventOverlapMode]
     },
+    eventWeekdays (): number[] {
+      return this.parsedWeekdays
+    },
   },
 
   methods: {
@@ -339,15 +342,15 @@ export default CalendarBase.extend({
     },
     getEventsForDay (day: CalendarTimestamp): CalendarEventParsed[] {
       const identifier = getDayIdentifier(day)
-      const firstWeekday = this.parsedWeekdays[0]
+      const firstWeekday = this.eventWeekdays[0]
 
       return this.parsedEvents.filter(
         event => isEventStart(event, day, identifier, firstWeekday)
       )
     },
     getEventsForDayAll (day: CalendarTimestamp): CalendarEventParsed[] {
       const identifier = getDayIdentifier(day)
-      const firstWeekday = this.parsedWeekdays[0]
+      const firstWeekday = this.eventWeekdays[0]
 
       return this.parsedEvents.filter(
         event => event.allDay && isEventStart(event, day, identifier, firstWeekday)
@@ -367,7 +370,7 @@ export default CalendarBase.extend({
 
       const mode = this.eventModeFunction(
         this.parsedEvents,
-        this.parsedWeekdays[0],
+        this.eventWeekdays[0],
         this.parsedEventOverlapThreshold
       )