Calendrier-programme WeChat Mini

Mini calendrier du programme

Analyse de pensée

Pour mettre en place un calendrier, vous devez d'abord connaître plusieurs valeurs :
Combien de jours y a-t-il dans le mois
Quel est le premier jour du mois
Selon le bon sens, on sait qu'un mois compte au maximum 31 jours et au minimum 28 jours. Si le calendrier comporte 7 grilles d'affilée, il y aura 5 lignes. Par contre, si le premier jour du mois est un. Samedi, il y aura six rangées de grilles.
L'applet n'a aucun concept d'opérations DOM, elle ne peut donc pas insérer dynamiquement le nombre de cellules vides dans le premier jour du mois. Elle ne peut être contrôlée qu'en ajoutant une boucle de cellules vides devant. Veuillez vous référer au fichier wxml pour plus de détails. .
Introduction au modèle de calendrier

Le panneau de modèle de calendrier prend en charge les gestes coulissants vers la gauche et la droite ; Fournit la méthode jumpToToday pour accéder à aujourd'hui ; Définir les étiquettes de tâches à faire setTodoLabels ; Supprimer les étiquettes de tâches pour une date spécifiée deleteTodoLabels ; Effacer toutes les étiquettes de tâches à faire clearTodoLabels ; Fournir une introduction au modèle de modèle
Présentez wxml et wxss
// exemple.wxml
<import src="../../template/calendar/index.wxml"/>
<view class="calendar-wrap">
<template is="calendar" data="{{...calendar}}" />
</vue>
/* exemple.wxss */ @import '../../template/calendar/index.wxss';
Initialisation des composants du calendrier
import initCalendar, { getSelectedDay, jumpToToday, setTodoLabels, deleteTodoLabels, clearTodoLabels } from '../../template/calendar/index'; const conf = { onShow : function() { initCalendar({ // multi : true, // S'il faut activer la sélection multiple, // désactiverPastDay : true, // S'il faut désactiver les dates passées/*** Événements exécutés après la sélection d'une date * @param { object } currentSelect La date actuellement cliquée * @param { array } allSelectedDays Toutes les dates sélectionnées (uniquement lorsque mulit est vrai, le paramètre allSelectedDays est disponible)*/ afterTapDay : (currentSelect, allSelectedDays) => console.log('======= = ======================='); console.log('La date du clic actuel', currentSelect console.log('Est le clic actuel); date Il existe des marqueurs d'événement : ', currentSelect.hasTodo || false);
       allSelectedDays && console.log('toutes les dates sélectionnées', allSelectedDays); console.log('méthode getSelectedDay', getSelectedDay());
}, /*** Événement de clic de date (cet événement prendra complètement le relais de l'événement de clic) * @param { object } currentSelect La date du clic en cours * @param { object } event Objet d'événement de clic de date*/ // onTapDay(currentSelect, event) { // console.log(currentSelect); // console.log(event); () { setTodoLabels({
            pos : 'en bas',
          dotColor : '#40',
        jours : [{
Année : 2018,
mois : 5,
jour: 12,
           }, {
Année : 2018,
mois : 5,
jour: 15,
          }],
        });
},
});
}, deleteTodo() { // Spécifiez la date à laquelle l'étiquette de tâche doit être supprimée deleteTodoLabels([{
Année : 2018,
mois : 5,
Jour: 12,
}, {
Année : 2018,
mois : 5,
Jour: 15,
}]); // clearTodoLabels(); }, /*** Aller à aujourd'hui*/ jump() { jumpToToday();
},
};Page(conf);