*Diterjemahkan dari [How to build a calendar with CSS Grid](https://zellwk.com/blog/calendar-with-css-grid/) oleh Zell*

Kalender menjadi salah satu alat penting dalam peradaban manusia. Banyak kejadian penting yang kemudian dapat diingat dan ditelusuri kebenarannya dari tanggal yang jelas saat kejadian. Di seluruh belahan dunia, ada dua sistem kalender yang dikenal secara luas yaitu, kalender masehi dan kalender Islam atau Kalender Hijriyah.

Di artikel ini kita akan belajar bagaimana cara mendesain kalender menggunakan HTML dan CSS dengan memanfaatkan sistem CSS Grid, sebuah teknik layouting yang belum lama ini populer di kalangan frontend developer. 

Berikut hasil akhir desain yang akan dibuat:

![](https://zellwk.com/images/2019/calendar-css-grid/calendar-fixed.png)

## **Membuat HTML**

Kita dapat mengetahui dari gambar bahwa kalender itu mengandung tiga bagian:

1. Indikator bulan.
2. Indikator hari kerja / akhir pekan.
3. Tanggal itu sendiri.

![](https://zellwk.com/images/2019/calendar-css-grid/structure.png)

Cara terbaik untuk menyusun HTML adalah mengikuti apa yang terasa benar. sekarang kita akan membuat HTML sesuai dengan tiga bagian ini:

```html
<div class="calendar">
  <div class="month-indicator">...</div>
  <div class="day-of-week">...</div>
  <div class="date-grid">...</div>
</div>
```

Kita juga harus dapat melihat kebutuhan tujuh kolom untuk kisi pada kalender.

![](https://zellwk.com/images/2019/calendar-css-grid/seven-columns.png)

Kita akan memfokuskan pembahasan pada kode `.day-of-week ` dan `.date-grid ` diatas karena sekarang  hanya berbicara tentang [kisi ( grid )](http://rizalnurhadi97.blogspot.com/2014/07/grid-desain-grafis.html).

## **Penataan Grid**

Ada dua cara untuk membuat Kotak CSS.

Cara pertama adalah menggabungkan elemen di dalam `.day-of-week ` dan `.date-grid`  menjadi satu pemilih. Jika kita melakukan ini, kita dapat mengatur pemilihan `display: grid`. Seperti apa bentuk HTML jika kita melakukan ini:

```html
<div class="grid">
  
  <div>Su</div>
  <div>Mo</div>
  <div>Tu</div>
  <div>We</div>
  <div>Th</div>
  <div>Fr</div>
  <div>Sa</div>

  
  <button><time datetime="2019-02-01">1</time></button>
  <button><time datetime="2019-02-02">2</time></button>
  <button><time datetime="2019-02-03">3</time></button>
  
  <button><time datetime="2019-02-28">28</time></button>
</div>
```

Sebaiknya kita mencegah metode ini karena HTML kehilangan makna strukturalnya karena digabungkan,Yuk mencoba menyimpan `.day-of-week ` dan `date-grid`  sebagai elemen terpisah jika memungkinkan.Karena ini memudahkan kita untuk membaca / memahami kode yang telah ditulis.

Berikut struktur HTML yang  terbaik :

```html
<div class="day-of-week">
  <div>Su</div>
  <div>Mo</div>
  <div>Tu</div>
  <div>We</div>
  <div>Th</div>
  <div>Fr</div>
  <div>Sa</div>
</div>

<div class="date-grid">
  <button><time datetime="2019-02-01">1</time></button>
  <button><time datetime="2019-02-02">2</time></button>
  <button><time datetime="2019-02-03">3</time></button>
  
  <button><time datetime="2019-02-28">28</time></button>
</div>
```

Cara terbaik untuk membuat Grid CSS dengan struktur yang  sederhana adalah menggunakan subgrid. Namun, sebagian besar browser belum mendukung subgrid. Sementara itu, cara terbaik ini membuat dua kisi ( grid ) yang terpisah dimana satu untuk `.day-of-week`dan satu untuk `.date-grid`.Jadi, bisa di artikan bahwa `.day-of-week`dan `.date-grid` bisa menggunakan kisi ( grid ) tujuh kolom yang sama.

```css
/* The grid */
.day-of-week,
.date-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
```

![](https://zellwk.com/images/2019/calendar-css-grid/calendar-grid.png)

## **Penyesuaian Tanggal Sebenarnya**

Februari 2019 dimulai pada hari Jumat. Jika kita ingin kalender menjadi benar, maka perlu memastikan:

1. 1 Feb 2019 jatuh pada hari Jumat
2. 2 Feb 2019 jatuh pada hari Sabtu
3. 3 Feb 2019 jatuh pada hari Minggu
4. Dan seterusnya...

Dengan CSS Grid, bagian ini dapat dibuat mudah.

CSS Grid memiliki algoritme penempatan yang agak mengikuti aturan berikut (jika kita tidak menyetel `grid-auto-flow` ke `dense`):

1. Tempatkan item yang memiliki eksplisit `grid-column`atau `grid-row`pertama
2. Isi sisanya sesuai dengan item yang terakhir ditempatkan

Ini artinya:

1. Jika item pertama jatuh pada kolom 6
2. Item kedua akan ditempatkan di kolom 7.
3. Item ketiga akan ditempatkan di baris berikutnya, di kolom 1 (karena hanya ada tujuh kolom).
4. Item keempat akan ditempatkan di kolom 2,
5. Dan seterusnya...

Jadi, jika kita memposisikan 1 Februari di kolom keenam (Jumat), sisa tanggal akan ditempatkan dengan benar.

Logika sederhana seperti itu...

```css
/* Positioning the first day on a Friday */
.date-grid button:first-child {
  grid-column: 6;
}
```



Berikut ini adalah seluruh Code yang digunakan :

1. Source Code Html

```html
<main>
  <div class="calendar">
    <div class="month-indicator">
      <time datetime="2019-02"> February 2019 </time>
    </div>
    <div class="day-of-week">
      <div>Su</div>
      <div>Mo</div>
      <div>Tu</div>
      <div>We</div>
      <div>Th</div>
      <div>Fr</div>
      <div>Sa</div>
    </div>
    <div class="date-grid">
      <button>
        <time datetime="2019-02-01">1</time>
      </button>
      <button>
        <time datetime="2019-02-02">2</time>
      </button>
      <button>
        <time datetime="2019-02-03">3</time>
      </button>
      <button>
        <time datetime="2019-02-04">4</time>
      </button>
      <button>
        <time datetime="2019-02-05">5</time>
      </button>
      <button>
        <time datetime="2019-02-06">6</time>
      </button>
      <button>
        <time datetime="2019-02-07">7</time>
      </button>
      <button>
        <time datetime="2019-02-08">8</time>
      </button>
      <button>
        <time datetime="2019-02-09">9</time>
      </button>
      <button>
        <time datetime="2019-02-10">10</time>
      </button>
      <button>
        <time datetime="2019-02-11">11</time>
      </button>
      <button>
        <time datetime="2019-02-12">12</time>
      </button>
      <button>
        <time datetime="2019-02-13">13</time>
      </button>
      <button>
        <time datetime="2019-02-14">14</time>
      </button>
      <button>
        <time datetime="2019-02-15">15</time>
      </button>
      <button>
        <time datetime="2019-02-16">16</time>
      </button>
      <button>
        <time datetime="2019-02-17">17</time>
      </button>
      <button>
        <time datetime="2019-02-18">18</time>
      </button>
      <button>
        <time datetime="2019-02-19">19</time>
      </button>
      <button>
        <time datetime="2019-02-20">20</time>
      </button>
      <button>
        <time datetime="2019-02-21">21</time>
      </button>
      <button>
        <time datetime="2019-02-22">22</time>
      </button>
      <button>
        <time datetime="2019-02-23">23</time>
      </button>
      <button>
        <time datetime="2019-02-24">24</time>
      </button>
      <button>
        <time datetime="2019-02-25">25</time>
      </button>
      <button>
        <time datetime="2019-02-26">26</time>
      </button>
      <button>
        <time datetime="2019-02-27">27</time>
      </button>
      <button>
        <time datetime="2019-02-28">28</time>
      </button>
    </div>
  </div>
</main>
```
2. Source Code Css

```css
:root {
  --teal-050: #effcf6;
  --teal-100: #c6f7e2;
  --teal-200: #8eedc7;
  --teal-300: #65d6ad;
  --teal-400: #3ebd93;
  --teal-500: #27ab83;
  --teal-600: #199473;
  --teal-700: #147d64;
  --teal-800: #0c6b58;
  --teal-900: #014d40;
  --blue-grey-050: #f0f4f8;
  --blue-grey-100: #d9e2ec;
  --blue-grey-200: #bcccdc;
  --blue-grey-300: #9fb3c8;
  --blue-grey-400: #829ab1;
  --blue-grey-500: #627d98;
  --blue-grey-600: #486581;
  --blue-grey-700: #334e68;
  --blue-grey-800: #243b53;
  --blue-grey-900: #102a43;
}

html {
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-size: 125%;
  line-height: 1.4;
  font-weight: 400;
  color: var(--blue-grey-900);
}

body {
  min-height: 100vh;
  background: var(--blue-grey-100);
}

main {
  max-width: -webkit-max-content;
  max-width: -moz-max-content;
  max-width: max-content;
  margin: 3em auto 0 auto;
  padding: 1.5em;
  background-color: #fff;
  border: 2px solid var(--blue-grey-200);
  border-radius: 8px;
}

.month-indicator {
  color: var(--blue-grey-700);
  text-align: center;
  font-weight: 500;
}

.day-of-week,
.date-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.day-of-week {
  margin-top: 1.25em;
}

.day-of-week > * {
  font-size: 0.7em;
  color: var(--blue-grey-400);
  font-weight: 500;
  letter-spacing: 0.1em;
  font-variant: small-caps;
  text-align: center;
}

/* Dates */
.date-grid {
  margin-top: 0.5em;
}

/* Positioning the first day */
.date-grid button:first-child {
  grid-column: 6;
}

.date-grid button {
  position: relative;
  border: 0;
  width: 4.5ch;
  height: 4.5ch;
  border-radius: 50%;
  background-color: transparent;
  color: var(--blue-grey-600);
}

.date-grid button:hover,
.date-grid button:focus {
  outline: none;
  background-color: var(--blue-grey-050);
  color: var(--blue-grey-700);
}

.date-grid button:active,
.date-grid button.is-selected {
  background-color: var(--teal-100);
  color: var(--teal-900);
}
```

Lihat Demo dari Source Code tersebut [disini](https://codepen.io/iyan-lowe/pen/xvZVpJ) :



*Referensi : *
*[langitselatan.com](https://langitselatan.com/2014/01/06/mengenal-sistem-kalender-dalam-kearifan-lokal/)*

Cara membuat kalender Sederhana dengan CSS Grid

GenAI Video Fest adalah ajang kompetisi video kreatif yang diselenggarakan oleh CODEPOLITAN bekerjasama dengan Alibaba Cloud.

Kami menantang kreator, tech-enthusiast, dan siapa saja untuk mendobrak batas imajinasi menggunakan teknologi Generative AI terbaru. Di sini, kamu wajib menggunakan WAN Model Studio dari Alibaba Cloud sebagai tools utama untuk menghasilkan karya videomu (bisa dikombinasikan dengan tools editing lainnya).

Tunjukkan pada dunia bagaimana teknologi dan kreativitas bisa bersatu menciptakan karya visual yang berdampak!

Kategori Kompetisi
Pilih satu dari empat tema besar ini untuk karyamu:
* Humanity (Kemanusiaan): Cerita yang menyentuh hati, sosial, dan kepedulian antar sesama.
* Sports (Olahraga): Energi, semangat juang, dan dinamika dunia olahraga.
* Entertainment (Hiburan): Komedi, musik, video klip, atau parodi yang menghibur.
* Science (Sains): Visualisasi masa depan, teknologi, alam semesta, atau penemuan ilmiah.

Total Prize Pool senilai Rp 250.000.000 menunggu para pemenang!
* Top Winners Rewards: Uang Tunai, Alibaba Cloud Credits (hingga $500), Merchandise Eksklusif, dan SWAG CODEPOLITAN.
* Lucky Draw Event: Kesempatan menang hadiah tambahan bagi peserta yang beruntung.
* Massive Exposure: Karya terbaik akan di-highlight di media sosial CODEPOLITAN, Alibaba Cloud, dan channel industri kreatif lainnya.
* Special Access (Khusus Alumni RuangAI): Dapatkan 2 Token untuk klaim Kelas Spesialisasi di RuangAI secara gratis.

Jangan sampai ketinggalan tanggal penting ini:
* Pendaftaran & Submission: 23 Desember 2024 - 23 Januari 2025
* Penjurian (Judging Phase): 24 - 26 Januari 2025
* Pengumuman Pemenang: 27 Januari 2025

Cara Ikutan:
1. Daftar: Klik tombol "Daftar Sekarang" dan pastikan kamu punya akun RuangAI.
2. Join Discord: Masuk ke server Discord komunitas untuk info teknis dan diskusi.
3. Create: Buat video kreatifmu menggunakan WAN Model Studio (Alibaba Cloud) sesuai kategori pilihan.
4. Upload & Submit: Unggah videomu ke media sosial (IG/TikTok/YouTube) dan submit link karyamu di halaman submission RuangAI.

Ikuti kompetisi video Generative AI terbesar dari CODEPOLITAN dan Alibaba Cloud! Gunakan teknologi WAN Model Studio untuk menyulap ide liarmu menjadi visual memukau. Rebut total hadiah senilai Rp 250.000.000!

GenAI Video Fest

Beasiswa Basic Cybersecurity adalah program inisiatif dari JagoanSiber yang dirancang untuk membuka wawasan masyarakat luas tentang dunia keamanan digital. Program ini hadir untuk menjawab kebutuhan talenta keamanan siber yang tinggi, dimulai dengan membangun pemahaman fundamental yang kokoh.

Program ini berbentuk Kelas Online Belajar Mandiri (Self-Paced Learning) berbasis video. Peserta diberikan keleluasaan penuh untuk mengakses materi kapan saja dan di mana saja tanpa terikat jadwal, sehingga sangat fleksibel bagi pelajar, mahasiswa, maupun pekerja profesional.

Kelebihan utama program ini adalah aksesnya yang 100% GRATIS dan terbuka untuk siapa saja tanpa syarat latar belakang IT. Peserta akan dibimbing langsung oleh Mahrus Qusaery, seorang praktisi keamanan siber berpengalaman, yang akan mengupas tuntas materi dasar yang krusial.

Program beasiswa kelas online gratis untuk mempelajari dasar keamanan siber dari nol. Belajar mandiri berbasis video langsung dari praktisi ahli, Mahrus Qusaery.

Cara membuat kalender Sederhana dengan CSS Grid

Learning

KelasFullstack

RuangAI

JagoanSiber

Baca Artikel Lainnya

Typora, Aplikasi Editor Markdown yang Mudah dan Gratis

Google Data Studio Meningkatkan Interaktivitasnya

Cara membuat kalender Sederhana dengan CSS Grid

Website Penyedia Template Front End Gratis dan Berkualitas Versi CodePolitan

6 IDE Terbaik Untuk Bahasa Pemograman PHP

Tips Upload Project Lewat SFTP Langsung dari Dalam Visual Studio Code