Ruitu Calendar is a traditional calendar with a unique design style and Ruitu pattern. In this article, we will implement Rabbit calendar using pure CSS.
HTML structure
We first need to create the HTML structure to house our calendar. We'll use an <div>element as the container for the calendar, and represent each calendar cell as an <div>element.
<div class="calendar">
<div class="calendar-header">
<span class="calendar-month"></span>
<span class="calendar-year"></span>
</div>
<div class="calendar-body">
<div class="calendar-date">1</div>
<div class="calendar-date">2</div>
<div class="calendar-date">3</div>
<!-- ... -->
</div>
</div>
css style
Next, we will use CSS to implement Rabbit Calendar.
Set the basic style
First, we need to set some basic styles for the calendar container:
.calendar {
width: 300px;
background-color: #fff;
border: 1px solid #ccc;
font-size: 16px;
}
Set calendar header style
Next, we need to style the calendar header. We'll use flexa layout to arrange the months and years:
.calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f1f1f1;
padding: 10px;
}
.calendar-month {
font-weight: bold;
}
.calendar-year {
font-weight: bold;
}
Style the calendar body
Now let's style the calendar body. We'll use grida layout to arrange the date cells:
.calendar-body {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-gap: 5px;
padding: 10px;
}
.calendar-date {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 50px;
background-color: #f1f1f1;
border-radius: 50%;
cursor: pointer;
}
.calendar-date:hover {
background-color: #ccc;
}
Add Rabbit pattern
Finally, we need to add the Rabbit pattern. background-imageWe can add images using CSS properties:
.calendar-date::before {
content: "";
display: block;
width: 20px;
height: 20px;
background-image: url("<https://cdn.pixabay.com/photo/2017/04/04/19/18/rabbit-2200124_960_720.png>");
background-size: cover;
}
full code
For convenience, here is the full HTML and CSS code:
<div class="calendar">
<div class="calendar-header">
<span class="calendar-month"></span>
<span class="calendar-year"></span>
</div>
<div class="calendar-body">
<div class="calendar-date">1</div>
<div class="calendar-date">2</div>
<div class="calendar-date">3</div>
<!-- ... -->
</div>
</div>
.calendar {
width: 300px;
background-color: #fff;
border: 1px solid #ccc;
font-size: 16px;
}
.calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f1f1f1;
padding: 10px;
}
.calendar-month {
font-weight: bold;
}
.calendar-year {
font-weight: bold;
}
.calendar-body {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-gap: 5px;
padding: 10px;
}
.calendar-date {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 50px;
background-color: #f1f1f1;
border-radius: 50%;
cursor: pointer;
}
.calendar-date:hover {
background-color: #ccc;
}
.calendar-date::before {
content: "";
display: block;
width: 20px;
height: 20px;
background-image: url("<https://cdn.pixabay.com/photo/2017/04/04/19/18/rabbit-2200124_960_720.png>");
background-size: cover;
}
Now that you have learned how to implement Rabbit Calendar with pure CSS, you can try to create one yourself!