Calendar UI Using HTML and CSS

Calendar UI Using HTML and CSS
Code Snippet:CSS-only Colorful Calendar Concept
Author: David Khourshid
Published: January 19, 2024
Last Updated: January 22, 2024
Downloads: 423
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...