WeChat Mini-Programmkalender

Mini-Programmkalender

Gedankenanalyse

Um einen Kalender zu implementieren, müssen Sie zunächst mehrere Werte kennen:
Wie viele Tage hat der Monat? Welcher Tag ist der erste Tag des Monats? Nach dem gesunden Menschenverstand wissen wir, dass ein Monat maximal 31 Tage und mindestens 28 Tage hat. Wenn der Kalender 7 Zeilen hintereinander hat, gibt es 5 Zeilen Am Samstag wird es sechs Startreihen geben.
Das Applet verfügt über kein Konzept für DOM-Operationen und kann daher die Anzahl der leeren Zellen nicht dynamisch in den ersten Tag des Monats einfügen. Einzelheiten finden Sie in der WXML-Datei .
Einführung in die Kalendervorlage

Das Kalendervorlagenfenster unterstützt das Verschieben nach links und rechts
Bietet die Methode „jumpToToday“, um zum heutigen Tag zu springen
Datums-Aufgabenetiketten festlegen setTodoLabels; Aufgabenetiketten für ein bestimmtes Datum löschen deleteTodoLabels
Löschen Sie alle Datums- und To-do-Etiketten. clearTodoLabels; Stellen Sie eine Einführung in die Vorlage bereit
Einführung von wxml und wxss
// example.wxml
<import src="../../template/calendar/index.wxml"/>
<view class="calendar-wrap">
<template is="calendar" data="{{...calendar}}" />
</view>
/* example.wxss */ @import '../../template/calendar/index.wxss';
Initialisierung der Kalenderkomponente
import initCalendar, { getSelectedDay, jumpToToday, setTodoLabels, deleteTodoLabels, clearTodoLabels } from '../../template/calendar/index'; const conf = { onShow: function() { initCalendar({ // multi: true, // Ob Mehrfachauswahl aktiviert werden soll, // deaktivierenPastDay: true, // Ob vergangene Daten deaktiviert werden sollen/*** Ereignisse, die nach der Auswahl eines Datums ausgeführt werden * @param { object } currentSelect Das aktuell angeklickte Datum * @param { array } allSelectedDays Alle ausgewählten Daten (nur wenn mulit true ist, ist der Parameter allSelectedDays verfügbar)*/ afterTapDay: (currentSelect, allSelectedDays) => { console.log('======= = ===================='); console.log('Das aktuelle Klickdatum', currentSelect); date Es gibt Ereignismarkierungen: ', currentSelect.hasTodo || false);
       allSelectedDays && console.log('alle ausgewählten Daten', allSelectedDays);
}, /*** Datum des Klickereignisses (dieses Ereignis übernimmt vollständig das Klickereignis) * @param { object } currentSelect Das Datum des aktuellen Klicks * @param { object } event Datum des Klickereignisobjekts*/ // onTapDay(currentSelect, event) { // console.log(currentSelect); // console.log(event); // }, /*** Ereignisse werden ausgelöst, nachdem die erste Darstellung des Kalenders abgeschlossen ist, z. B. das Setzen von Ereignismarkierungen.*/ afterCalendarRender () { setTodoLabels({
​ ​ ​ pos: 'unten',
          dotColor: '#40',
        Tage: [{
Jahr: 2018,
Monat: 5,
Tag: 12,
           }, {
Jahr: 2018,
Monat: 5,
Tag: 15,
          }],
        });
},
});
}, deleteTodo() { // Geben Sie das Datum an, an dem die Aufgabenbezeichnung gelöscht werden muss deleteTodoLabels([{
Jahr: 2018,
Monat: 5,
Tag: 12,
}, {
Jahr: 2018,
Monat: 5,
Tag: 15,
}]); // clearTodoLabels(); }, /*** Springe zu heute*/ jump() { jumpToToday();
},
}; Seite(conf);