Pernahkah anda melihat kalendar di laman web dan berfikir pada diri sendiri, "Bagaimana mereka melakukannya?" Adalah semulajadi untuk menggunakan plugin atau bahkan kalendar Google yang tertanam untuk perkara -perkara seperti ini, tetapi sebenarnya, membuat kalendar lebih mudah daripada yang anda fikirkan, hanya tiga musketeers HTML, CSS, dan JavaScript. Mari buat satu bersama!

Saya telah menyediakan demo di CodeSandbox di mana anda dapat melihat sasaran kami.

Semak demo terlebih dahulu, mari kita tentukan beberapa keperluan untuk kalendar. ia sepatutnya:

• Memaparkan grid bulan untuk bulan yang ditentukan
• Menunjukkan tarikh untuk bulan sebelumnya dan bulan depan supaya grid sentiasa lengkap
• Menunjukkan tarikh semasa
• Tunjukkan nama bulan yang sedang dipilih
• Menavigasi ke bulan sebelumnya dan bulan depan
• Benarkan pengguna kembali ke bulan semasa dengan mengklik sekali

Oh, dan kami akan membinanya sebagai aplikasi halaman tunggal untuk mendapatkan tarikh kalendar dari hari.js (perpustakaan utiliti super ringan).

Untuk memudahkan operasi, kami akan mengelakkan memilih rangka kerja tertentu. Untuk persediaan ini, saya menggunakan Parcel untuk Pengurusan Pakej supaya saya boleh menggunakan Babel untuk menulis kod, kod bundle, dan menguruskan satu -satunya kebergantungan dalam projek. Lihat fail Package.json di CodeSandbox untuk maklumat lanjut.

Langkah 1: Mulakan dengan tag asas dan gaya

Mari kita mulakan dengan membuat templat asas untuk kalendar anda. Ini tidak memerlukan apa -apa yang mewah. Tetapi ia juga perlu dilakukan tanpa menggunakan borang tersebut.

Kami boleh menggariskan markup kami sebagai tiga lapisan, yang mengandungi:

• Bahagian tajuk kalendar. Ini akan memaparkan bulan yang dipilih sekarang dan unsur -unsur yang bertanggungjawab untuk penomboran antara bulan.
• Seksyen tajuk grid kalendar. Sekali lagi, kami tidak akan menggunakan jadual, tetapi ia seperti tajuk yang mengandungi senarai hari dalam seminggu.
• Grid kalendar. Anda tahu, setiap hari bulan semasa diwakili oleh persegi di grid.

Mari tulis ini dalam fail yang dipanggil index.js. Ini boleh diletakkan dalam folder SRC dalam folder projek. Kami mempunyai fail index.html dalam direktori root projek untuk mengimport kerja kami, tetapi tag utama akan berada dalam fail JavaScript.

 document.getElementById ("app"). innerHtml = `
<div>
  <div>
    Julai 2020
  </div>

  <div>
    Hari ini
    >
  </div>

  <ol>
    <li>Mon</li>
    …
    <li>Matahari</li>
  </ol>

  <ol>
    <li>
      1
      …
      29
    </li>
  </ol>
</div>
`;

Mari kita teruskan mengimport fail ini ke dalam fail index.html yang terletak di direktori root projek. Tidak ada yang istimewa yang berlaku di sini. Ia hanya boilerplate HTML yang mengandungi elemen yang terletak oleh aplikasi kami dan didaftarkan dengan fail index.js kami.

 

  
    <meta charset="UTF-8">
    <title>Kotak pasir bungkusan</title>
  
  
    <div id="app"></div>
    <script src="./src/index.js"></script>
  

Sekarang kita mempunyai beberapa penanda untuk digunakan, mari kita gaya sedikit supaya kita mempunyai visual yang baik sebagai permulaan. Khususnya, kita akan:

• Unsur kedudukan dengan flexbox
• Buat bingkai kalendar menggunakan grid CSS
• Label kedudukan dalam sel

Pertama, mari buat fail Styles.css baru dalam folder Src yang sama seperti index.js dan masukkannya ke dalamnya:

 / * ... (kod CSS adalah sama seperti di atas) ... */

Bahagian utama menubuhkan grid adalah:

 .day-of-week,
.days-grid {
  / * 7 Lajur yang sama untuk sel -sel hari kerja dan hari */
  paparan: grid;
  Grid-template-lajur: Ulang (7, 1FR);
}

Perhatikan bahawa kedua -dua tajuk grid kalendar dan grid kalendar sendiri dibentangkan menggunakan grid CSS. Kami tahu selalu ada tujuh hari seminggu, jadi ini membolehkan kami membuat tujuh lajur berkadar antara satu sama lain menggunakan fungsi ulangan (). Kami juga mengisytiharkan ketinggian Min 100px pada setiap tarikh kalendar untuk memastikan baris konsisten.

