Vue.js implementiert Kalenderfunktion

{
  "Code": 200,
  "Nachricht": "",
  "Daten": [{
      "Zeit": "01.08.2020",
      "kqzl": "Ausgezeichnet"
    },
    {
      "Zeit": "02.08.2020",
      "kqzl": "gut"
    },
    {
      "Zeit": "03.08.2020",
      "kqzl": "gut"
    }
  ]
}

<Vorlage>
  <div id="app">
    <h1 Stil="Textausrichtung:Mitte;">
      2020-08</h1>
    <div Klasse="Kalender-Container">
      <div Klasse="Kalenderwoche">
        <div Klasse="cw-inner">
          <div Klasse="cw-Artikel"
               :Stil="{Breite: setItemWidth}"
               v-for="(Element, Index) der Woche"
               :Schlüssel="index">
            {{Artikel}}
          </div>
        </div>
      </div>
      <div Klasse="Kalendertag">
        <div Klasse="cd-Liste"
             v-for="(Element, Index) des Tages"
             :Schlüssel="index">
          <div Klasse="cl-Artikel"
               :Stil="{Breite: setItemWidth}"
               v-for="(Kind,Index) des Elements"
               :Schlüssel="Index"
               :Klasse="[{hat: Kind}]">
            <div Klasse="ci-inner"
                 v-if="Kind">
              <span>{{child.date}}</span>
              <span v-if="Kind.Text"
                    Klasse="aqi"
                    :Klasse="Kind.text.kqzl">
                {{child.text.kqzl}}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</Vorlage>

<Skript>
importiere kqzlData aus './assets/data.json' // Luftqualitätsdaten exportieren Standard {
  Name: "App",
  Daten() {
    zurückkehren {
      Woche: [
        'Montag',
        'Dienstag',
        'Mittwoch',
        'Donnerstag',
        'Freitag',
        'Samstag',
        'Sonntag',
      ],
      Tag: [],
    }
  },
  berechnet: {
    setItemWidth() {
      return 100 / 7 + '%'
    },
  },
  montiert() {
    dies.createCalendar(2020, 8)
  },
  Methoden: {
    /**
     * @name: Datum formatieren * @param {Datum}
     */
    DatumsFormat(Datum) {
      let dateArr = date.split('-')
      let mounth = dateArr[1] >= 10 ? dateArr[1] : '0' + dateArr[1]
      let Tag = DatumAnkunft[2] >= 10 ? DatumAnkunft[2] : '0' + DatumAnkunft[2]
      RückgabedatumAn[0] + '-' + Monat + '-' + Tag
    },

    /**
     * @name: Datumsinformationen * @param {date}
     */
    getDayInfo(Datum) {
      sei kqzl = kqzlData.data
      let formatDate = this.dateFormat(Datum)
      let txt = kqzl[kqzl.findIndex(item => item.time === formatDate)]
      txt zurückgeben
    },

    /**
     * @name: Kalendertabelle generieren * @param {year}
     * @param {mounth}
     */
    createCalendar(Jahr, Monat) {
      // Wie viele Tage hat ein Monat? let allDay = new Date(year, mounth, 0).getDate()
      // Welcher Wochentag ist der 1. eines Monats? let firstDay = this.judjeFirstDay(year, mounth)
      // Wie viele Zeilen müssen angezeigt werden? let row = Math.ceil((allDay + firstDay) / 7)
      sei k = ersterTag - 1
      let ergebnis = []
      lass count = 1
      // Zweidimensionales Kalender-Array generieren für (let i = 0; i < row; i++) {
        Ergebnis[i] = neues Array(7)
        Tun {
          wenn (Anzahl <= allerTag) {
            Ergebnis[i][k] = {
              Datum: Anzahl,
              // Ordnen Sie die dem Datum entsprechenden Informationen gemäß dem Schnittstellentext zu: this.getDayInfo(year + '-' + mounth + '-' + count),
            }
            k++
            zählen++
          } anders {
            brechen
          }
        } während (k < 7)
        k = 0
      }
      dieser.tag = Ergebnis
    },

    /**
     * @name: Bestimmen Sie, welcher Wochentag der 1. eines bestimmten Monats ist* @param {year}
     * @param {mounth}
     */
    judjeFirstDay(Jahr, Monat) {
      let date = neues Datum (Jahr, Monat – 1, 1)
      lass Woche = Datum.getDay()
      sei weekArr = [1, 2, 3, 4, 5, 6, 7]
      Rückreise WocheAn[Woche - 1]
    },
  },
}
</Skript>

<style lang="scss">
.Kalender-Container {
  Textausrichtung: zentriert;
  .Kalenderwoche {
    Rand unten: 4px;
    Polsterung: 0 4px;
    Farbe: #fff;
    .cw-inner {
      Überlauf: versteckt;
      Hintergrund: #a0a0a0;
      .cw-Artikel {
        schweben: links;
        Polsterung: 8px 0;
      }
    }
  }
  .Kalendertag {
    .cd-Liste {
      Überlauf: versteckt;
      .cl-Artikel {
        schweben: links;
        Mindesthöhe: 30px;
        Box-Größe: Rahmenbox;
        Polsterung: 4px;
        .ci-inner {
          Hintergrund: #f5f5f5;
          Polsterung: 8px 0;
          Spanne {
            Anzeige: Inline-Block;
            &.aqi {
              Farbe: #fff;
              Hintergrund: #a7cf8c;
              Polsterung: 0 4px;
              Rahmenradius: 4px;
            }
            &.exzellent{
              Hintergrund: #a7cf8c;
            }
            &.Gut{
              Hintergrund: #f7da64;
            }
            &. Leicht {
              Hintergrund: #f29e39;
            }
            &.Mäßig
              Hintergrund: #da555d;
            }
            &.Schwer
              Hintergrund: #b9377a;
            }
            &.ernst{
              Hintergrund: #881326;
            }
          }
        }
      }
    }
  }
}
</Stil>