This code creates a colorful calendar UI using HTML and CSS. It features transition effects for navigation and displays events for specific dates. The calendar allows users to view schedules and navigate through different months. Moreover, this UI enhances visual representation for scheduling and planning tasks.
How to Create Calendar UI Using HTML and CSS
1. First of all, load the Font Awesome and Normalize CSS by adding the following CDN link into the head tag of your HTML document.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
2. Set up the HTML structure for your calendar UI. The code includes various <div> elements and classes that create the layout for different sections of the calendar.
<div class="route" id="index"></div>
<div class="route" id="oct-week-3"></div>
<div class="route" id="oct-week-4"></div>
<div class="route" id="nov-week-1"></div>
<div class="route" id="schedule"></div>
<main class="cal-device">
<header class="cal-header">
<div class="cal-subheader"></div>
<div class="cal-bar">
<div class="cal-button -left">
<i class="fa fa-bars -calendar"></i>
<a href="#index" class="fa fa-chevron-left -schedule"></a>
</div>
<div class="cal-title">
<div class="cal-heading -calendar">Calendar</div>
<div class="cal-heading -schedule">Wednesday, November 10</div>
</div>
<div class="cal-button -right">
<i class="fa fa-search"></i>
</div>
</div>
</header>
<section class="cal-app">
<header class="cal-week">
<div class="cal-weekday">SUN</div>
<div class="cal-weekday">MON</div>
<div class="cal-weekday">TUE</div>
<div class="cal-weekday">WED</div>
<div class="cal-weekday">THU</div>
<div class="cal-weekday">FRI</div>
<div class="cal-weekday">SAT</div>
</header>
<div class="cal-scene -calendar">
<div class="cal-month -october">
<header class="cal-header">
<a class="cal-link" href="#oct-week-1"><span>October</span></a>
<a class="cal-arrow" href="#nov-week-1"><i class="fa fa-chevron-up"></i></a>
<a class="cal-arrow" href="#oct-week-4"><i class="fa fa-chevron-up"></i></a>
</header>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a href="#schedule" class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
</div>
<div class="cal-month -november">
<header class="cal-header">
<a class="cal-link" href="#nov-week-1"><span>November</span></a>
<a class="cal-arrow"><i class="fa fa-chevron-up"></i></a>
</header>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a href="#schedule" class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a href="#schedule" class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a href="#schedule" class="cal-day"></a>
<a href="#schedule" class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
</div>
<div class="cal-month -december">
<header class="cal-header">
<a class="cal-link"><span>December</span></a>
<a class="cal-arrow" href="#nov-week-1"><i class="fa fa-chevron-down"></i></a>
<a class="cal-arrow" href="#oct-week-3"><i class="fa fa-chevron-down"></i></a>
</header>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a href="#schedule" class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a href="#schedule" class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
</div>
<div class="cal-month -january">
<header class="cal-header">
<div class="cal-link"><span>January</span></div>
<a class="cal-arrow" href="#oct-week-4"><i class="fa fa-chevron-down"></i></a>
</header>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
</div>
</div>
<div class="cal-scene -schedule">
<div class="cal-item">
<div class="cal-time"><span>08:00</span></div>
<div class="cal-task">
<p>wake up</p>
</div>
</div>
<div class="cal-item -long">
<div class="cal-time"><span>12:15</span></div>
<div class="cal-task">
<p>meeting with the team, discussing the project requirements</p>
</div>
</div>
<div class="cal-item">
<div class="cal-time"><span>13:00</span></div>
<div class="cal-task">
<p>lunch with Peter</p>
<a><i class="fa fa-map-marker"></i>cafe <q>Petit brasserie</q></a>
</div>
</div>
<div class="cal-item">
<div class="cal-time"><span>14:30</span></div>
<div class="cal-task">
<p>call with Johnathan and Stevie</p>
</div>
</div>
<div class="cal-item -long">
<div class="cal-time"><span>16:45</span></div>
<div class="cal-task">
<p>project presentation</p>
<a><i class="fa fa-map-marker"></i>Head Office</a>
</div>
</div>
<div class="cal-item">
<div class="cal-time"><span>18:00</span></div>
<div class="cal-task">
<p>call with Johnathan and Stevie</p>
</div>
</div>
<div class="cal-item -long">
<div class="cal-time"><span>19:00</span></div>
<div class="cal-task">
<p>David's birthday party</p>
<a><i class="fa fa-map-marker"></i>bar <q>Tailor's John</q></a>
</div>
</div>
<div class="cal-item">
<div class="cal-time"></div>
<div class="cal-task"></div>
</div>
</div>
</section>
</main>
<div class="meta">
<h1>CSS-only Colorful <br>Calendar Concept</h1>
<p>
Dribbble Rework<br />
Original Shot by <a href="https://dribbble.com/shots/2335073-Calendar-App-Animation" target="_blank">Ludmila Shevchenko</a>
</p>
<p>
Click on the arrows (when enabled) and the highlighted date to see the effect.<br>
You can also go <strong>back</strong> in your browser to navigate between scenes, or click the left arrow in the schedule view.
</p>
<p>
Works in all modern browsers.
</p>
</div>
3. The following CSS code defines the styles and animations for different elements of the calendar. It includes transitions, gradients, animations, and transformations that bring the calendar to life. CSS classes such as .cal-day, .cal-title, .cal-button, etc., style different parts of the calendar. Add the following CSS code between <style> tag or external CSS file:
@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600);
body{
display: block !important;
background: linear-gradient(135deg, #4EFFDF, #48BBDE, #F47EC6) !important;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.cal-day, .cal-title > .cal-heading, .cal-button > *, .cal-scene {
transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
}
[id=index]:target ~ .cal-device .cal-scene.-calendar > .cal-month, [id=index]:target ~ .cal-device .cal-scene.-calendar > .cal-header {
-webkit-animation: fade-in 0.6s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) both;
animation: fade-in 0.6s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) both;
}
@-webkit-keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
[id=oct-week-3]:target ~ .cal-device [href="#oct-week-3"] {
cursor: default;
}
[id=oct-week-3]:target ~ .cal-device .cal-app {
background: linear-gradient(#FBEC6B, #F4BC6B, #EB8B6B, #E0536B, #D6306D, #A32C68, #722A65, #422662, #12255D, #275B75, #3C918B, #52C6A2, #66F8B6);
}
[id=oct-week-4]:target ~ .cal-device .cal-month {
transform: translateY(-7.7142857143vh);
}
[id=oct-week-4]:target ~ .cal-device .cal-month.-october > .cal-header {
transform: translateY(7.7142857143vh) translateX(30.8571428571vh);
}
[id=oct-week-4]:target ~ .cal-device .cal-scene.-calendar:before {
box-shadow: 0vh 7.7142857143vh #f3b56b, 7.7142857143vh 7.7142857143vh #f1ae6b, 15.4285714286vh 7.7142857143vh #f0a76b, 23.1428571429vh 7.7142857143vh #efa06b, 30.8571428571vh 7.7142857143vh #ee996b, 38.5714285714vh 7.7142857143vh #ec926b, 46.2857142857vh 7.7142857143vh #eb8b6b, 0vh 15.4285714286vh #e9836b, 7.7142857143vh 15.4285714286vh #e87b6b, 15.4285714286vh 15.4285714286vh #e6736b, 23.1428571429vh 15.4285714286vh #e56b6b, 30.8571428571vh 15.4285714286vh #e3636b, 38.5714285714vh 15.4285714286vh #e25b6b, 46.2857142857vh 15.4285714286vh #e0536b, 0vh 23.1428571429vh #df4e6b, 7.7142857143vh 23.1428571429vh #dd496c, 15.4285714286vh 23.1428571429vh #dc446c, 23.1428571429vh 23.1428571429vh #da3f6c, 30.8571428571vh 23.1428571429vh #d93a6c, 38.5714285714vh 23.1428571429vh #d7356d, 46.2857142857vh 23.1428571429vh #d6306d, 0vh 30.8571428571vh #cf2f6c, 7.7142857143vh 30.8571428571vh #c72f6c, 15.4285714286vh 30.8571428571vh #c02e6b, 23.1428571429vh 30.8571428571vh #b92e6a, 30.8571428571vh 30.8571428571vh #b22d69, 38.5714285714vh 30.8571428571vh #aa2d69, 46.2857142857vh 30.8571428571vh #a32c68, 0vh 38.5714285714vh #9c2c68, 7.7142857143vh 38.5714285714vh #952b67, 15.4285714286vh 38.5714285714vh #8e2b67, 23.1428571429vh 38.5714285714vh #872b66, 30.8571428571vh 38.5714285714vh #802b66, 38.5714285714vh 38.5714285714vh #792a65, 46.2857142857vh 38.5714285714vh #722a65, 0vh 46.2857142857vh #6b2965, 7.7142857143vh 46.2857142857vh #642964, 15.4285714286vh 46.2857142857vh #5d2864, 23.1428571429vh 46.2857142857vh #572863, 30.8571428571vh 46.2857142857vh #502763, 38.5714285714vh 46.2857142857vh #492762, 46.2857142857vh 46.2857142857vh #422662, 0vh 54vh #3b2661, 7.7142857143vh 54vh #342661, 15.4285714286vh 54vh #2d2660, 23.1428571429vh 54vh #27255f, 30.8571428571vh 54vh #20255e, 38.5714285714vh 54vh #19255e, 46.2857142857vh 54vh #12255d, 0vh 61.7142857143vh #152d60, 7.7142857143vh 61.7142857143vh #183464, 15.4285714286vh 61.7142857143vh #1b3c67, 23.1428571429vh 61.7142857143vh #1e446b, 30.8571428571vh 61.7142857143vh #214c6e, 38.5714285714vh 61.7142857143vh #245372, 46.2857142857vh 61.7142857143vh #275b75, 0vh 69.4285714286vh #2a6378, 7.7142857143vh 69.4285714286vh #2d6a7b, 15.4285714286vh 69.4285714286vh #30727e, 23.1428571429vh 69.4285714286vh #337a82, 30.8571428571vh 69.4285714286vh #368285, 38.5714285714vh 69.4285714286vh #398988, 46.2857142857vh 69.4285714286vh #3c918b, 0vh 77.1428571429vh #3f998e, 7.7142857143vh 77.1428571429vh #42a092, 15.4285714286vh 77.1428571429vh #45a895, 23.1428571429vh 77.1428571429vh #49af98, 30.8571428571vh 77.1428571429vh #4cb79b, 38.5714285714vh 77.1428571429vh #4fbe9f, 46.2857142857vh 77.1428571429vh #52c6a2, 0vh 84.8571428571vh #55cda5, 7.7142857143vh 84.8571428571vh #58d4a8, 15.4285714286vh 84.8571428571vh #5bdbab, 23.1428571429vh 84.8571428571vh #5de3ad, 30.8571428571vh 84.8571428571vh #60eab0, 38.5714285714vh 84.8571428571vh #63f1b3, 46.2857142857vh 84.8571428571vh #66f8b6, 0vh 92.5714285714vh #6df8b9, 7.7142857143vh 92.5714285714vh #74f9bd, 15.4285714286vh 92.5714285714vh #7bf9c0, 23.1428571429vh 92.5714285714vh #82f9c3, 30.8571428571vh 92.5714285714vh #89f9c6, 38.5714285714vh 92.5714285714vh #90faca, 46.2857142857vh 92.5714285714vh #97facd;
}
[id=oct-week-4]:target ~ .cal-device .cal-app {
background: linear-gradient(#F4BC6B, #EB8B6B, #E0536B, #D6306D, #A32C68, #722A65, #422662, #12255D, #275B75, #3C918B, #52C6A2, #66F8B6);
}
[id=oct-week-4]:target ~ .cal-device [href="#oct-week-4"] {
z-index: -1;
}
[id=nov-week-1]:target ~ .cal-device .cal-month {
transform: translateY(-15.4285714286vh);
}
[id=nov-week-1]:target ~ .cal-device .cal-month.-october > .cal-header {
transform: translateY(7.7142857143vh) translateX(30.8571428571vh);
opacity: 0;
}
[id=nov-week-1]:target ~ .cal-device .cal-app {
background: linear-gradient(#EB8B6B, #E0536B, #D6306D, #A32C68, #722A65, #422662, #12255D, #275B75, #3C918B, #52C6A2, #66F8B6);
}
[id=nov-week-1]:target ~ .cal-device .cal-scene.-calendar:before {
box-shadow: 0vh 7.7142857143vh #e9836b, 7.7142857143vh 7.7142857143vh #e87b6b, 15.4285714286vh 7.7142857143vh #e6736b, 23.1428571429vh 7.7142857143vh #e56b6b, 30.8571428571vh 7.7142857143vh #e3636b, 38.5714285714vh 7.7142857143vh #e25b6b, 46.2857142857vh 7.7142857143vh #e0536b, 0vh 15.4285714286vh #df4e6b, 7.7142857143vh 15.4285714286vh #dd496c, 15.4285714286vh 15.4285714286vh #dc446c, 23.1428571429vh 15.4285714286vh #da3f6c, 30.8571428571vh 15.4285714286vh #d93a6c, 38.5714285714vh 15.4285714286vh #d7356d, 46.2857142857vh 15.4285714286vh #d6306d, 0vh 23.1428571429vh #cf2f6c, 7.7142857143vh 23.1428571429vh #c72f6c, 15.4285714286vh 23.1428571429vh #c02e6b, 23.1428571429vh 23.1428571429vh #b92e6a, 30.8571428571vh 23.1428571429vh #b22d69, 38.5714285714vh 23.1428571429vh #aa2d69, 46.2857142857vh 23.1428571429vh #a32c68, 0vh 30.8571428571vh #9c2c68, 7.7142857143vh 30.8571428571vh #952b67, 15.4285714286vh 30.8571428571vh #8e2b67, 23.1428571429vh 30.8571428571vh #872b66, 30.8571428571vh 30.8571428571vh #802b66, 38.5714285714vh 30.8571428571vh #792a65, 46.2857142857vh 30.8571428571vh #722a65, 0vh 38.5714285714vh #6b2965, 7.7142857143vh 38.5714285714vh #642964, 15.4285714286vh 38.5714285714vh #5d2864, 23.1428571429vh 38.5714285714vh #572863, 30.8571428571vh 38.5714285714vh #502763, 38.5714285714vh 38.5714285714vh #492762, 46.2857142857vh 38.5714285714vh #422662, 0vh 46.2857142857vh #3b2661, 7.7142857143vh 46.2857142857vh #342661, 15.4285714286vh 46.2857142857vh #2d2660, 23.1428571429vh 46.2857142857vh #27255f, 30.8571428571vh 46.2857142857vh #20255e, 38.5714285714vh 46.2857142857vh #19255e, 46.2857142857vh 46.2857142857vh #12255d, 0vh 54vh #152d60, 7.7142857143vh 54vh #183464, 15.4285714286vh 54vh #1b3c67, 23.1428571429vh 54vh #1e446b, 30.8571428571vh 54vh #214c6e, 38.5714285714vh 54vh #245372, 46.2857142857vh 54vh #275b75, 0vh 61.7142857143vh #2a6378, 7.7142857143vh 61.7142857143vh #2d6a7b, 15.4285714286vh 61.7142857143vh #30727e, 23.1428571429vh 61.7142857143vh #337a82, 30.8571428571vh 61.7142857143vh #368285, 38.5714285714vh 61.7142857143vh #398988, 46.2857142857vh 61.7142857143vh #3c918b, 0vh 69.4285714286vh #3f998e, 7.7142857143vh 69.4285714286vh #42a092, 15.4285714286vh 69.4285714286vh #45a895, 23.1428571429vh 69.4285714286vh #49af98, 30.8571428571vh 69.4285714286vh #4cb79b, 38.5714285714vh 69.4285714286vh #4fbe9f, 46.2857142857vh 69.4285714286vh #52c6a2, 0vh 77.1428571429vh #55cda5, 7.7142857143vh 77.1428571429vh #58d4a8, 15.4285714286vh 77.1428571429vh #5bdbab, 23.1428571429vh 77.1428571429vh #5de3ad, 30.8571428571vh 77.1428571429vh #60eab0, 38.5714285714vh 77.1428571429vh #63f1b3, 46.2857142857vh 77.1428571429vh #66f8b6, 0vh 84.8571428571vh #6df8b9, 7.7142857143vh 84.8571428571vh #74f9bd, 15.4285714286vh 84.8571428571vh #7bf9c0, 23.1428571429vh 84.8571428571vh #82f9c3, 30.8571428571vh 84.8571428571vh #89f9c6, 38.5714285714vh 84.8571428571vh #90faca, 46.2857142857vh 84.8571428571vh #97facd;
}
[id=nov-week-2]:target ~ .cal-device .cal-month {
transform: translateY(-23.1428571429vh);
}
[id=nov-week-2]:target ~ .cal-device .cal-month.-october > .cal-header {
opacity: 0;
}
[id=nov-week-2]:target ~ .cal-device .cal-scene.-calendar:before {
box-shadow: 0vh 7.7142857143vh #df4e6b, 7.7142857143vh 7.7142857143vh #dd496c, 15.4285714286vh 7.7142857143vh #dc446c, 23.1428571429vh 7.7142857143vh #da3f6c, 30.8571428571vh 7.7142857143vh #d93a6c, 38.5714285714vh 7.7142857143vh #d7356d, 46.2857142857vh 7.7142857143vh #d6306d, 0vh 15.4285714286vh #cf2f6c, 7.7142857143vh 15.4285714286vh #c72f6c, 15.4285714286vh 15.4285714286vh #c02e6b, 23.1428571429vh 15.4285714286vh #b92e6a, 30.8571428571vh 15.4285714286vh #b22d69, 38.5714285714vh 15.4285714286vh #aa2d69, 46.2857142857vh 15.4285714286vh #a32c68, 0vh 23.1428571429vh #9c2c68, 7.7142857143vh 23.1428571429vh #952b67, 15.4285714286vh 23.1428571429vh #8e2b67, 23.1428571429vh 23.1428571429vh #872b66, 30.8571428571vh 23.1428571429vh #802b66, 38.5714285714vh 23.1428571429vh #792a65, 46.2857142857vh 23.1428571429vh #722a65, 0vh 30.8571428571vh #6b2965, 7.7142857143vh 30.8571428571vh #642964, 15.4285714286vh 30.8571428571vh #5d2864, 23.1428571429vh 30.8571428571vh #572863, 30.8571428571vh 30.8571428571vh #502763, 38.5714285714vh 30.8571428571vh #492762, 46.2857142857vh 30.8571428571vh #422662, 0vh 38.5714285714vh #3b2661, 7.7142857143vh 38.5714285714vh #342661, 15.4285714286vh 38.5714285714vh #2d2660, 23.1428571429vh 38.5714285714vh #27255f, 30.8571428571vh 38.5714285714vh #20255e, 38.5714285714vh 38.5714285714vh #19255e, 46.2857142857vh 38.5714285714vh #12255d, 0vh 46.2857142857vh #152d60, 7.7142857143vh 46.2857142857vh #183464, 15.4285714286vh 46.2857142857vh #1b3c67, 23.1428571429vh 46.2857142857vh #1e446b, 30.8571428571vh 46.2857142857vh #214c6e, 38.5714285714vh 46.2857142857vh #245372, 46.2857142857vh 46.2857142857vh #275b75, 0vh 54vh #2a6378, 7.7142857143vh 54vh #2d6a7b, 15.4285714286vh 54vh #30727e, 23.1428571429vh 54vh #337a82, 30.8571428571vh 54vh #368285, 38.5714285714vh 54vh #398988, 46.2857142857vh 54vh #3c918b, 0vh 61.7142857143vh #3f998e, 7.7142857143vh 61.7142857143vh #42a092, 15.4285714286vh 61.7142857143vh #45a895, 23.1428571429vh 61.7142857143vh #49af98, 30.8571428571vh 61.7142857143vh #4cb79b, 38.5714285714vh 61.7142857143vh #4fbe9f, 46.2857142857vh 61.7142857143vh #52c6a2, 0vh 69.4285714286vh #55cda5, 7.7142857143vh 69.4285714286vh #58d4a8, 15.4285714286vh 69.4285714286vh #5bdbab, 23.1428571429vh 69.4285714286vh #5de3ad, 30.8571428571vh 69.4285714286vh #60eab0, 38.5714285714vh 69.4285714286vh #63f1b3, 46.2857142857vh 69.4285714286vh #66f8b6, 0vh 77.1428571429vh #6df8b9, 7.7142857143vh 77.1428571429vh #74f9bd, 15.4285714286vh 77.1428571429vh #7bf9c0, 23.1428571429vh 77.1428571429vh #82f9c3, 30.8571428571vh 77.1428571429vh #89f9c6, 38.5714285714vh 77.1428571429vh #90faca, 46.2857142857vh 77.1428571429vh #97facd;
}
[id=nov-week-2]:target ~ .cal-device .cal-app {
background: linear-gradient(#E0536B, #D6306D, #A32C68, #722A65, #422662, #12255D, #275B75, #3C918B, #52C6A2, #66F8B6);
}
[id=schedule]:target ~ .cal-device .cal-bar .-schedule {
opacity: 1;
}
[id=schedule]:target ~ .cal-device .cal-bar .-calendar {
opacity: 0;
}
[id=schedule]:target ~ .cal-device .cal-scene.-schedule {
opacity: 1;
z-index: 2;
}
[id=schedule]:target ~ .cal-device .cal-task > *, [id=schedule]:target ~ .cal-device .cal-time > * {
transform: translateX(0);
}
[id=schedule]:target ~ .cal-device .cal-item:nth-child(1) .cal-task > *, [id=schedule]:target ~ .cal-device .cal-item:nth-child(1) .cal-time > * {
transition-delay: 0s;
}
[id=schedule]:target ~ .cal-device .cal-item:nth-child(2) .cal-task > *, [id=schedule]:target ~ .cal-device .cal-item:nth-child(2) .cal-time > * {
transition-delay: 0.06s;
}
[id=schedule]:target ~ .cal-device .cal-item:nth-child(3) .cal-task > *, [id=schedule]:target ~ .cal-device .cal-item:nth-child(3) .cal-time > * {
transition-delay: 0.12s;
}
[id=schedule]:target ~ .cal-device .cal-item:nth-child(4) .cal-task > *, [id=schedule]:target ~ .cal-device .cal-item:nth-child(4) .cal-time > * {
transition-delay: 0.18s;
}
[id=schedule]:target ~ .cal-device .cal-item:nth-child(5) .cal-task > *, [id=schedule]:target ~ .cal-device .cal-item:nth-child(5) .cal-time > * {
transition-delay: 0.24s;
}
[id=schedule]:target ~ .cal-device .cal-item:nth-child(6) .cal-task > *, [id=schedule]:target ~ .cal-device .cal-item:nth-child(6) .cal-time > * {
transition-delay: 0.3s;
}
[id=schedule]:target ~ .cal-device .cal-item:nth-child(7) .cal-task > *, [id=schedule]:target ~ .cal-device .cal-item:nth-child(7) .cal-time > * {
transition-delay: 0.36s;
}
[id=schedule]:target ~ .cal-device .cal-scene.-calendar, [id=schedule]:target ~ .cal-device .cal-scene.-calendar * {
transition-delay: 0.6s;
}
.cal-device {
width: 54vh;
height: 96vh;
background: white;
}
.cal-device > .cal-header {
height: 11.5714285714vh;
background: #1c3e69;
}
.cal-app {
height: 84.4285714286vh;
width: 100%;
background: linear-gradient(#FBEC6B, #F4BC6B, #EB8B6B, #E0536B, #D6306D, #A32C68, #722A65, #422662, #12255D, #275B75, #3C918B, #52C6A2, #66F8B6);
}
.cal-week {
height: 7.7142857143vh;
width: 100%;
display: flex;
flex-direction: row;
}
.cal-weekday {
color: white;
width: 7.7142857143vh;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
font-weight: 600;
font-size: 2.5714285714vh;
}
.fa {
font-size: 2.5714285714vh;
}
.cal-scene {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.cal-scene.-calendar:before {
content: "";
display: block;
height: 7.7142857143vh;
width: 7.7142857143vh;
position: absolute;
top: -7.7142857143vh;
left: 0;
box-shadow: 0vh 7.7142857143vh #fae56b, 7.7142857143vh 7.7142857143vh #f9de6b, 15.4285714286vh 7.7142857143vh #f8d76b, 23.1428571429vh 7.7142857143vh #f7d16b, 30.8571428571vh 7.7142857143vh #f6ca6b, 38.5714285714vh 7.7142857143vh #f5c36b, 46.2857142857vh 7.7142857143vh #f4bc6b, 0vh 15.4285714286vh #f3b56b, 7.7142857143vh 15.4285714286vh #f1ae6b, 15.4285714286vh 15.4285714286vh #f0a76b, 23.1428571429vh 15.4285714286vh #efa06b, 30.8571428571vh 15.4285714286vh #ee996b, 38.5714285714vh 15.4285714286vh #ec926b, 46.2857142857vh 15.4285714286vh #eb8b6b, 0vh 23.1428571429vh #e9836b, 7.7142857143vh 23.1428571429vh #e87b6b, 15.4285714286vh 23.1428571429vh #e6736b, 23.1428571429vh 23.1428571429vh #e56b6b, 30.8571428571vh 23.1428571429vh #e3636b, 38.5714285714vh 23.1428571429vh #e25b6b, 46.2857142857vh 23.1428571429vh #e0536b, 0vh 30.8571428571vh #df4e6b, 7.7142857143vh 30.8571428571vh #dd496c, 15.4285714286vh 30.8571428571vh #dc446c, 23.1428571429vh 30.8571428571vh #da3f6c, 30.8571428571vh 30.8571428571vh #d93a6c, 38.5714285714vh 30.8571428571vh #d7356d, 46.2857142857vh 30.8571428571vh #d6306d, 0vh 38.5714285714vh #cf2f6c, 7.7142857143vh 38.5714285714vh #c72f6c, 15.4285714286vh 38.5714285714vh #c02e6b, 23.1428571429vh 38.5714285714vh #b92e6a, 30.8571428571vh 38.5714285714vh #b22d69, 38.5714285714vh 38.5714285714vh #aa2d69, 46.2857142857vh 38.5714285714vh #a32c68, 0vh 46.2857142857vh #9c2c68, 7.7142857143vh 46.2857142857vh #952b67, 15.4285714286vh 46.2857142857vh #8e2b67, 23.1428571429vh 46.2857142857vh #872b66, 30.8571428571vh 46.2857142857vh #802b66, 38.5714285714vh 46.2857142857vh #792a65, 46.2857142857vh 46.2857142857vh #722a65, 0vh 54vh #6b2965, 7.7142857143vh 54vh #642964, 15.4285714286vh 54vh #5d2864, 23.1428571429vh 54vh #572863, 30.8571428571vh 54vh #502763, 38.5714285714vh 54vh #492762, 46.2857142857vh 54vh #422662, 0vh 61.7142857143vh #3b2661, 7.7142857143vh 61.7142857143vh #342661, 15.4285714286vh 61.7142857143vh #2d2660, 23.1428571429vh 61.7142857143vh #27255f, 30.8571428571vh 61.7142857143vh #20255e, 38.5714285714vh 61.7142857143vh #19255e, 46.2857142857vh 61.7142857143vh #12255d, 0vh 69.4285714286vh #152d60, 7.7142857143vh 69.4285714286vh #183464, 15.4285714286vh 69.4285714286vh #1b3c67, 23.1428571429vh 69.4285714286vh #1e446b, 30.8571428571vh 69.4285714286vh #214c6e, 38.5714285714vh 69.4285714286vh #245372, 46.2857142857vh 69.4285714286vh #275b75, 0vh 77.1428571429vh #2a6378, 7.7142857143vh 77.1428571429vh #2d6a7b, 15.4285714286vh 77.1428571429vh #30727e, 23.1428571429vh 77.1428571429vh #337a82, 30.8571428571vh 77.1428571429vh #368285, 38.5714285714vh 77.1428571429vh #398988, 46.2857142857vh 77.1428571429vh #3c918b, 0vh 84.8571428571vh #3f998e, 7.7142857143vh 84.8571428571vh #42a092, 15.4285714286vh 84.8571428571vh #45a895, 23.1428571429vh 84.8571428571vh #49af98, 30.8571428571vh 84.8571428571vh #4cb79b, 38.5714285714vh 84.8571428571vh #4fbe9f, 46.2857142857vh 84.8571428571vh #52c6a2, 0vh 92.5714285714vh #55cda5, 7.7142857143vh 92.5714285714vh #58d4a8, 15.4285714286vh 92.5714285714vh #5bdbab, 23.1428571429vh 92.5714285714vh #5de3ad, 30.8571428571vh 92.5714285714vh #60eab0, 38.5714285714vh 92.5714285714vh #63f1b3, 46.2857142857vh 92.5714285714vh #66f8b6, 0vh 100.2857142857vh #6df8b9, 7.7142857143vh 100.2857142857vh #74f9bd, 15.4285714286vh 100.2857142857vh #7bf9c0, 23.1428571429vh 100.2857142857vh #82f9c3, 30.8571428571vh 100.2857142857vh #89f9c6, 38.5714285714vh 100.2857142857vh #90faca, 46.2857142857vh 100.2857142857vh #97facd;
transition: box-shadow 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.cal-scene.-schedule {
z-index: -1;
opacity: 0;
}
.cal-month:first-child > .cal-header, [id=nov-week-1]:target ~ .cal-device .cal-month.-november > .cal-header, [id=nov-week-2]:target ~ .cal-device .cal-month.-november > .cal-header, .cal-device .cal-month.-october > .cal-header, .cal-device .cal-month.-december > .cal-header, .cal-device .cal-month.-january > .cal-header {
transform: translateX(30.8571428571vh);
}
.cal-month:first-child > .cal-header > .cal-link, [id=nov-week-1]:target ~ .cal-device .cal-month.-november > .cal-header > .cal-link, [id=nov-week-2]:target ~ .cal-device .cal-month.-november > .cal-header > .cal-link, .cal-device .cal-month.-october > .cal-header > .cal-link, .cal-device .cal-month.-december > .cal-header > .cal-link, .cal-device .cal-month.-january > .cal-header > .cal-link {
background-color: rgba(255, 255, 255, 0.4);
}
.cal-month:first-child > .cal-header > .cal-link > span, [id=nov-week-1]:target ~ .cal-device .cal-month.-november > .cal-header > .cal-link > span, [id=nov-week-2]:target ~ .cal-device .cal-month.-november > .cal-header > .cal-link > span, .cal-device .cal-month.-october > .cal-header > .cal-link > span, .cal-device .cal-month.-december > .cal-header > .cal-link > span, .cal-device .cal-month.-january > .cal-header > .cal-link > span {
transform: translateX(calc(-50% - 1.9285714286vh)) translateY(-50%);
color: white;
}
.cal-month:first-child > .cal-header > .cal-arrow, [id=nov-week-1]:target ~ .cal-device .cal-month.-november > .cal-header > .cal-arrow, [id=nov-week-2]:target ~ .cal-device .cal-month.-november > .cal-header > .cal-arrow, .cal-device .cal-month.-october > .cal-header > .cal-arrow, .cal-device .cal-month.-december > .cal-header > .cal-arrow, .cal-device .cal-month.-january > .cal-header > .cal-arrow {
opacity: 1;
pointer-events: inherit;
}
.cal-month:first-child .cal-day, [id=nov-week-1]:target ~ .cal-device .cal-month.-november .cal-day, [id=nov-week-2]:target ~ .cal-device .cal-month.-november .cal-day, .cal-device .cal-month.-october .cal-day, .cal-device .cal-month.-december .cal-day, .cal-device .cal-month.-january .cal-day {
color: rgba(255, 255, 255, 0.4);
}
.-october.cal-month:first-child .cal-arrow, [id=nov-week-1]:target ~ .cal-device .-october.cal-month.-november .cal-arrow, [id=nov-week-2]:target ~ .cal-device .-october.cal-month.-november .cal-arrow, .cal-device .-october.cal-month .cal-arrow {
color: #EB8B6B;
}
.-november.cal-month:first-child .cal-arrow, [id=nov-week-1]:target ~ .cal-device .-november.cal-month .cal-arrow, [id=nov-week-2]:target ~ .cal-device .-november.cal-month .cal-arrow, .cal-device .-november.cal-month.-october .cal-arrow, .cal-device .-november.cal-month.-december .cal-arrow, .cal-device .-november.cal-month.-january .cal-arrow {
color: #D6306D;
}
.-december.cal-month:first-child .cal-arrow, [id=nov-week-1]:target ~ .cal-device .-december.cal-month.-november .cal-arrow, [id=nov-week-2]:target ~ .cal-device .-december.cal-month.-november .cal-arrow, .cal-device .-december.cal-month .cal-arrow {
color: #102152;
}
.-january.cal-month:first-child .cal-arrow, [id=nov-week-1]:target ~ .cal-device .-january.cal-month.-november .cal-arrow, [id=nov-week-2]:target ~ .cal-device .-january.cal-month.-november .cal-arrow, .cal-device .-january.cal-month .cal-arrow {
color: #97FACD;
}
[id=nov-week-1]:target ~ .cal-device .cal-month.-december > .cal-header, [id=nov-week-2]:target ~ .cal-device .cal-month.-december > .cal-header, .cal-device .cal-month.-november > .cal-header {
transform: translateX(15.4285714286vh);
}
[id=nov-week-1]:target ~ .cal-device .cal-month.-december .cal-link, [id=nov-week-2]:target ~ .cal-device .cal-month.-december .cal-link, .cal-device .cal-month.-november .cal-link {
background-color: white;
color: gray;
}
[id=nov-week-1]:target ~ .cal-device .cal-month.-december .cal-link > span, [id=nov-week-2]:target ~ .cal-device .cal-month.-december .cal-link > span, .cal-device .cal-month.-november .cal-link > span {
transform: translateX(-50%) translateY(-50%);
}
[id=nov-week-1]:target ~ .cal-device .cal-month.-december .cal-arrow, [id=nov-week-2]:target ~ .cal-device .cal-month.-december .cal-arrow, .cal-device .cal-month.-november .cal-arrow {
opacity: 0;
pointer-events: none;
}
[id=nov-week-1]:target ~ .cal-device .cal-month.-december .cal-day, [id=nov-week-2]:target ~ .cal-device .cal-month.-december .cal-day, .cal-device .cal-month.-november .cal-day {
color: white;
}
[id=nov-week-1]:target ~ .cal-device .-november.cal-month.-december .cal-link span, [id=nov-week-2]:target ~ .cal-device .-november.cal-month.-december .cal-link span, .cal-device .-november.cal-month .cal-link span {
color: #DA3F6C;
}
[id=nov-week-1]:target ~ .cal-device .-december.cal-month .cal-link span, [id=nov-week-2]:target ~ .cal-device .-december.cal-month .cal-link span, .cal-device .-december.cal-month.-november .cal-link span {
color: #26255F;
}
.cal-month {
display: block;
counter-reset: month;
transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
z-index: 1;
}
.cal-month:first-child {
margin-top: -7.7142857143vh;
}
.cal-month:first-child > .cal-header {
top: 15.4285714286vh;
}
.cal-month:first-child ~ .cal-month {
margin-top: -7.7142857143vh;
}
.cal-month > .cal-header {
position: absolute;
height: 7.7142857143vh;
width: 23.1428571429vh;
padding: 2.2040816327vh;
z-index: 1;
transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.cal-month > .cal-header > .cal-link {
display: block;
height: 100%;
width: 100%;
font-size: 1.9285714286vh;
text-decoration: none;
color: gray;
text-transform: uppercase;
padding: 0.6428571429vh 5.1428571429vh;
border-radius: 2.5714285714vh;
background: white;
transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
font-weight: 600;
}
.cal-month > .cal-header > .cal-link > span {
display: block;
position: absolute;
top: 48%;
left: 50%;
transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.cal-month.-january {
margin-top: 0 !important;
}
.cal-subheader {
height: 3.8571428571vh;
width: 100%;
}
.cal-bar {
height: 7.7142857143vh;
display: flex;
flex-direction: row;
align-items: center;
}
.cal-bar > .cal-title {
flex-grow: 1;
height: 100%;
}
.cal-bar .-schedule {
opacity: 0;
}
.cal-button {
width: 7.7142857143vh;
height: 7.7142857143vh;
}
.cal-button > * {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
font-size: 3.0857142857vh;
}
.cal-title > .cal-heading {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 3.0857142857vh;
}
.cal-arrow {
position: absolute;
height: 7.7142857143vh;
width: 7.7142857143vh;
background: white;
top: 0;
right: 0;
padding: 1.2857142857vh;
background-clip: content-box;
border-radius: 50%;
opacity: 0;
pointer-events: none;
transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
color: gray;
}
.cal-arrow .fa-chevron-up {
top: -1px;
}
.cal-day {
counter-increment: month;
width: 7.7142857143vh;
height: 7.7142857143vh;
display: block;
float: left;
text-decoration: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
font-size: 2.5714285714vh;
}
.cal-day[href="#schedule"]:before {
background: rgba(255, 255, 255, 0.4);
}
.cal-day:before {
content: counter(month);
display: block;
height: 75%;
width: 75%;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
}
.cal-item {
height: 7.7142857143vh;
width: 100%;
display: flex;
flex-direction: row;
}
.cal-item.-long {
height: 15.4285714286vh;
}
.cal-item:nth-child(1) > .cal-time {
background-color: #fa739d;
}
.cal-item:nth-child(1) > .cal-task {
background-color: white;
}
.cal-item:nth-child(2) > .cal-time {
background-color: #f26993;
}
.cal-item:nth-child(2) > .cal-task {
background-color: #fcf5f7;
}
.cal-item:nth-child(3) > .cal-time {
background-color: #eb5e8a;
}
.cal-item:nth-child(3) > .cal-task {
background-color: #f9ecf0;
}
.cal-item:nth-child(4) > .cal-time {
background-color: #e35480;
}
.cal-item:nth-child(4) > .cal-task {
background-color: #f6e2e8;
}
.cal-item:nth-child(5) > .cal-time {
background-color: #dc4977;
}
.cal-item:nth-child(5) > .cal-task {
background-color: #f4d8e1;
}
.cal-item:nth-child(6) > .cal-time {
background-color: #d43f6d;
}
.cal-item:nth-child(6) > .cal-task {
background-color: #f1ced9;
}
.cal-item:nth-child(7) > .cal-time {
background-color: #cc3463;
}
.cal-item:nth-child(7) > .cal-task {
background-color: #eec5d1;
}
.cal-item:nth-child(8) > .cal-time {
background-color: #c52a5a;
}
.cal-item:nth-child(8) > .cal-task {
background-color: #ebbbca;
}
.cal-time {
width: 15.4285714286vh;
flex-basis: 15.4285714286vh;
height: 100%;
justify-content: center;
line-height: 7.7142857143vh;
align-items: center;
display: flex;
flex-direction: column;
color: white;
}
.cal-time > * {
transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
transform: translateX(-15.4285714286vh);
font-weight: 600;
font-size: 2.5714285714vh;
}
.cal-task {
flex-basis: 38.5714285714vh;
height: 100%;
background-color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 0 2.5714285714vh;
font-size: 1.9285714286vh;
}
.cal-task > p {
margin-top: 0;
margin-bottom: 0;
color: #12255E;
}
.cal-task > a {
text-decoration: none;
color: #EA80A2;
font-weight: 600;
}
.cal-task > a > .fa {
margin-right: 0.9642857143vh;
}
.cal-task > * {
transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
transform: translateX(38.5714285714vh);
}
.meta {
flex-basis: calc(80% - 54vh);
font-size: 2.5714285714vh;
font-weight: 300;
}
.meta p, .meta a {
color: rgba(255, 255, 255, 0.7);
}
.meta h1 {
font-size: 9.2571428571vh;
line-height: 9.2571428571vh;
font-weight: 300;
color: white;
}
.meta p {
line-height: 1.4;
}
.meta a:hover {
color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 750px) {
.meta {
display: none;
}
}
@media (max-width: 750px) {
body {
justify-content: center;
}
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
quotes: "«" "»";
}
*, *:before, *:after {
box-sizing: border-box !important;
position: relative;
}
.cal-month:before,
.cal-month:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.cal-month:after {
clear: both;
}
Modify the HTML content, styling, and classes as needed to fit your project’s design and functionality requirements.
That’s all! hopefully, you have successfully created Calendar UI on your web project. If you have any questions or suggestions, feel free to comment below.
Similar Code Snippets:
Custom Date Picker in JavaScript
Pomodoro Clock Widget in HTML
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.