Kita perlu menyambungkan gaya ini dengan tag, jadi mari tambahkannya ke bahagian atas fail index.js:

 import "./styles.css";

Ini adalah titik berhenti yang baik untuk melihat apa yang kita ada setakat ini.

Lihat Demo ### Langkah 2: Tetapkan kalendar bulan semasa

Anda mungkin menyedari bahawa template kini mengandungi hanya data statik. Bulan ini ditodakan pada bulan Julai, dan nombor tarikh juga dikodkan. Di sinilah hari.js bermain. Ia menyediakan semua data yang kita perlukan untuk meletakkan tarikh dengan betul pada tarikh yang betul minggu ini menggunakan data kalendar sebenar. Ia membolehkan kami mendapatkan dan menetapkan apa -apa dari tarikh mula bulan ke semua pilihan format tarikh yang diperlukan untuk memaparkan data.

Kami akan:

• Dapatkan Bulan Semasa
• Hitung di mana tarikh harus diletakkan (hari kerja)
• Hitung tarikh untuk memaparkan bulan sebelumnya dan bulan depan
• Menggabungkan semua tarikh ke dalam pelbagai

Pertama, kita perlu mengimport hari.js dan memadam semua HTML statik (bulan yang dipilih, hari kerja dan tarikh). Kami akan melakukan ini dengan menambahkan ini ke gaya import terus di atas fail index.js:

 Import Dayjs dari "Dayjs";

Kami juga akan bergantung pada plugin hari ini untuk mendapatkan bantuan. Hari minggu membantu kami menetapkan hari pertama dalam seminggu. Sesetengah orang suka membuat hari Ahad hari pertama dalam seminggu. Yang lain lebih suka Isnin. Heck, dalam beberapa kes, masuk akal bermula pada hari Jumaat. Kami akan bermula pada hari Isnin.

Plugin Weekofyear mengembalikan nilai angka minggu semasa tahun ini. Terdapat 52 minggu dalam setahun, jadi kita boleh mengatakan bahawa minggu bermula pada 1 Januari adalah minggu pertama tahun ini, dan sebagainya.

Jadi inilah yang kami tambahkan ke index.js selepas penyata import:

 const hari minggu = memerlukan ("dayjs/plugin/weeknay");
const WeekOfyear = memerlukan ("dayjs/plugin/weekofyear");

dayjs.extend (hari minggu);
dayjs.extend (WeekOfyear);

Sebaik sahaja kita melucutkan nilai kalendar yang dikodkan, inilah yang kita ada setakat ini dalam index.js:

 // ... (kod javascript adalah sama seperti di atas) ...

Sekarang mari kita tetapkan beberapa pemalar. Khususnya, kami ingin membina pelbagai hari dalam seminggu (iaitu Isnin, Selasa, Rabu, dll.):

 // ... (kod javascript adalah sama seperti di atas) ...

Kemudian kami ingin mendapatkan tahun semasa dan menetapkannya dalam format YYYY:

 // ... (kod javascript adalah sama seperti di atas) ...

Kami mahu menetapkan bulan semasa sebagai titik permulaan apabila memuatkan kalendar, di mana f format bulan sebagai nilai angka (mis., Januari sama dengan 1):

 // ... (kod javascript adalah sama seperti di atas) ...

