<div class="calendar">
<div class="month">January 2026</div>
<div class="weekdays">
<div>Sun</div><div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div>Sat</div>
</div>
<div class="days">
<div class="day prev-date">29</div>
<div class="day prev-date">30</div>
<div class="day prev-date">31</div>
<div class="day">1</div>
<div class="day">2</div>
<div class="day">3</div>
<div class="day">4</div>
<div class="day today">5</div>
<div class="day">6</div>
<div class="day">7</div>
<div class="day">8</div>
<div class="day">9</div>
<div class="day">10</div>
<div class="day">11</div>
<div class="day">12</div>
<div class="day">13</div>
<div class="day">14</div>
<div class="day">15</div>
<div class="day">16</div>
<div class="day">17</div>
<div class="day">18</div>
<div class="day">19</div>
<div class="day">20</div>
<div class="day">21</div>
<div class="day">22</div>
<div class="day">23</div>
<div class="day">24</div>
<div class="day">25</div>
<div class="day">26</div>
<div class="day">27</div>
<div class="day">28</div>
<div class="day">29</div>
<div class="day">30</div>
<div class="day">31</div>
<div class="day prev-date">1</div>
</div>
</div>
.calendar {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
max-width: 350px;
background: #fff;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
padding: 20px;
margin: 0 auto;
}
.month {
text-align: center;
font-weight: 700;
font-size: 1.2rem;
margin-bottom: 20px;
color: #1f2937;
}
.weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
text-align: center;
font-size: 0.85rem;
color: #9ca3af;
margin-bottom: 10px;
}
.days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 5px;
}
.day {
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 50%;
font-size: 0.9rem;
color: #374151;
transition: background 0.2s;
}
.day:hover:not(.today) {
background: #f3f4f6;
}
.day.today {
background: #3b82f6;
color: white;
font-weight: 600;
}
.day.prev-date {
color: #d1d5db;
}
