From f11b729717b7b45f7d50770fd742b943be41b131 Mon Sep 17 00:00:00 2001 From: Alexander Date: Thu, 2 Jul 2026 14:03:46 +0300 Subject: [PATCH 1/2] solution: layout calendar --- src/index.html | 41 +++++++++++++++++++++++++-- src/styles/blocks/calendar.scss | 49 +++++++++++++++++++++++++++++++++ src/styles/index.scss | 3 -- src/styles/main.scss | 17 ++++++++++++ src/styles/utils/mixin.scss | 5 ++++ src/styles/utils/variebles.scss | 27 ++++++++++++++++++ 6 files changed, 137 insertions(+), 5 deletions(-) create mode 100644 src/styles/blocks/calendar.scss delete mode 100644 src/styles/index.scss create mode 100644 src/styles/main.scss create mode 100644 src/styles/utils/mixin.scss create mode 100644 src/styles/utils/variebles.scss diff --git a/src/index.html b/src/index.html index c10199d38b..5cab0c83f0 100644 --- a/src/index.html +++ b/src/index.html @@ -9,10 +9,47 @@ Calendar -

Calendar

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/styles/blocks/calendar.scss b/src/styles/blocks/calendar.scss new file mode 100644 index 0000000000..32f7b5af4e --- /dev/null +++ b/src/styles/blocks/calendar.scss @@ -0,0 +1,49 @@ +.calendar { + display: flex; + flex-wrap: wrap; + gap: $calendar-space-size; + width: $calendar-week-size; + padding: $calendar-padding-size; + + @each $day, $index in $weekdays { + &--start-day-#{$day} &__day:first-child { + margin-left: $index * ($calendar-day-size + $calendar-space-size); + } + } + + @for $length from 28 through 31 { + &--month-length-#{$length} &__day:nth-child(n + #{$length + 1}) { + display: none; + } + } + + &__day { + @include flex-center; + + width: $calendar-day-size; + height: $calendar-day-size; + border: 1px solid $color-black; + background-color: $color-gray; + cursor: default; + transition: + transform $transition-duration, + background-color $transition-duration; + box-sizing: border-box; + font-family: $font-arial; + + @for $day from 1 through 31 { + &:nth-child(#{$day}) { + &::before { + content: '#{$day}'; + font-size: $calendar-font-size; + } + } + } + + &:hover { + cursor: pointer; + background-color: $color-day-hover; + transform: translateY(-$translate-size-y); + } + } +} diff --git a/src/styles/index.scss b/src/styles/index.scss deleted file mode 100644 index 293d3b1f13..0000000000 --- a/src/styles/index.scss +++ /dev/null @@ -1,3 +0,0 @@ -body { - margin: 0; -} diff --git a/src/styles/main.scss b/src/styles/main.scss new file mode 100644 index 0000000000..6df7cf8e14 --- /dev/null +++ b/src/styles/main.scss @@ -0,0 +1,17 @@ +@import './utils/variebles'; +@import './utils/mixin'; +@import './blocks/calendar'; + +html, +body { + box-sizing: border-box; + padding: 0; + margin: 0; +} + +.main { + @include flex-center; + + width: 100%; + min-height: 100vh; +} diff --git a/src/styles/utils/mixin.scss b/src/styles/utils/mixin.scss new file mode 100644 index 0000000000..36f927c4e4 --- /dev/null +++ b/src/styles/utils/mixin.scss @@ -0,0 +1,5 @@ +@mixin flex-center { + display: flex; + justify-content: center; + align-items: center; +} diff --git a/src/styles/utils/variebles.scss b/src/styles/utils/variebles.scss new file mode 100644 index 0000000000..64e992eedb --- /dev/null +++ b/src/styles/utils/variebles.scss @@ -0,0 +1,27 @@ +// colors +$color-gray: #eee; +$color-black: #000; +$color-day-hover: #ffbfcb; + +// fonts +$font-arial: 'Arial', sans-serif; + +// options transform +$translate-size-y: 20px; +$transition-duration: 0.5s; + +// options calendar +$calendar-day-size: 100px; +$calendar-space-size: 1px; +$calendar-week-size: calc($calendar-day-size * 7 + $calendar-space-size * 6); +$calendar-padding-size: 10px; +$calendar-font-size: 30px; +$weekdays: ( + 'mon': 0, + 'tue': 1, + 'wed': 2, + 'thu': 3, + 'fri': 4, + 'sat': 5, + 'sun': 6, +); From 139be96d991cfff7c9f97f77862780f0e5e04bd2 Mon Sep 17 00:00:00 2001 From: Alexander Date: Thu, 2 Jul 2026 17:49:24 +0300 Subject: [PATCH 2/2] fix: cell logic calendar.scss --- src/styles/blocks/calendar.scss | 2 +- src/styles/main.scss | 2 +- .../utils/{variebles.scss => variables.scss} | 18 ++++++++++-------- 3 files changed, 12 insertions(+), 10 deletions(-) rename src/styles/utils/{variebles.scss => variables.scss} (66%) diff --git a/src/styles/blocks/calendar.scss b/src/styles/blocks/calendar.scss index 32f7b5af4e..7a2527b75e 100644 --- a/src/styles/blocks/calendar.scss +++ b/src/styles/blocks/calendar.scss @@ -7,7 +7,7 @@ @each $day, $index in $weekdays { &--start-day-#{$day} &__day:first-child { - margin-left: $index * ($calendar-day-size + $calendar-space-size); + margin-left: ($index - 1) * ($calendar-day-size + $calendar-space-size); } } diff --git a/src/styles/main.scss b/src/styles/main.scss index 6df7cf8e14..1e51759889 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,4 +1,4 @@ -@import './utils/variebles'; +@import './utils/variables'; @import './utils/mixin'; @import './blocks/calendar'; diff --git a/src/styles/utils/variebles.scss b/src/styles/utils/variables.scss similarity index 66% rename from src/styles/utils/variebles.scss rename to src/styles/utils/variables.scss index 64e992eedb..3be970b525 100644 --- a/src/styles/utils/variebles.scss +++ b/src/styles/utils/variables.scss @@ -13,15 +13,17 @@ $transition-duration: 0.5s; // options calendar $calendar-day-size: 100px; $calendar-space-size: 1px; -$calendar-week-size: calc($calendar-day-size * 7 + $calendar-space-size * 6); +$calendar-week-size: calc( + ($calendar-day-size * 7) + ($calendar-space-size * 6) +); $calendar-padding-size: 10px; $calendar-font-size: 30px; $weekdays: ( - 'mon': 0, - 'tue': 1, - 'wed': 2, - 'thu': 3, - 'fri': 4, - 'sat': 5, - 'sun': 6, + 'mon': 1, + 'tue': 2, + 'wed': 3, + 'thu': 4, + 'fri': 5, + 'sat': 6, + 'sun': 7, );