Mari terus mengisi tajuk grid kalendar kami dengan hari -hari dalam seminggu. Pertama, kami mendapat elemen yang betul (#hari-hari-minggu), maka kami melingkari pelbagai hari kerja, buat elemen item senarai untuk setiap item dalam array, dan tetapkan nama setiap item:

 // ... (kod javascript adalah sama seperti di atas) ...

Langkah 3: Buat grid kalendar

Ia sangat mudah, tetapi sekarang keseronokan sebenar bermula kerana kami akan menggunakan grid kalendar sekarang. Mari kita jeda dan berfikir tentang apa yang perlu kita lakukan untuk melakukan ini dengan betul.

Pertama, kami mahu nombor tarikh jatuh dalam lajur hari kerja yang betul. Sebagai contoh, 1 Julai, 2020 adalah Rabu. Di sinilah nombor tarikh harus bermula.

Jika hari pertama sebulan adalah hari Rabu, maka ini bermakna akan ada item grid yang tersedia pada hari Isnin dan Selasa minggu pertama. Hari terakhir bulan ini ialah 31 Julai, Jumaat. Ini bermakna Sabtu dan Ahad minggu lepas akan kosong. Kami mahu mengisi tarikh ini dengan tarikh trailing dan tarikh utama untuk bulan sebelumnya dan bulan depan supaya grid kalendar sentiasa lengkap.

Buat tarikh bulan semasa

Untuk menambah tarikh bulan semasa ke grid, kita perlu tahu berapa hari terdapat pada bulan semasa. Kita boleh menggunakan kaedah DaysInmonth yang disediakan oleh Day.js untuk mendapatkannya. Mari buat kaedah penolong untuk ini.

 // ... (kod javascript adalah sama seperti di atas) ...

Apabila kita tahu ini, kita membuat pelbagai panjang kosong sama dengan bilangan hari dalam bulan semasa. Kami kemudian memetakan () array dan membuat objek tarikh untuk setiap array. Objek yang kami buat mempunyai struktur sewenang -wenangnya, jadi anda boleh menambah sifat tambahan jika anda mahu.

Dalam contoh ini, kita memerlukan harta tarikh yang akan digunakan untuk memeriksa sama ada tarikh tertentu adalah tarikh semasa. Kami juga akan mengembalikan harta Dayofmonth yang bertindak sebagai label (mis. 1, 2, 3, dan lain -lain). ISCurrentMonth menyemak sama ada tarikh itu berada di dalam atau di luar bulan semasa. Jika ia berada di luar bulan semasa, kami akan menggayakannya supaya orang tahu bahawa mereka berada di luar julat bulan semasa.

 // ... (kod javascript adalah sama seperti di atas) ...

Tambahkan tarikh bulan sebelumnya ke grid kalendar

Untuk mendapatkan tarikh bulan sebelumnya untuk dipaparkan pada bulan semasa, kita perlu menyemak hari mana minggu pada hari pertama bulan yang dipilih. Di sinilah kita boleh menggunakan plugin hari minggu untuk hari. Mari buat kaedah penolong untuk ini.

 // ... (kod javascript adalah sama seperti di atas) ...

Kemudian, berdasarkan ini, kita perlu menyemak hari mana hari Isnin terakhir bulan sebelumnya. Kami memerlukan nilai ini untuk mengetahui berapa hari bulan sebelumnya harus dipaparkan dalam paparan bulan semasa. Kita boleh mendapatkannya dengan menolak nilai hari kerja dari hari pertama bulan semasa. Sebagai contoh, jika hari pertama sebulan adalah hari Rabu, kita perlu menolak 3 hari untuk mendapatkan Isnin terakhir bulan sebelumnya. Dengan nilai ini, kita boleh membuat pelbagai objek tarikh bermula dari Isnin lepas bulan sebelumnya dan sepanjang hari ke hari terakhir bulan itu.

 // ... (kod javascript adalah sama seperti di atas) ...

Tambahkan tarikh bulan berikutnya ke grid kalendar

Sekarang, mari kita beralih untuk mengira tarikh yang perlu kita dapatkan dari bulan depan untuk mengisi grid bulan semasa. Nasib baik, kita boleh menggunakan kaedah penolong yang sama yang kita buat untuk pengiraan bulan sebelumnya. Perbezaannya ialah kita akan mengira berapa hari yang perlu dipaparkan pada bulan depan dengan menolak nilai hari kerja dari 7.

Jadi, sebagai contoh, jika hari terakhir sebulan adalah Sabtu, kita perlu menolak 1 hari dari 7 untuk membina array tarikh yang diperlukan dari bulan depan (Ahad).

 // ... (kod javascript adalah sama seperti di atas) ...

OK, kita tahu bagaimana untuk membuat semua hari yang diperlukan, mari kita gunakan kaedah yang baru saja kita buat dan kemudian bergabung semua hari ke dalam satu array yang mengandungi semua hari yang kita ingin paparkan pada bulan semasa, termasuk tarikh padding untuk bulan sebelumnya dan bulan depan.

 // ... (kod javascript adalah sama seperti di atas) ...

Berikut adalah semua yang kami sediakan di index.js:

 // ... (kod javascript adalah sama seperti di atas) ...

Lihat Demo ### Langkah 4: Tunjukkan Tarikh Kalendar

Ok, jadi kami mempunyai penanda asas untuk kalendar, kami perlu memaparkan data untuk tarikh bulan semasa, ditambah dengan tarikh bulan sebelumnya dan bulan depan untuk mengisi item grid kosong. Sekarang kita perlu melampirkan tarikh ke kalendar!

Kami sudah mempunyai bekas untuk grid kalendar #kalendar-hari. Mari dapatkan elemen.

 // ... (kod javascript adalah sama seperti di atas) ...

Sekarang mari kita buat fungsi yang melampirkan tarikh kepada pandangan kalendar.

 // ... (kod javascript adalah sama seperti di atas) ...

Perhatikan bahawa kami sedang menyemak tarikh dari bulan sebelumnya dan bulan depan supaya kami dapat menambah kelas untuk membezakannya dari tarikh bulan semasa:

 // ... (kod CSS adalah sama seperti di atas) ...

Itu sahaja! Kalendar kami kini harus dipaparkan seperti yang kita mahukan.

Lihat Demo ### Langkah 5: Pilih bulan semasa

Apa yang kita ada setakat ini cukup baik, tetapi kita mahu pengguna dapat halaman bulan ke hadapan dan ke belakang, bermula dengan bulan semasa. Kami sudah mempunyai kebanyakan logik, jadi apa yang perlu kita lakukan ialah menambah pendengar klik ke butang paging yang mengubah pengiraan tarikh dan mengecat kalendar dengan data yang dikemas kini.

Sebelum kita mula, mari kita tentukan pembolehubah tarikh untuk bulan semasa, bulan sebelumnya, dan bulan depan supaya kita dapat merujuknya sepanjang kod.

 // ... (kod javascript adalah sama seperti di atas) ...

Sekarang mari kita buat satu kaedah yang akan bertanggungjawab untuk mengira semula tarikh kalendar dan membuat semula kalendar ketika paging ke bulan yang lain. Kami akan memanggil fungsi createCalendar. Kaedah ini akan menerima dua hartanah -tahun dan bulan -dan berdasarkan ini, kalendar akan diserahkan dengan data baru tanpa memuat semula halaman.

Kaedah ini menggantikan kandungan tajuk untuk sentiasa memaparkan label bulan yang dipilih.

 // ... (kod javascript adalah sama seperti di atas) ...

Ia kemudian akan mendapatkan bekas tarikh kalendar dan memadam semua tarikh yang ada.

 // ... (kod javascript adalah sama seperti di atas) ...

Selepas membersihkan kalendar, ia akan mengira tarikh baru yang harus dipaparkan menggunakan kaedah yang kami buat sebelum ini.

 // ... (kod javascript adalah sama seperti di atas) ...

Akhirnya, ia akan melampirkan elemen tarikh setiap hari.

 // ... (kod javascript adalah sama seperti di atas) ...

Terdapat juga bahagian logik yang hilang: kaedah penyingkiran yang membersihkan kalendar sedia ada. Kaedah ini mengambil elemen tarikh kalendar pertama, memadamkannya, dan menggantikannya dengan elemen lain. Dari sana, ia akan melengkapkan logik sehingga semua elemen dipadam.

 // ... (kod javascript adalah sama seperti di atas) ...

Sekarang, apabila kita mahu menukar bulan ini, kita boleh menggunakan semula logik itu. Ingat langkah pertama, apabila kami membuat templat statik untuk komponen. Kami menambah unsur -unsur ini:

 // ... (kod html sama seperti di atas) ...

Ini adalah kawalan untuk penomboran antara bulan. Untuk mengubahnya, kita perlu menyimpan bulan yang dipilih sekarang. Mari buat pembolehubah yang menjejaki apa itu dan tetapkan nilai awalnya pada bulan ini.

 // ... (kod javascript adalah sama seperti di atas) ...

Sekarang, agar pemilih berfungsi, kita memerlukan beberapa JavaScript. Untuk menjadikannya lebih mudah dibaca, kami akan membuat kaedah lain yang dipanggil InitmonthSelectors dan meninggalkan logik di sana. Kaedah ini menambah pendengar acara kepada elemen pemilih. Ia mendengarkan untuk acara klik dan mengemas kini nilai bulan yang dipilih kepada nama bulan yang baru dipilih, dan kemudian menjalankan kaedah createCalendar dengan nilai tahun dan bulan yang betul.

 // ... (kod javascript adalah sama seperti di atas) ...

Itu sahaja! Kalendar kami sudah siap. Walaupun ini bagus, lebih baik jika kita dapat menandakan tarikh semasa supaya ia menonjol dari yang lain. Ini tidak sepatutnya sukar. Kami sudah menetapkan gaya tarikh di luar bulan semasa, jadi mari kita lakukan sesuatu yang serupa.

Kami akan membuat set pemboleh ubah hingga hari ini:

 // ... (kod javascript adalah sama seperti di atas) ...

Kemudian, dalam kaedah AppendDay, apabila kita memohon kelas dengan tarikh di luar bulan semasa, kita perlu menambah cek lain untuk melihat apakah elemen itu adalah tarikh hari ini. Jika ya, kami akan menambah kelas ke elemen:

 // ... (kod javascript adalah sama seperti di atas) ...

Sekarang kita boleh menetapkan gaya!

 // ... (kod CSS adalah sama seperti di atas) ...

Lihat, kami sudah selesai! Lihat demo akhir untuk melihat gabungan segala -galanya.

Lihat demo

Atas ialah kandungan terperinci Cara membuat kalendar bulanan dengan data sebenar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!