From 08d6936821b60526bf3a5175960b5db3308334bf Mon Sep 17 00:00:00 2001 From: Valerii Tkachenko <09valera06@gmail.com> Date: Mon, 29 Jun 2026 09:04:55 +0300 Subject: [PATCH 1/2] feat: finish calendar component --- src/index.html | 38 +++++++++++++++++++++++- src/styles/main.scss | 71 ++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 108 insertions(+), 1 deletion(-) create mode 100644 src/styles/main.scss diff --git a/src/index.html b/src/index.html index c10199d38b..9484eb698c 100644 --- a/src/index.html +++ b/src/index.html @@ -11,8 +11,44 @@ rel="stylesheet" href="styles/index.scss" /> + -

Calendar

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/styles/main.scss b/src/styles/main.scss new file mode 100644 index 0000000000..844c5e5d60 --- /dev/null +++ b/src/styles/main.scss @@ -0,0 +1,71 @@ +$day-size: 100px; +$gap: 1px; +$days: ( + mon: 0, + tue: 1, + wed: 2, + thu: 3, + fri: 4, + sat: 5, + sun: 6, +); + +body { + margin: 0; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; +} + +.calendar { + display: flex; + flex-wrap: wrap; + width: ($day-size * 7) + ($gap * 6); + gap: $gap; +} + +.calendar__day { + width: $day-size; + height: $day-size; + border: $gap solid black; + background-color: #eee; + box-sizing: border-box; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + transition: + transform 0.5s, + background-color 0.5s; + + &::before { + font-family: Arial, sans-serif; + font-size: 30px; + } +} + +@for $i from 1 through 31 { + .calendar__day:nth-child(#{$i})::before { + content: '#{$i}'; + } +} + +.calendar__day:hover { + background-color: #ffbfcb; + transform: translateY(-20px); +} + +@each $day, $offset in $days { + .calendar--start-day-#{$day} { + .calendar__day:first-child { + margin-left: $offset * ($day-size + $gap); + } + } +} + +@for $i from 28 through 31 { + .calendar--month-length-#{$i} .calendar__day:nth-child(n + #{$i + 1}) { + display: none; + } +} From ea7d661e40d8800e6c63836293e45ff3a4386b90 Mon Sep 17 00:00:00 2001 From: Valerii Tkachenko <09valera06@gmail.com> Date: Mon, 29 Jun 2026 09:15:18 +0300 Subject: [PATCH 2/2] fix: adjust calendar width with padding calculation --- src/styles/main.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/styles/main.scss b/src/styles/main.scss index 844c5e5d60..e7a650f5d9 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,5 +1,6 @@ $day-size: 100px; $gap: 1px; +$calendar-padding: 10px; $days: ( mon: 0, tue: 1, @@ -21,8 +22,10 @@ body { .calendar { display: flex; flex-wrap: wrap; - width: ($day-size * 7) + ($gap * 6); + box-sizing: border-box; + width: ($day-size * 7) + ($gap * 6) + ($calendar-padding * 2); gap: $gap; + padding: $calendar-padding; } .calendar__day {