Kalendar Program Mini WeChat

Kalendar Program Mini

Analisis pemikiran

Untuk melaksanakan kalendar, anda perlu mengetahui beberapa nilai dahulu:
Ada berapa hari dalam sebulan
Hari apa hari pertama dalam bulan
Mengikut akal, kita tahu bahawa satu bulan mempunyai maksimum 31 hari dan minimum 28 hari Jika kalendar mempunyai 7 grid berturut-turut, akan ada 5 baris Namun, jika hari pertama bulan itu adalah Sabtu, akan ada enam baris grid.
Applet tidak mempunyai konsep operasi DOM, jadi ia tidak boleh memasukkan bilangan sel kosong secara dinamik ke dalam hari pertama bulan Ia hanya boleh dikawal dengan menambah gelung sel kosong di hadapan Untuk butiran, rujuk fail wxml .
Pengenalan templat kalendar

Panel templat kalendar menyokong gerak isyarat gelongsor ke kiri dan kanan
Menyediakan kaedah jumpToday untuk melompat ke hari ini
Tetapkan label tarikh tugasan setTodoLabels
Padamkan label tugasan untuk tarikh tertentu deleteTodoLabels
Kosongkan semua label tugasan tarikh clearTodoLabels
Sediakan pengenalan templat templat
Memperkenalkan wxml dan wxss
// example.wxml
<import src="../../template/calendar/index.wxml"/>
<lihat class="calendar-wrap">
<template is="calendar" data="{{...calendar}}" />
</lihat>
/* contoh.wxss */ @import '../../template/calendar/index.wxss';
Inisialisasi komponen kalendar
import initCalendar, { getSelectedDay, jumpToToday, setTodoLabels, deleteTodoLabels, clearTodoLabels } daripada '../../template/calendar/index'; Sama ada untuk mendayakan berbilang pilihan, // disablePastDay: true, // Sama ada untuk melumpuhkan tarikh lalu/*** Peristiwa dilaksanakan selepas memilih tarikh * @param { object } currentSelect Tarikh yang diklik semasa * @param { array } allSelectedDays Semua tarikh yang dipilih (hanya apabila mulit adalah benar, parameter allSelectedDays tersedia)*/ afterTapDay: (currentSelect, allSelectedDays) => { console.log('======= = ====================================='); console.log('Tarikh klik semasa', currentSelect); tarikh Terdapat penanda acara: ', currentSelect.hasTodo || false);
       allSelectedDays && console.log('semua tarikh yang dipilih', allSelectedDays.log('getSelectedDay method', getSelectedDay());
}, /*** Tarikh klik peristiwa (acara ini akan mengambil alih sepenuhnya peristiwa klik) * @param { objek } semasaPilih tarikh klik semasa * @param { objek } acara Tarikh klik objek acara*/ // onTapDay(currentSelect, event) { // console.log(currentSelect); // console.log(event); () { setTodoLabels({
​ ​ pos: 'bawah',
          titikWarna: '#40',
        hari: [{
Tahun: 2018,
bulan: 5,
hari: 12,
           }, {
Tahun: 2018,
bulan: 5,
hari: 15,
          }],
        });
},
});
}, deleteTodo() { // Nyatakan tarikh apabila label tugasan perlu dipadamkan deleteTodoLabels([{
Tahun: 2018,
bulan: 5,
Hari: 12,
}, {
Tahun: 2018,
bulan: 5,
Hari: 15,
}]); // clearTodoLabels(); }, /*** Lompat ke hari ini*/ jump() { jumpToday();
},
}; Halaman(conf);