Beispielcode zur Verwendung der Elementkalenderkomponente in Vue

<Vorlage>
  <div Klasse="newSeeds" id="famerCalendar">
    <div Klasse="Titel-unten">
      <el-Datumsauswahl
        :löschbar="falsch"
        Präfix-Symbol = "Zeitfilter"
        v-Modell="Wert2"
        Typ="Monat"
        Platzhalter="Monat auswählen"
        Werteformat="jjjj-MM"
        @change="Änderungsdatum"
      >
      </el-Datumsauswahl>
    </div>
    <div Klasse="calendarBody">
      <el-calendar v-model="Wert">
        <template slot="dateCell" slot-scope="{ Datum, Daten }">
          <div
            @click="Tagwählen(Daten)"
            Klasse="Zelleninfo"
            :Klasse="data.isSelected == true ? 'shadowBox' : ''"
          >
            <ul Klasse="ZellenInfoUl">
              <li v-for="(Element, Index) in ActiveList" :Schlüssel="Index">
                <p v-if="Daten.Tag == Artikel.Zeit" Klasse="ZellInfoUlP">
                  {{ Artikelname }}
                </p>
              </li>
            </ul>
            <div
              v-for="(val, keys, i) in umgekehrter Nachricht"
              :Schlüssel="i"
              :Klasse="data.day == keys ? 'tipMsg' : ''"
            >
              <span v-if="data.day == keys" class="tipMsged">{{ val }}</span>
            </div>
            <div Klasse="ZellenInfoBox">
              <p>{{ Daten.Tag.split("-")[2] }}</p>
            </div>
          </div>
        </Vorlage>
      </el-Kalender>
    </div>
    <!-- Schublade -->
    <el-Schublade
      :title="ZeitWählen"
      :visible.sync="Schublade"
      :direction="Richtung"
    >
      <div Klasse="ModusJeder" v-if="ListeNormal[0]">
        <div Klasse="modeEachs" v-for="(item, index) in listNormal" :key="index">
          <i class="setI el-icon-delete" @click="delTips(item)"></i>
          <i
            Klasse = "setI setIs el-icon-edit-outline"
            @click="Tipps hinzufügen(1, Artikel)"
          ></i>
          <p>
            <span>Startzeit:</span> <span>{{ item.time }}</span>
          </p>
          <p>
            <span>Name der landwirtschaftlichen Aktivität:</span> <span>{{ item.name }}</span>
          </p>
          <p>
            <span>Verantwortliche Person:</span> <span>{{ item.userName }}</span>
          </p>
          <p>
            <span>Anzahl der Teilnehmer:</span> <span>{{ item.people }}</span>
          </p>
          <p>
            <span>Zielspezifikation:</span> <span>{{ item.content }}</span>
          </p>
        </div>
      </div>
      <div Klasse="modeEach modeEached" v-else>
        <div Klasse="leererZustand">
          <img src="../../../assets/leftScreen/math17.png" alt="" />
        </div>
        <p>Für das aktuelle Datum sind keine landwirtschaftlichen Aktivitäten geplant.</p>
        <p>Klicken Sie auf die Schaltfläche „Landwirtschaftliche Aktivität hinzufügen“ in der unteren rechten Ecke, um sie hinzuzufügen! </p>
      </div>
      <div Klasse="FußBox">
        <el-button type="primary" @click="addTips(0)">Landwirtschaftliche Aktivitäten hinzufügen</el-button>
      </div>
    </el-Schublade>
    <!-- Neue Änderungen -->
    <el-dialog
      Titel=""
      :visible.sync="Formular aktualisieren"
      Breite="31vw"
      Klasse="addAlameBox"
    >
      <div slot="Titel" Klasse="Header-Titel" Stil="Position: relativ">
        <span class="Titelname"></span>
        <span class="title-age">{{ boxPrompt }}</span>
        <span
          Stil="
            Position: absolut;
            oben: 50 %;
            transformieren: verschiebeY(-50%);
            rechts: 0px;
            Schriftgröße: 2,22vh;
          "
        >
        </span>
      </div>
      <div Klasse="addAlaForm">
        <el-form
          ref="upTableData"
          :Regeln="Regeln"
          :Modell="upTableData"
          Beschriftungsbreite = "10vw"
        >
          <!-- <el-form-item label="Startzeit" prop="Zeit">
            <div Klasse="Block">
              <el-Datumsauswahl
                v-Modell="upTableData.time"
                Typ="Datum/Uhrzeit"
                Werteformat="jjjj-MM-tt HH:mm:ss"
                Platzhalter="Datum und Uhrzeit auswählen"
              >
              </el-Datumsauswahl>
            </div>
          </el-form-item> -->
          <el-form-item label="Name der landwirtschaftlichen Tätigkeit" prop="Name">
            <el-input v-model="upTableData.name"></el-input>
          </el-form-item>
          <el-form-item label="Verantwortlicher" prop="Benutzername">
            <el-input v-model="upTableData.Benutzername"></el-input>
          </el-form-item>
          <el-form-item label="Anzahl der Teilnehmer" prop="Personen">
            <el-input v-model="upTableData.Personen"></el-input>
          </el-form-item>
          <el-form-item label="Zielspezifikation" prop="content">
            <el-input v-model="upTableData.content"></el-input>
          </el-form-item>
          <el-form-item size="groß">
            <el-Schaltfläche
              Klasse="saveBtn"
              Typ="primär"
              @click="Form speichern('upTableData')"
              >Speichern</el-Schaltfläche
            >
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</Vorlage>
<Skript>
importiere Datumsformat aus "../../../components/dealTime.js";
Standard exportieren {
  Daten() {
    zurückkehren {
      Zeitauswahl: "7-26",
      Sechsen: [],
      Zahl: 0,
      aktiver Tag: 0,
      timeRex: "",
      listParams: {
        Seite: 1,
        Größe: "",
        Wo: "",
        Zeit: "",
      },
      IDs: 0,
      ListeNormal: [],
      aktiveListe: [
        {
          data1: "17.08.2021 15:30",
          data2: "1# Parzellenbewässerung",
          Daten3: „Sonne Guodong“,
          Daten4: "16",
          data5: „Bodenfeuchtigkeit erreicht 40%“,
        },
        {
          data1: "17.08.2021 15:30",
          data2: "1# Parzellenbewässerung",
          Daten3: „Sonne Guodong“,
          Daten4: "16",
          data5: „Bodenfeuchtigkeit erreicht 40%“,
        },
      ],
      updateForm: false,
      boxPrompt: "Neu",
      upTableData: {
        ID: 0,
        Name: "", //Operationsname Zeit: "", //Geplante Zeit Benutzername: "", //Verantwortliche Person Personen: "", //Anzahl der Personen Inhalt: "", //Inhalt},
      Regeln:
        Daten1: [
          { erforderlich: true, Nachricht: "Zeit", Auslöser: ["Unschärfe", "Änderung"] },
        ],
        Daten2: [
          {
            erforderlich: wahr,
            Meldung: „Produktname darf nicht leer sein“,
            Auslöser: ["verwischen", "ändern"],
          },
        ],
        Daten3: {
          erforderlich: wahr,
          Meldung: „Produkttyp darf nicht leer sein“,
          Auslöser: ["verwischen", "ändern"],
        },
        Daten4: {
          erforderlich: wahr,
          Meldung: "Spezifikation darf nicht leer sein",
          Auslöser: ["verwischen", "ändern"],
        },
        Daten5: {
          erforderlich: wahr,
          Meldung: "Die Liefermenge darf nicht leer sein",
          Auslöser: ["verwischen", "ändern"],
        },
      },
      // Schublade: false,
      Richtung: "rtl",
      // Datumswert2: "",
      Wert: neues Datum(),
      wird geladen: falsch,
      LogistikFormular: {
        Name: "",
        Region: -1,
      },
    };
  },

  montiert() {
    dies.requrstLists();
    dies.getNowDate();
    // dies.getActivityCalendar;
  },
  betrachten:
    aktiveListe(neuerWert) {
      this.activeList = neuerWert;
    },
  },
  berechnet: {
    reverseMessage() {
      var arrs = [];
      var countArrs = [];
      dies.activeList.forEach((val) => {
        arrs.push(Wert.Zeit);
      });
      return arrs.reduce(Funktion (vorherige, nächste) {
        vorherige[nächste] = vorherige[nächste] + 1 || 1;
        countArrs.push({ vorherige });
        zurück vorh.;
      }, {});
      // };
    },
  },
  Methoden: {
    // Aktuelle Uhrzeit abrufen getNowDate(){
      var date = neues Datum();
      this.value2 = dateFormat('JJJJ-mm',Datum)
    },
    // Holen Sie sich die Listenschnittstelle async requrstLists() {
      Konstante {
        Daten: {Daten},
      } = warte darauf.$post("product/getProductPlayList", {
        Seite: 1,
        Größe: "",
        Wo: "",
        Zeit: "",
      });
      datas.forEach((val) => {
        wenn (val.time.indexOf(":")) {
          console.log("Speicherplatz gefunden");
          val.time = val.time.split(" ")[0];
        }
      });
      this.activeList = Daten;
      // dies.sortArr()
    },
    asynchrone Anfrageliste () {
      Konstante {
        Daten: {Daten},
      } = warte auf dies.$post("product/getProductPlayList", dies.listParams);
      this.listNormal = Daten;
    },
    // Hinzufügen addTips(val, item) {
      dies.updateForm = wahr;
      wenn (Wert === 0) {
        this.boxPrompt = "Neu";
        dies.upTableData = {
          ID: 0,
          Name: "", //Name des Vorgangs Zeit: "", //Geplante Zeit Benutzername: "", //Verantwortliche Person Personen: "", //Anzahl der Personen Inhalt: "", //Inhalt};
      } sonst wenn (Wert === 1) {
        this.boxPrompt = "Bearbeiten";
        diese.ids = Artikel-ID;
        dies.$nextTick(() => {
          Dies.upTableData = JSON.parse(JSON.stringify(item));
        });
      }
    },
    //Speichern saveForm() {
      let url = "/Produkt/EditProductPlay";
      wenn (this.boxPrompt == "Neu") {
        diese.upTableData.id = 0;
      } sonst wenn (this.boxPrompt == "Bearbeiten") {
        diese.upTableData.id = diese.ids;
      }
      this.upTableData.time = this.timeChoose + "00:00:00";
      dies.$refs["upTableData"].validate((gültig) => {
        if (gültig) {
          dies.$get(url, dies.upTableData).then((res) => {
            this.updateForm = falsch;
            wenn (res.data.state == "Erfolg") {
              diese.requrstList();
              dies.requrstLists();
              this.$message.success("Vorgang erfolgreich");
            } anders {
              this.$message.error("Vorgang fehlgeschlagen! Bitte versuchen Sie es später erneut!");
            }
          });
        } anders {
          console.log("Fehler beim Senden!!");
          gibt false zurück;
        }
      });
    },
    wähleTag(Daten) {
      dies.$nextTick(() => {
        wenn (Datentyp === "aktueller Monat") {
          diese.Schublade = wahr;
          diese.listParams.time = Daten.Tag;
          diese.Zeitauswahl = Daten.Tag;
          diese.requrstList();
        } sonst wenn (data.type === "vorheriger Monat") {
          dies.prevBtn.click();
        } sonst wenn (data.type === "nächster-Monat") {
          dies.nextBtn.click();
        }
      });
    },

    // SchubladengriffSchließen(erledigt) {
      this.$confirm("Schließen bestätigen?")
        .then((res) => {
          Erledigt();
          dies.requrstLists();
        })
        .catch((err) => {});
    },
    // Löschen delTips(val) {
      konsole.log(Wert);
      this.$confirm("Dieser Vorgang löscht die Datei unwiderruflich. Möchten Sie fortfahren?", "Prompt", {
        confirmButtonText: "Bestätigen",
        cancelButtonText: "Abbrechen",
        Typ: "Warnung",
      })
        .then(() => {
          dies.$post("/product/deteleProductPlay", { id: val.id }).dann(
            (res) => {
              wenn (res.data.state == "Erfolg") {
                this.$message.success("Erfolgreich gelöscht");
                diese.requrstList();
                dies.requrstLists();
              } anders {
                dies.$message(res.data.msg);
              }
            }
          );
        })
        .fangen(() => {
          diese.$nachricht({
            Typ: "info",
            Nachricht: "Gelöscht",
          });
        });
    },

    //Zeitauswahl changeDate(val) {
      dieser.Wert = Wert;
    },
    //Aktualisieren refresh() {
      dies.laden = wahr;
      // diese.requrstList();
    },
    //Suchesearch() {
      let name = diese.logisticsForm.name;
      let level = diese.logisticsForm.region;
      wenn (Ebene == -1) Ebene = "";
      dies.laden = wahr;
      // diese.requrstList(Name, Ebene);
    },
    //Reset removeForm() {
      this.logisticsForm.name = "";
      diese.logisticsForm.region = -1;
      // diese.requrstList();
    },
  },
};
</Skript>

