Vuetify - Full color in event date

VDatePickerDateTableFullEvent.ts

import VDatePickerDateTable from 'vuetify/lib/components/VDatePicker/VDatePickerDateTable';
import { pad } from 'vuetify/lib/components/VDatePicker/util';
import { DatePickerFormatter } from 'vuetify/lib/components/VDatePicker/util/createNativeLocaleFormatter';
import isDateAllowed from 'vuetify/lib/components/VDatePicker/util/isDateAllowed';

export default VDatePickerDateTable.extend({
  name: 'v-date-picker-date-table-full-name',
  methods: {
    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
    genTBody() {
      const children = [];
      const daysInMonth = new Date(this.displayedYear, this.displayedMonth + 1, 0).getDate();
      let rows = [];
      let day = this.weekDaysBeforeFirstDayOfTheMonth();
      let weekNumber = this.getWeekNumber();

      // eslint-disable-next-line no-unused-expressions,no-plusplus
      this.showWeek && rows.push(this.genWeekNumber(weekNumber++));

      // eslint-disable-next-line no-plusplus
      while (day--) rows.push(this.$createElement('td'));
      // eslint-disable-next-line no-plusplus
      for (day = 1; day <= daysInMonth; day++) {
        const date = `${this.displayedYear}-${pad(this.displayedMonth + 1)}-${pad(day)}`;

        rows.push(this.$createElement('td', [this.genButtonFullEvent(date, true, 'date', this.formatter)]));

        if (rows.length % (this.showWeek ? 8 : 7) === 0) {
          children.push(this.genTR(rows));
          rows = [];
          // eslint-disable-next-line no-plusplus,no-unused-expressions
          day < daysInMonth && this.showWeek && rows.push(this.genWeekNumber(weekNumber++));
        }
      }

      if (rows.length) {
        children.push(this.genTR(rows));
      }

      return this.$createElement('tbody', children);
    },
    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
    genButtonClassesFullEvent(isAllowed: boolean, isFloating: boolean, isSelected: boolean, isCurrent: boolean, eventColors) {
      const eventClasses = {};

      if (eventColors.length > 0) {
        // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
        eventColors.map((eventColor: string) => {
          return Object.assign(eventClasses, { [eventColor]: true });
        });
      }

      const classesInitial = {
        'v-btn--active': isSelected,
        'v-btn--flat': !isSelected,
        'v-btn--icon': isSelected && isAllowed && isFloating,
        'v-btn--floating': isFloating,
        'v-btn--depressed': !isFloating && isSelected,
        'v-btn--disabled': !isAllowed || (this.disabled && isSelected),
        'v-btn--outline': isCurrent && !isSelected,
        ...this.themeClasses
      };

      return Object.assign(classesInitial, eventClasses);
    },
    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
    genButtonFullEvent(value: string, isFloating: boolean, mouseEventType: string, formatter: DatePickerFormatter) {
      const eventColors = this.getEventColors(value);
      const isAllowed = isDateAllowed(value, this.min, this.max, this.allowedDates);
      const isSelected = value === this.value || (Array.isArray(this.value) && this.value.indexOf(value) !== -1);
      const isCurrent = value === this.current;
      const setColor = isSelected ? this.setBackgroundColor : this.setTextColor;
      const color = (isSelected || isCurrent) && (this.color || 'accent');

      return this.$createElement(
        'button',
        setColor(color, {
          staticClass: 'v-btn',
          class: this.genButtonClassesFullEvent(isAllowed, isFloating, isSelected, isCurrent, eventColors),
          attrs: {
            type: 'button'
          },
          domProps: {
            disabled: this.disabled || !isAllowed
          },
          on: this.genButtonEvents(value, isAllowed, mouseEventType)
        }),
        [
          this.$createElement(
            'div',
            {
              staticClass: 'v-btn__content'
            },
            [formatter(value)]
          )
        ]
      );
    }
  }
});

VDatePickerFullEvent.ts

import VDatePicker from 'vuetify/lib/components/VDatePicker/VDatePicker';
import { pad } from 'vuetify/lib/components/VDatePicker/util';
import VDatePickerDateTableFullEvent from '@/components/vuetify/VDatePickerDateTableFullEvent';

export default VDatePicker.extend({
  name: 'v-date-picker-full-name',
  methods: {
    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
    genDateTable() {
      return this.$createElement(VDatePickerDateTableFullEvent, {
        props: {
          allowedDates: this.allowedDates,
          color: this.color,
          current: this.current,
          dark: this.dark,
          disabled: this.disabled,
          events: this.events,
          eventColor: this.eventColor,
          firstDayOfWeek: this.firstDayOfWeek,
          format: this.dayFormat,
          light: this.light,
          locale: this.locale,
          min: this.min,
          max: this.max,
          readonly: this.readonly,
          scrollable: this.scrollable,
          showWeek: this.showWeek,
          tableDate: `${pad(this.tableYear, 4)}-${pad(this.tableMonth + 1)}`,
          value: this.value,
          weekdayFormat: this.weekdayFormat
        },
        ref: 'table',
        on: {
          input: this.dateClick,
          // eslint-disable-next-line no-return-assign,@typescript-eslint/explicit-function-return-type
          tableDate: (value: string) => (this.tableDate = value),
          // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
          'click:date': (value: string) => this.$emit('click:date', value),
          // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
          'dblclick:date': (value: string) => this.$emit('dblclick:date', value)
        }
      });
    }
  }
});