From 760b2f51227a1f38759eaf15c1f02777f38ac888 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Sat, 24 Sep 2022 17:12:57 +0700
Subject: [PATCH] feat: Calendar

---
 contents/_includes/covers/calendar.njk | 18 +++++++
 contents/calendar.md                   | 72 ++++++++++++++++++++++++++
 contents/index.njk                     |  1 +
 styles/blocks/_pattern.scss            |  3 +-
 styles/index.scss                      |  1 +
 styles/patterns/_avatar-list.scss      |  2 +-
 styles/patterns/_calendar.scss         | 33 ++++++++++++
 7 files changed, 128 insertions(+), 2 deletions(-)
 create mode 100644 contents/_includes/covers/calendar.njk
 create mode 100644 contents/calendar.md
 create mode 100644 styles/patterns/_calendar.scss

diff --git a/contents/_includes/covers/calendar.njk b/contents/_includes/covers/calendar.njk
new file mode 100644
index 0000000..92cd4fc
--- /dev/null
+++ b/contents/_includes/covers/calendar.njk
@@ -0,0 +1,18 @@
+<div class="calendar">
+    <div class="calendar__weekday">Mon</div>
+    <div class="calendar__weekday">Tue</div>
+    <div class="calendar__weekday">Wed</div>
+    <div class="calendar__weekday">Thu</div>
+    <div class="calendar__weekday">Fri</div>
+    <div class="calendar__weekday">Sat</div>
+    <div class="calendar__weekday">Sun</div>
+    {% for i in range(0, 3) -%}
+    <div class="calendar__day calendar__day--disabled">{{ i + 29 }}</div>
+    {%- endfor %}
+    {% for i in range(0, 30) -%}
+    <div class="calendar__day{%if i == 23 %} calendar__day--current{% endif %}">{{ i + 1 }}</div>
+    {%- endfor %}
+    {% for i in range(0, 2) -%}
+    <div class="calendar__day calendar__day--disabled">{{ i + 1}}</div>
+    {%- endfor %}
+</div>
\ No newline at end of file
diff --git a/contents/calendar.md b/contents/calendar.md
new file mode 100644
index 0000000..97f2d09
--- /dev/null
+++ b/contents/calendar.md
@@ -0,0 +1,72 @@
+---
+layout: layouts/post.njk
+title: Calendar
+description: Create a calendar with CSS grid
+keywords: css calendar, css grid
+---
+
+## HTML
+
+```html
+<div class="calendar">
+    <!-- Week days -->
+    <div class="calendar__weekday">Mon</div>
+    <div class="calendar__weekday">Tue</div>
+    <div class="calendar__weekday">Wed</div>
+    <div class="calendar__weekday">Thu</div>
+    <div class="calendar__weekday">Fri</div>
+    <div class="calendar__weekday">Sat</div>
+    <div class="calendar__weekday">Sun</div>
+    
+    <!-- Days of the previous month -->
+    <div class="calendar__day calendar__day--disabled">30</div>
+    <div class="calendar__day calendar__day--disabled">31</div>
+    
+    <!-- Days of the current month -->
+    <div class="calendar__day">1</div>
+    <div class="calendar__day">2</div>
+
+    <!-- The current day -->
+    <div class="calendar__day calendar__day--current">...</div>
+
+    <!-- Days of the next month -->
+    <div class="calendar__day calendar__day--disabled">1</div>
+    <div class="calendar__day calendar__day--disabled">2</div>
+</div>
+```
+
+## CSS
+
+```css
+.calendar {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+}
+
+.calendar__weekday {
+    border-bottom: 1px solid #d1d5db;
+    padding: 0.125rem;
+}
+
+.calendar__day {
+    border-bottom: 1px solid #d1d5db;
+    border-right: 1px solid #d1d5db;
+    padding: 0.25rem;
+    text-align: center;
+}
+
+.calendar__day--current {
+    background-color: #3b82f6;
+    color: #fff;
+}
+
+.calendar__day:nth-child(7n+1) {
+    border-left: 1px solid #d1d5db;
+}
+
+.calendar__day--disabled {
+    color: #d1d5db;   
+}
+```
+
+{% demo %}{% include "covers/calendar.njk" %}{% enddemo %}
diff --git a/contents/index.njk b/contents/index.njk
index a6c3981..04efc29 100644
--- a/contents/index.njk
+++ b/contents/index.njk
@@ -22,6 +22,7 @@ eleventyExcludeFromCollections: true
             {% pattern "Avatar" %}{% include "covers/avatar.njk" %}{% endpattern %}
             {% pattern "Avatar list" %}{% include "covers/avatar-list.njk" %}{% endpattern %}
             {% pattern "Badge" %}{% include "covers/badge.njk" %}{% endpattern %}
+            {% pattern "Calendar" %}{% include "covers/calendar.njk" %}{% endpattern %}
             {% pattern "Card" %}{% include "covers/card.njk" %}{% endpattern %}
             {% pattern "Centering" %}{% include "covers/centering.njk" %}{% endpattern %}
             {% pattern "Close button" %}{% include "covers/close-button.njk" %}{% endpattern %}
diff --git a/styles/blocks/_pattern.scss b/styles/blocks/_pattern.scss
index c7ec0cb..e0169d2 100644
--- a/styles/blocks/_pattern.scss
+++ b/styles/blocks/_pattern.scss
@@ -18,9 +18,10 @@
     pointer-events: none;
 
     color: #000;
-    height: 8rem;
+    height: 10rem;
     width: 100%;
     margin-bottom: 0.5rem;
+    overflow: hidden;
 }
 .pattern__title {
     color: #6366f1;
diff --git a/styles/index.scss b/styles/index.scss
index fd21c5c..5bf8ee2 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -23,6 +23,7 @@
 @import './patterns/box-selector';
 @import './patterns/breadcrumb';
 @import './patterns/button-with-icon';
+@import './patterns/calendar';
 @import './patterns/card-layout';
 @import './patterns/card';
 @import './patterns/centering';
diff --git a/styles/patterns/_avatar-list.scss b/styles/patterns/_avatar-list.scss
index 8f9aa4a..b0f651b 100644
--- a/styles/patterns/_avatar-list.scss
+++ b/styles/patterns/_avatar-list.scss
@@ -9,7 +9,7 @@
     margin-left: -0.25rem;
 }
 .avatars__image {
-    background-color: #BBB;
+    background-color: #d1d5db;
     box-shadow: 0 0 0 0.25rem #FFF;
     color: #FFF;
     font-size: 0.75rem;
diff --git a/styles/patterns/_calendar.scss b/styles/patterns/_calendar.scss
new file mode 100644
index 0000000..bc27e31
--- /dev/null
+++ b/styles/patterns/_calendar.scss
@@ -0,0 +1,33 @@
+.calendar {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+
+    /* Demo */
+    font-size: 0.75rem;
+    width: 8rem;
+}
+
+.calendar__weekday {
+    border-bottom: 1px solid #d1d5db;
+    padding: 0.125rem;
+}
+
+.calendar__day {
+    border-bottom: 1px solid #d1d5db;
+    border-right: 1px solid #d1d5db;
+    padding: 0.25rem;
+    text-align: center;
+}
+
+.calendar__day--current {
+    background-color: #3b82f6;
+    color: #fff;
+}
+
+.calendar__day:nth-child(7n+1) {
+    border-left: 1px solid #d1d5db;
+}
+
+.calendar__day--disabled {
+    color: #e5e7eb;   
+}
\ No newline at end of file