Вы можете создать виджет календарь на HTML, CSS и JavaScript с помощью готового кода ниже.
HTML
<div class="calendar">
<header class="calendar__header">
<div class="calendar__month"></div>
<div class="calendar__year"></div>
</header>
<div class="calendar__grid">
<div class="calendar__day-names">
<span class="calendar__day-name">S</span>
<span class="calendar__day-name">M</span>
<span class="calendar__day-name">T</span>
<span class="calendar__day-name">W</span>
<span class="calendar__day-name">T</span>
<span class="calendar__day-name">F</span>
<span class="calendar__day-name">S</span>
</div>
<div class="calendar__day-numbers"></div>
</div>
</div>
CSS
$color-primary: #A9DDEB;
$color-primary-dark: #23839D;
$color-white: #FFF;
$color-gray: #828889;
$color-black: #000;
// General
html {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
font-size: 62.5%; // 1rem = 10px
* { box-sizing: inherit; }
}
body {
background-color: $color-primary;
display: grid;
font-family: Helvetica, sans-serif;
font-size: 1.6rem;
min-height: 100vh;
place-content: center;
}
// Calendar
.calendar {
background-color: $color-white;
border-radius: 0.8rem;
box-shadow: 0 0.8rem 1.6rem rgba($color-primary-dark, 0.2);
padding: 3.2rem;
&__header {
font-weight: bold;
display: flex;
justify-content: space-between;
letter-spacing: 0.2rem;
padding: 0 0.4rem 1.2rem;
text-transform: uppercase;
}
&__day-names {
border-bottom: 0.1rem solid $color-gray;
display: flex;
gap: 1.2rem;
margin-bottom: 0.8rem;
padding: 0.8rem 0;
}
&__day-name {
aspect-ratio: 1;
color: $color-gray;
font-weight: normal;
text-align: center;
width: 2.4rem;
}
&__day_numbers {
display: flex;
flex-direction: column;
}
&__day-numbers-row {
display: flex;
gap: 1.2rem;
padding: 0.6rem 0;
&:first-child {
justify-content: flex-end;
}
}
&__day-number {
align-content: center;
justify-content: center;
aspect-ratio: 1;
color: $color-black;
display: flex;
line-height: 1.4;
text-align: center;
width: 2.4rem;
&--current {
background-color: $color-primary-dark;
border-radius: 50%;
box-shadow: 0 0 0 0.4rem $color-primary-dark;
color: $color-white;
}
}
}
JavaScript
// month abbreviations
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
// get current date values
const currentDate = new Date();
const currentYear = currentDate.getFullYear();
const currentMonth = currentDate.getMonth();
const currentDay = currentDate.getDate();
// set month and year
document.querySelector('.calendar__month').innerText = months[currentDate.getMonth()];
document.querySelector('.calendar__year').innerText = currentYear;
// create grid of days
let daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
let week = document.createElement('div');
week.classList.add('calendar__day-numbers-row');
for (i = 1; i <= daysInMonth; i++) {
let day = document.createElement('span');
day.classList.add('calendar__day-number');
day.innerText = i;
(i == currentDay) && day.classList.add('calendar__day-number--current');
week.append(day);
if (new Date(currentYear, currentMonth, i).getDay() == 6 || i == daysInMonth) {
document.querySelector('.calendar__day-numbers').append(week);
if (i != daysInMonth) {
week = document.createElement('div');
week.classList.add('calendar__day-numbers-row');
}
}
}