mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-20 04:41:31 +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 %}

3
styles/blocks/_pattern.scss
View File

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

1
styles/index.scss
View File

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

2
styles/patterns/_avatar-list.scss
View File

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

33
styles/patterns/_calendar.scss Normal file
View File

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