<style scoped lang="weniger">
@import "../../../style/backTable.less";
</Stil>
  <style scoped lang="weniger">
#famerCalendar /deep/ .el-calendar-table {
  Breite: 100 %;
  Höhe: 100%;
  &:nicht(.is-range) {
    // Daten, die nicht in diesem Monat liegen, nicht anklickbar machen und nicht in andere Monate springen lassen td.next {
      Zeigerereignisse: keine;
    }
    td.vorher {
      Zeigerereignisse: keine;
    }
  }
}

.calendarBody {
  Breite: 100 %;
  Höhe: 81vh;
}
#famerCalendar .newSeeds {
  Höhe: 90vh;
}
#famerCalendar /deep/ .el-calendar__header {
  Inhalt ausrichten: Abstand dazwischen;
  Polsterung: 12px 20px;
  Rand: keiner;
  Textausrichtung: zentriert;
  Hintergrund: #00284d;
  Anzeige: Block;
}
#famerCalendar /deep/ .el-button-group {
  Anzeige: keine;
}
#famerCalendar /deep/ .el-calendar__title {
  Farbe: #fff;
  selbst ausrichten: zentrieren;
  Zeilenhöhe: 3vh;
}
#famerCalendar /deep/ .el-calendar-table thead th:nth-of-type(2n) {
  Hintergrund: #5c768d;
  Farbe: #fff;
  Polsterung: 1vh 0;
}
#famerCalendar /deep/ .el-calendar-table thead th:nth-of-type(2n + 1) {
  Hintergrund: #335371;
  Farbe: #fff;
  Polsterung: 1vh 0;
}
#famerCalendar /deep/ .el-calendar__body {
  Polsterung: 0;
}
#famerCalendar .title-bottom /deep/ .el-input--prefix .el-input__inner {
  Polsterung links: 3vw;
  Breite: 75 %;
  /* Höhe: 4vh;
    Zeilenhöhe: 4vh; */
}
#famerCalendar /deep/ .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  Breite: 10vw;
}
#famerCalendar .timeFilter {
  Position: relativ;
}
#famerCalendar /deep/ .el-calendar-table td {
  Textausrichtung: rechts;
}
#famerCalendar /deep/ .el-calendar-table .el-calendar-day {
  Box-Größe: Rahmenbox;
  // Polsterung: 1vh;
  Polsterung: 0;
  Höhe: 11,5vh;
}
#famerCalendar /deep/ .el-calendar-table .el-calendar-day > p {
  Box-Größe: Rahmenbox;
  Polsterung: 1vh;
}
#famerCalendar /deep/ .timeFilter:after {
  Mindestbreite: 2vw;
  Leerzeichen: Nowrap;
  Inhalt: "Datum";
  Rahmen rechts: 1px durchgezogen #c0c4cc;
  Polsterung: 0 0,2vw;
  Box-Größe: Rahmenbox;
  /* Zeilenhöhe: 4vh; */
}
#famerCalendar /deep/ .el-drawer__open .el-drawer.rtl:focus-visible {
  Rand: keiner;
}
#famerCalendar /deep/ .el-drawer__header:focus-visible {
  Rand: keiner;
}
.cellInfoUl {
  Breite: 80%;
  Höhe: 100%;
  Überlauf: versteckt;
  Überlauf-y: scrollen;
}
.cellInfoUl::-webkit-scrollbar {
  Anzeige: keine;
}
.cellInfo {
  Position: relativ;
  Breite: 100 %;
  Höhe: 100%;
  Anzeige: Flex;
  Inhalt ausrichten: Abstand dazwischen;
  Polsterung: 1vh;
  Box-Größe: Rahmenbox;
}
.tipMsg {
  Position: absolut;
  Anzeige: Flex;
  rechts: 0vh;
  unten: 0vh;
  Breite: 2vw;
  Höhe: 2vw;
  Farbe: #fff;
}
.tipMsged {
  Position: absolut;
  oben: 50 %;
  links: 50%;
  Z-Index: 100;
  transformieren: übersetzen (-10 %, -20 %);
}
.tipMsg::vor {
  Inhalt: "";
  Position: absolut;
  oben: 0;
  links: 0;
  Höhe: 0px;
  Breite: 0px;
  Rand oben: durchgehend 2vw transparent;
  Rand links: durchgezogen 2vw #3999e6;
  transformieren: drehenZ(-90 Grad);
}
.cellInfoUl li {
  Breite: 100 %;
  Zeilenhöhe: 2,5vh;
  Farbe: #fff;
  Hintergrund: #61adeb;
  Rand unten: 1vh;
  Polsterung: 0 0,5vw;
  Box-Größe: Rahmenbox;
  Rahmenradius: 16px;
  Textausrichtung: zentriert;
}
.cellInfoBox {
  Textausrichtung: zentriert;
  /* Farbe: #; */
}
.modeEach {
  Breite: 100 %;
  Polsterung: 2vh 1vw;
  Box-Größe: Rahmenbox;
  Höhe: 78vh;
  Überlauf: versteckt;
  Überlauf-y: scrollen;
}
.modeEach::-webkit-scrollbar {
  Anzeige: keine;
}
.FußBox {
  Breite: 100 %;
  Polsterung: 2vh 1vw;
  Box-Größe: Rahmenbox;
}
.modeEachs {
  Breite: 100 %;
  Mindesthöhe: 18vh;
  Hintergrund: #3999e6;
  Rahmenradius: 6px;
  Polsterung: 2vh 1vw;
  Box-Größe: Rahmenbox;
  Position: relativ;
  Rand unten: 1vh;
}
.setI {
  Position: absolut;
  oben: 1vh;
  rechts: 0,5vw;
  Hintergrund: #fff;
  Breite: 2,5vh;
  Höhe: 2,5vh;
  Randradius: 50 %;
  Textausrichtung: zentriert;
  Zeilenhöhe: 2,5vh;
  Farbe: rot;
}
.setIs {
  oben: 1vh;
  rechts: 2vw;
  Farbe: #3999e6;
}
.modeEachs span {
  Schriftgröße: 1,3vh;
  Schriftfamilie: Source Han Sans CN;
  Schriftstärke: 400;
  Farbe: #ffffff;
  Zeilenhöhe: 2,78vh;
}
.modeEachs span:n-ter-Typ(1) {
  Mindestbreite: 3vw;
  Anzeige: Inline-Block;
}
.FußBox {
  Textausrichtung: rechts;
}
.emptyState {
  Breite: 100 %;
  Höhe: 60%;
  Textausrichtung: zentriert;
}
.emptyState img {
  Breite: 80%;
  Mindesthöhe: 100 %;
}
.modeEached {
  Textausrichtung: zentriert;
}
.modeEached p {
  Schriftgröße: 1,67vh;
  Schriftfamilie: Source Han Sans CN;
  Schriftstärke: 400;
  Farbe: #666666;
  Zeilenhöhe: 2,78vh;
}
.shadowBox {
  Kastenschatten: 0px 0px 15px 3px rgba (0, 0, 0, 0,15);
  Polsterung: 1vh;
  Box-Größe: Rahmenbox;
}
</Stil>