chenhaodong / mew-iview

  <template>

      <div :class="classes">

          <div :class="[prefixCls + '-header']">

              <span v-for="day in headerDays" :key="day">
                  {{day}}
              </span>

          </div>

          <span
                  :class="getCellCls(cell)"

                  v-for="(cell, i) in readCells"
                  :key="String(cell.date) + i"

                  @click="handleClick(cell)"
                  @mouseenter="handleMouseMove(cell)"
          >

              <em>{{ cell.desc }}</em>

          </span>

      </div>

  </template>
  <script>

      import { clearHours, isInRange } from '../util';

      import Locale from '../../../mixins/locale';

      import jsCalendar from 'js-calendar';

      import mixin from './mixin';
      import prefixCls from './prefixCls';

      export default {

          mixins: [ Locale, mixin ],
  

          props: {

              /* more props in mixin */

              showWeekNumbers: {
                  type: Boolean,
                  default: false
              },

          },

          data () {

              const weekStartDay = Number(this.t('i.datepicker.weekStartDay'));

              return {

                  prefixCls: prefixCls,

                  calendar: new jsCalendar.Generator({onlyDays: !this.showWeekNumbers, weekStart: weekStartDay})

              };

          },

          computed: {
              classes () {
                  return [

                      `${prefixCls}`,
                      {
                          [`${prefixCls}-show-week-numbers`]: this.showWeekNumbers
                      }

                  ];

              },

              headerDays () {
                  const weekStartDay = Number(this.t('i.datepicker.weekStartDay'));
                  const translatedDays = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'].map(item => {
                      return this.t('i.datepicker.weeks.' + item);

                  });

                  const weekDays = translatedDays.splice(weekStartDay, 7 - weekStartDay).concat(translatedDays.splice(0, weekStartDay));

                  return this.showWeekNumbers ? [''].concat(weekDays) : weekDays;

              },

              readCells () {
                  const tableYear = this.tableDate.getFullYear();
                  const tableMonth = this.tableDate.getMonth();

                  const today = clearHours(new Date());    // timestamp of today

                  const selectedDays = this.dates.filter(Boolean).map(clearHours);    // timestamp of selected days
                  const [minDay, maxDay] = this.dates.map(clearHours);
                  const rangeStart = this.rangeState.from && clearHours(this.rangeState.from);
                  const rangeEnd = this.rangeState.to && clearHours(this.rangeState.to);

                  const isRange = this.selectionMode === 'range';
                  const disabledTestFn = typeof this.disabledDate === 'function' && this.disabledDate;

                  return this.calendar(tableYear, tableMonth, (cell) => {
                      const time = cell.date && clearHours(cell.date);

                      const dateIsInCurrentMonth = cell.date && tableMonth === cell.date.getMonth();

                      return {
                          ...cell,
                          type: time === today ? 'today' : cell.type,

                          selected: dateIsInCurrentMonth && selectedDays.includes(time),

                          disabled: (cell.date && disabledTestFn) && disabledTestFn(new Date(time)),

                          range: dateIsInCurrentMonth && isRange && isInRange(time, rangeStart, rangeEnd),
                          start: dateIsInCurrentMonth && isRange && time === minDay,
                          end: dateIsInCurrentMonth && isRange && time === maxDay

                      };

                  }).cells.slice(this.showWeekNumbers ? 8 : 0);

              }

          },

          methods: {

              getCellCls (cell) {
                  return [
                      `${prefixCls}-cell`,
                      {

                          [`${prefixCls}-cell-selected`]: cell.selected || cell.start || cell.end,

                          [`${prefixCls}-cell-disabled`]: cell.disabled,
                          [`${prefixCls}-cell-today`]: cell.type === 'today',

                          [`${prefixCls}-cell-prev-month`]: cell.type === 'prevMonth',
                          [`${prefixCls}-cell-next-month`]: cell.type === 'nextMonth',
                          [`${prefixCls}-cell-week-label`]: cell.type === 'weekLabel',

                          [`${prefixCls}-cell-range`]: cell.range && !cell.start && !cell.end

                      }

                  ];

              },
  

          }

      };
  </script>