All files / components CalendarWeeks.vue

0% Statements 0/75
0% Branches 0/30
0% Functions 0/11
0% Lines 0/63
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143                                                                                                                                                                                                                                                                                             
<template>
<div> 
  <div
    class='c-week'
    v-for='(week, i) in weeks'
    :key='i + 1'
    @touchstart.passive='$emit("touchstart", $event)'
    @touchmove.passive='$emit("touchmove", $event)'
    @touchend.passive='$emit("touchend", $event)'>
    <calendar-day
      v-for='day in week'
      :key='day.id'
      :dayInfo='day'
      v-bind='$attrs'
      v-on='$listeners'>
      <template v-for='slot in Object.keys($scopedSlots)' :slot='slot' slot-scope='props'>
        <slot :name='slot' v-bind='props'></slot>
      </template>
    </calendar-day>
  </div>
</div>
</template>
 
<script>
import CalendarDay from './CalendarDay';
import { todayComps } from '../utils/helpers';
 
export default {
  components: {
    CalendarDay,
  },
  props: {
    monthComps: Object,
    prevMonthComps: Object,
    nextMonthComps: Object,
    trimMaxWeek: Boolean,
  },
  computed: {
    weeks() {
      const weeks = [];
      const { firstDayOfWeek, firstWeekday } = this.monthComps;
      let prevMonth = true;
      let thisMonth = false;
      let nextMonth = false;
      // Init counters with previous month's data
      let day = (this.prevMonthComps.days - Math.abs(firstWeekday - firstDayOfWeek)) + 1;
      let dayFromEnd = (this.prevMonthComps.days - day) + 1;
      let weekdayOrdinal = Math.floor(((day - 1) / 7) + 1);
      let weekdayOrdinalFromEnd = 1;
      let week = this.prevMonthComps.weeks;
      let weekFromEnd = 1;
      let month = this.prevMonthComps.month;
      let year = this.prevMonthComps.year;
      // Cycle through 6 weeks (max in month)
      for (let w = 1; w <= 6 && (!nextMonth || !this.trimMaxWeek); w++) {
        // Cycle through each weekday
        const days = [];
        // Cycle through 7 days
        for (let i = 1, weekday = firstDayOfWeek; i <= 7; i++, weekday += (weekday === 7) ? -6 : 1) {
          // We need to know when to start counting actual month days
          if (prevMonth && weekday === firstWeekday) {
            // Reset counters for current month
            day = 1;
            dayFromEnd = this.monthComps.days;
            weekdayOrdinal = Math.floor(((day - 1) / 7) + 1);
            weekdayOrdinalFromEnd = Math.floor(((this.monthComps.days - day) / 7) + 1);
            week = 1;
            weekFromEnd = this.monthComps.weeks;
            month = this.monthComps.month;
            year = this.monthComps.year;
            // ...and flag we're tracking actual month days
            prevMonth = false;
            thisMonth = true;
          }
          // Append day info for the current week
          // Note: this might or might not be an actual month day
          //  We don't know how the UI wants to display various days,
          //  so we'll supply all the data we can
          const date = new Date(year, month - 1, day);
          const isToday = day === todayComps.day && month === todayComps.month && year === todayComps.year;
          const dayInfo = {
            id: `${month}.${day}`,
            label: day.toString(),
            day,
            dayFromEnd,
            weekday,
            weekdayOrdinal,
            weekdayOrdinalFromEnd,
            week,
            weekFromEnd,
            month,
            year,
            date,
            dateTime: date.getTime(),
            isToday,
            isFirstDay: thisMonth && day === 1,
            isLastDay: thisMonth && day === this.monthComps.days,
            inMonth: thisMonth,
            inPrevMonth: prevMonth,
            inNextMonth: nextMonth,
          };
          days.push(dayInfo);
          // See if we've hit the last day of the month
          if (thisMonth && dayInfo.isLastDay) {
            thisMonth = false;
            nextMonth = true;
            // Reset counters to next month's data
            day = 1;
            dayFromEnd = this.nextMonthComps.days;
            weekdayOrdinal = 1;
            weekdayOrdinalFromEnd = Math.floor(((this.nextMonthComps.days - day) / 7) + 1);
            week = 1;
            weekFromEnd = this.nextMonthComps.weeks;
            month = this.nextMonthComps.month;
            year = this.nextMonthComps.year;
          // Still in the middle of the month (hasn't ended yet)
          } else {
            day++;
            dayFromEnd--;
            weekdayOrdinal = Math.floor(((day - 1) / 7) + 1);
            weekdayOrdinalFromEnd = Math.floor(((this.monthComps.days - day) / 7) + 1);
          }
        }
        // Append week days
        weeks.push(days);
        //
        week++;
        weekFromEnd--;
      }
      return weeks;
    },
  },
};
</script>

<style lang='sass' scoped>
 
.c-week
  flex-grow: 1
  display: flex
 
</style>