mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-31 17:41:42 +02:00
Code Issues Releases Wiki Activity

feat: Calendar

Browse Source
This commit is contained in:
Phuoc Nguyen
2022-09-24 17:12:57 +07:00
parent fb65ee5541
commit 760b2f5122
7 changed files with 128 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
contents/_includes/covers/calendar.njk Normal file
View File

@@ -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>

72
contents/calendar.md Normal file
View File

@@ -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 %}

1
contents/index.njk
View File

@@ -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 %}