Cara Saya Mencipta Vanilla Calendar Pro — Kalendar JavaScript Ringan dan Fleksibel dengan TypeScript

Helo, Komuniti Dev!

Sejujurnya, saya teragak-agak lama sebelum menulis artikel ini. Saya faham bahawa mungkin terdapat ulasan yang mengatakan, "Hanya satu lagi pemetik tarikh yang tidak perlu." Tetapi hari ini, dengan Vanilla Calendar Pro memperoleh lebih 480 bintang di GitHub dan menerima 17,000 muat turun sebulan , saya memutuskan untuk berkongsi cerita saya.

Biar saya jelaskan terlebih dahulu: Saya tidak mendakwa sebagai pembangun kalendar atau pemetik tarikh terbaik. Artikel ini adalah mengenai pengalaman pertama saya dengan sumber terbuka, cara saya mencipta projek dari awal dan cara ia menjadi berguna kepada pembangun lain.

---

Bagaimana Ia Bermula

Pada musim panas 2022, saya perlu melaksanakan kalendar acara untuk projek. Syaratnya mudah sahaja:

• Ia perlu berfungsi dengan lancar dalam tetingkap modal.
• Ia perlu menyokong penggayaan tersuai agar sepadan dengan reka bentuk.
• Mengklik tarikh akan mengubah hala pengguna ke halaman acara.

Pada pandangan pertama, ia kelihatan seperti tugas yang mudah. Tetapi saya tidak dapat mencari penyelesaian yang sesuai. Kebanyakan kalendar sedia ada sama ada kekurangan ciri yang diperlukan atau terlalu besar, dengan gaya yang sukar disesuaikan dengan reka bentuk projek.

Sudah tentu, saya boleh meminta pereka bentuk untuk memudahkan reka letak atau hanya menerima isu pemformatan kecil. Tetapi secara jujur, saya tertarik: Bagaimana jika saya membina kalendar saya sendiri?

Begitulah versi pertama Vanilla Calendar Pro dilahirkan. Istilah "Vanila" merujuk kepada JavaScript asli, bebas daripada kebergantungan luaran. Untuk memudahkan penyepaduan ke dalam projek lain, saya menulis README dengan dokumentasi dan contoh API serta menerbitkannya di NPM.

---

Pengguna Pertama — Dan Bintang Pertama

Tidak lama kemudian, saya menerima pemberitahuan tentang isu pertama dalam repositori. Ia datang daripada pembangun di Norway, yang bertanya soalan yang tidak dijangka:

"Adakah anda mempunyai rancangan untuk menambah nombor minggu pada kalendar? Di Norway, menggunakan nombor minggu adalah perkara biasa dan ia akan menjadi ciri yang berguna."

Momen ini menyedarkan saya bahawa kalendar boleh berguna bukan sahaja untuk saya, tetapi untuk orang lain juga. Tetapi kemudian saya bertanya kepada diri sendiri: Apa yang saya dapat daripada semua usaha ini? Mengapa saya perlu menghabiskan masa lapang saya supaya beberapa lelaki di Norway boleh menggunakan kalendar saya? Jawapannya ialah: Tiada apa-apa yang ketara!

Walau bagaimanapun, pemikiran bahawa saya telah mencipta sesuatu yang benar-benar membantu—bahawa seseorang boleh memuat turun kalendar saya, menjimatkan masa pada pembangunan dan memberi tumpuan kepada tugas yang lebih penting—sangat memberi inspirasi. Walaupun ia tidak memberi saya sebarang ganjaran material, saya merasakan kepuasan yang mendalam apabila mengetahui bahawa projek saya membantu orang lain.

Jadi, saya mula meningkatkan kalendar secara aktif, mengubahnya menjadi penyelesaian yang lebih universal dan fleksibel. Saya juga mereka bentuk antara muka sendiri, bertujuan untuk menjadikannya bukan sahaja berfungsi tetapi juga mesra pengguna.

---

Apakah yang membezakan Vanilla Calendar Pro?

• Reka letak fleksibel: Sesuaikan struktur HTML kalendar sepenuhnya, menambah butang atau elemen tersuai mengikut keperluan.
• Kawalan gaya penuh: Gantikan mana-mana kelas CSS dengan mudah, membolehkan penyepaduan lancar dengan rangka kerja seperti Tailwind CSS.
• Kebolehaksesan (a11y): Semua elemen dilengkapi dengan label aria dan sokongan navigasi papan kekunci.
• Timbul timbul interaktif: Serlahkan hari tertentu dan paparkan maklumat tambahan terus dalam kalendar.
• Nombor minggu: Menyokong format tarikh berdasarkan minggu, popular di banyak negara.
• Pemilihan masa: Menawarkan kedua-dua format 12 jam dan 24 jam, dengan peluncur atau input manual.
• Tema: Bertukar antara tema terang dan gelap secara automatik dan menyokong tema tersuai.
• Penyetempatan dan pengantarabangsaan: Laraskan dengan mudah hari pertama dalam minggu, hujung minggu dan cuti untuk mana-mana tempat.
• Keserasian rangka kerja: Berfungsi dengan React, Vue, Angular dan mana-mana rangka kerja lain terima kasih kepada asas JavaScript aslinya.

Dan bukan itu sahaja! Saya tidak menyebut utiliti, kaedah, tindakan dan pilihan konfigurasi yang meluas yang membolehkan anda menyesuaikan kalendar agar sesuai dengan hampir sebarang keperluan.

---

Nombor dan Dokumentasi

Vanilla Calendar Pro ditulis sepenuhnya dalam TypeScript, tanpa kebergantungan luaran. Fail yang dikecilkan hanya ~49.33 KB (atau 13.52 KB gzip).

Saya juga telah menyediakan dokumentasi terperinci, yang termasuk:

• Satu Rujukan API.
• Halaman Pelajari dengan kotak pasir interaktif.

? Laman Web Projek

? Repositori GitHub

---

Kesimpulan

Tidak, ini bukan produk revolusioner. Ia hanyalah satu lagi kalendar/pemilih tarikh. Tetapi bagi saya, ia menjadi peristiwa penting dalam perjalanan saya dengan sumber terbuka. Saya gembira saya mencipta sesuatu yang berguna yang boleh membantu pembangun lain.

Saya harap Kalendar Vanilla Pro terbukti membantu anda juga. Terima kasih kerana membaca!

Atas ialah kandungan terperinci Cara Saya Mencipta Vanilla Calendar Pro — Kalendar JavaScript Ringan dan Fleksibel dengan TypeScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!