This post contains a total of 10+ CSS Calendar Examples with Source Code. All these Calendar examples are made using CSS.
You can use the source code of these examples with credits to the original owner.
Related Posts
CSS Calendar Examples
1. Simple Calendar
Made by Miro Karilahti. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
*{margin:0;padding:0;}
body{
background:#445566;
}
#calendar{
width:358px;
margin:0 auto;
margin-top:2%;
margin-bottom:2%;
border-radius:5px;
font-family:'Open Sans',sans-serif;
text-align:center;
color:#555;
box-shadow:0 0 50px -14px rgba(0,0,0,.8);
}
#calendar h1{
background:#ee3333;
border-radius:5px 5px 0 0;
padding:20px;
font-size:140%;
font-weight:300;
text-transform:uppercase;
letter-spacing:1px;
color:#fff;
cursor:default;
text-shadow:0 0 10px rgba(0,0,0,.8);
}
#calendar table{
border-top:1px solid #ddd;
border-left:1px solid #ddd;
border-spacing:0;
border-radius:0 0 5px 5px;
}
#calendar td{
width:38px;
height:38px;
background:#eee;
border-right:1px solid #ddd;
border-bottom:1px solid #ddd;
padding:6px;
cursor:pointer;
transition:background .3s;
-webkit-transition:background .3s;
}
#calendar td:hover:not(.current){
background:#ddd;
}
#calendar .lastmonth,#calendar .nextmonth,#calendar .nextmonth ~ *{
background:#fff;
color:#999;
}
#calendar .current{
background:#ee3333;
font-weight:700;
color:#fff;
text-shadow:0 0 10px rgba(0,0,0,.5);
}
#calendar .hastask{
font-weight:700;
}
#calendar tr:last-of-type td:first-of-type{border-radius:0 0 0 5px;}
#calendar tr:last-of-type td:last-of-type{border-radius:0 0 5px 0;}
</style>
</head>
<body>
<div id="calendar">
<h1>October</h1>
<table>
<tr><td class="lastmonth">30</td><td>1</td><td>2</td><td>3</td><td class="hastask">4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td class="current">8</td><td class="hastask">9</td><td>10</td><td>11</td><td class="hastask">12</td><td>13</td></tr>
<tr><td>14</td><td class="hastask">15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td></tr>
<tr><td class="hastask">21</td><td>22</td><td>23</td><td>24</td><td>25</td><td class="hastask">26</td><td>27</td></tr>
<tr><td>28</td><td>29</td><td class="hastask">30</td><td>31</td><td class="nextmonth">1</td><td>2</td><td>3</td></tr>
</table>
</div>
</body>
</html>
2. Calendar without tables
Made by Ilya N. Zykin. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
div{font-size:10px}
.calendar_modern {
padding: 50px;
}
.calendar_modern .calendar {
margin: auto;
width: 240px;
height: 290px;
}
.calendar_modern .calendar .nav {
height: 0;
position: relative;
}
.calendar_modern .calendar .nav i, .calendar_modern .calendar .nav b {
display: block;
font-style: normal;
position: absolute;
cursor: pointer;
width: 30px;
height: 30px;
z-index: 100;
top: 0;
}
.calendar_modern .calendar .nav i {
left: 0;
border-right: 1px solid #423a37;
background: url(http://cs4399.userapi.com/u49225742/docs/58f03726ea27/lft.png) no-repeat center center transparent;
}
.calendar_modern .calendar .nav b {
right: 0;
border-left: 1px solid #423a37;
background: url(http://cs4399.userapi.com/u49225742/docs/5fd2e9dd3a9f/rgt.png) no-repeat center center transparent;
}
.calendar_modern .calendar .month .header {
height: 30px;
position: relative;
font-family: Arial, Helvetica, sans-serif;
color: white;
line-height: 30px;
font-weight: bold;
font-size: 1.4em;
text-align: center;
background: #372f2c;
border-radius: 3px;
}
.calendar_modern .calendar .month .body {
background: #e4e4e4;
}
.calendar_modern .calendar .month .body .day_names {
height: 25px;
}
.calendar_modern .calendar .month .body .day_names i {
font-family: Arial, Helvetica, sans-serif;
display: block;
height: 25px;
line-height: 25px;
text-align: center;
font-style: normal;
float: left;
width: 34px;
}
.calendar_modern .calendar .month .body .days i, .calendar_modern .calendar .month .body .days b, .calendar_modern .calendar .month .body .days s, .calendar_modern .calendar .month .body .days a {
font-family: Arial, Helvetica, sans-serif;
display: block;
float: left;
width: 33px;
height: 33px;
color: #8d8d8d;
font-size: 1.5em;
font-weight: bold;
line-height: 34px;
text-align: center;
font-style: normal;
background: #e4e4e4;
text-decoration: none;
/* table like borders */
border-right: 1px solid #aaaaaa;
border-bottom: 1px solid #aaaaaa;
/* table like borders */
}
.calendar_modern .calendar .month .body .days i.weekend, .calendar_modern .calendar .month .body .days b.weekend, .calendar_modern .calendar .month .body .days s.weekend, .calendar_modern .calendar .month .body .days a.weekend {
color: #444;
background: InactiveCaption;
}
.calendar_modern .calendar .month .body .days i:nth-child(7n + 1), .calendar_modern .calendar .month .body .days b:nth-child(7n + 1), .calendar_modern .calendar .month .body .days s:nth-child(7n + 1), .calendar_modern .calendar .month .body .days a:nth-child(7n + 1) {
border-left: 1px solid #aaaaaa;
}
.calendar_modern .calendar .month .body .days i:nth-child(n+1):nth-child(-n+7), .calendar_modern .calendar .month .body .days b:nth-child(n+1):nth-child(-n+7), .calendar_modern .calendar .month .body .days s:nth-child(n+1):nth-child(-n+7), .calendar_modern .calendar .month .body .days a:nth-child(n+1):nth-child(-n+7) {
border-top: 1px solid #aaaaaa;
}
.calendar_modern .calendar .month .body .days i:nth-child(n+1):nth-child(-n+7).empty, .calendar_modern .calendar .month .body .days b:nth-child(n+1):nth-child(-n+7).empty, .calendar_modern .calendar .month .body .days s:nth-child(n+1):nth-child(-n+7).empty, .calendar_modern .calendar .month .body .days a:nth-child(n+1):nth-child(-n+7).empty {
border-top: 1px solid #d5d5d5;
border-bottom: 1px solid #aaaaaa;
}
.calendar_modern .calendar .month .body .days s:nth-child(7n + 1) {
border-left: 1px solid #d5d5d5;
}
.calendar_modern .calendar .month .body .days a {
color: #372f2d;
background: #d1d1d1;
text-shadow: 1px 1px 0px white;
background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #dadada), color-stop(100%, #cfcfcf));
background-image: -webkit-linear-gradient(bottom, #dadada, #cfcfcf);
background-image: -moz-linear-gradient(bottom, #dadada, #cfcfcf);
background-image: -o-linear-gradient(bottom, #dadada, #cfcfcf);
background-image: linear-gradient(bottom, #dadada, #cfcfcf);
}
.calendar_modern .calendar .month .body .days a.today {
color: white;
text-shadow: 1px 1px 2px teal;
-webkit-box-shadow: 0 0 18px teal inset;
-moz-box-shadow: 0 0 18px teal inset;
box-shadow: 0 0 18px teal inset;
}
.calendar_modern .calendar .month .body .days a.selected {
color: white;
text-shadow: 1px 1px 2px blue;
-webkit-box-shadow: 0 0 18px #000066 inset;
-moz-box-shadow: 0 0 18px #000066 inset;
box-shadow: 0 0 18px #000066 inset;
}
.calendar_modern .calendar .month .body .days a:hover {
color: white;
-webkit-transition-property: text-shadow;
-moz-transition-property: text-shadow;
-o-transition-property: text-shadow;
transition-property: text-shadow;
-webkit-transition-property: box-shadow;
-moz-transition-property: box-shadow;
-o-transition-property: box-shadow;
transition-property: box-shadow;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
text-shadow: 1px 1px 2px green;
-webkit-box-shadow: 0 0 18px #006600 inset;
-moz-box-shadow: 0 0 18px #006600 inset;
box-shadow: 0 0 18px #006600 inset;
}
.calendar_modern .calendar .month .body .days b, .calendar_modern .calendar .month .body .days i, .calendar_modern .calendar .month .body .days s {
color: #ccc;
}
.calendar_modern .calendar .month .body .days b, .calendar_modern .calendar .month .body .days s {
background: #eee;
border-color: #d5d5d5;
}
.calendar_modern .calendar .month .body .days b {
border-top: 1px solid #d5d5d5 !important;
border-bottom: 1px solid #aaaaaa !important;
}
.calendar_modern .calendar .month .body .days b:first-child {
border-left: 1px solid #d5d5d5 !important;
}
.calendar_modern .calendar .month .body .days b:last-of-type{
border-right: 1px solid #aaaaaa !important;
}
</style>
</head>
<body>
<div id="calendar" class="calendar_modern">
<div class="calendar">
<div class="nav">
<i title="left"></i>
<b title="right"></b>
</div>
<div class="months">
<div class="month" data-date="2011.1">
<div class="header"> January 2011 </div>
<div class="body">
<div class="day_names">
<i>Mon</i>
<i>Tue</i>
<i>Wed</i>
<i>Thu</i>
<i>Fri</i>
<i>Sat</i>
<i>Sun</i>
</div>
<div class="days">
<b>26</b>
<b>27</b>
<b>28</b>
<b>29</b>
<b>30</b>
<i>1</i>
<i>2</i>
<i>3</i>
<a href="#" class="today">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a class="weekend" href="#">8</a>
<a class="weekend" href="#">9</a>
<a href="#">10</a>
<a href="#">11</a>
<a href="#">12</a>
<a href="#">13</a>
<a href="#">14</a>
<a class="weekend" href="#">15</a>
<a class="weekend" href="#">16</a>
<a href="#">17</a>
<a href="#">18</a>
<a href="#">19</a>
<a href="#">20</a>
<a href="#">21</a>
<a class="weekend" href="#">22</a>
<a class="weekend" href="#">23</a>
<a href="#">24</a>
<a href="#">25</a>
<a href="#" class="selected">26</a>
<a href="#">27</a>
<a href="#">28</a>
<a class="weekend" href="#">29</a>
<a class="weekend" href="#">30</a>
<a href="#">31</a>
<s>1</s>
<s>2</s>
<s>3</s>
<s>4</s>
<s>5</s>
<s>6</s>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>3. Pure CSS3 Calendar Icon with Dynamic Date
Made by Kamil Czujowski. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
/* @group Mixins */
* {
border: 0;
margin: 0;
padding: 0;
outline: 0;
}
html {
background-color: #282e3a;
}
body {
width: 400px;
margin: 0 auto;
}
figure {
margin: 30px auto;
width: 128px;
height: 111px;
background-color: #ffffff;
border-radius: 10px;
position: relative;
}
figure:before {
content: '';
display: block;
width: 128px;
height: 69px;
border-radius: 10px 10px 0 0;
background-image: -webkit-linear-gradient(white 0%, #edeeef 100%);
background-image: -moz-linear-gradient(white 0%, #edeeef 100%);
background-image: -o-linear-gradient(white 0%, #edeeef 100%);
background-image: linear-gradient(white 0%, #edeeef 100%);
}
figure header {
width: 128px;
height: 27px;
position: absolute;
top: -1px;
background-color: #fa565a;
border-radius: 10px 10px 0 0;
border-bottom: 3px solid #e5e5e5;
font: 400 15px/27px Arial, Helvetica, Geneva, sans-serif;
letter-spacing: 0.5px;
color: #fff;
text-align: center;
}
figure section {
width: 128px;
height: 80px;
position: absolute;
top: 28px;
font: 400 55px/75px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
letter-spacing: -2px;
color: #4c566b;
text-align: center;
z-index: 10;
}
figure section:before {
content: '';
display: block;
position: absolute;
top: 35px;
width: 3px;
height: 10px;
background-image: -webkit-linear-gradient(#b5bdc5 0%, #e5e5e5 100%);
background-image: -moz-linear-gradient(#b5bdc5 0%, #e5e5e5 100%);
background-image: -o-linear-gradient(#b5bdc5 0%, #e5e5e5 100%);
background-image: linear-gradient(#b5bdc5 0%, #e5e5e5 100%);
}
figure section:after {
content: '';
display: block;
position: absolute;
top: 35px;
right: 0;
width: 3px;
height: 10px;
background-image: -webkit-linear-gradient(#b5bdc5 0%, #e5e5e5 100%);
background-image: -moz-linear-gradient(#b5bdc5 0%, #e5e5e5 100%);
background-image: -o-linear-gradient(#b5bdc5 0%, #e5e5e5 100%);
background-image: linear-gradient(#b5bdc5 0%, #e5e5e5 100%);
}
/* @end */
</style>
</head>
<body>
<figure>
<header>
<script>
var day = new Date().getDay();
week = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
document.write(week[day]);
</script>
</header>
<section>
<script>
document.write(new Date().getDate());
</script>
</section>
</figure>
</body>
</html>4. Responsive Calendar Pattern
Made by Justin Avery. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
body {
font-family: Tahoma;
}
header {
text-align: center;
}
#calendar {
width: 100%;
}
#calendar a {
color: #8e352e;
text-decoration: none;
}
#calendar ul {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
#calendar li {
display: block;
float: left;
width: 14.342%;
padding: 5px;
box-sizing: border-box;
border: 1px solid #ccc;
margin-right: -1px;
margin-bottom: -1px;
}
#calendar ul.weekdays {
height: 40px;
background: #8e352e;
}
#calendar ul.weekdays li {
text-align: center;
text-transform: uppercase;
line-height: 20px;
border: none !important;
padding: 10px 6px;
color: #fff;
font-size: 13px;
}
#calendar .days li {
height: 180px;
}
#calendar .days li:hover {
background: #d3d3d3;
}
#calendar .date {
text-align: center;
margin-bottom: 5px;
padding: 4px;
background: #333;
color: #fff;
width: 20px;
border-radius: 50%;
float: right;
}
#calendar .event {
clear: both;
display: block;
font-size: 13px;
border-radius: 4px;
padding: 5px;
margin-top: 40px;
margin-bottom: 5px;
line-height: 14px;
background: #e4f2f2;
border: 1px solid #b5dbdc;
color: #009aaf;
text-decoration: none;
}
#calendar .event-desc {
color: #666;
margin: 3px 0 7px 0;
text-decoration: none;
}
#calendar .other-month {
background: #f5f5f5;
color: #666;
}
/* ============================
Mobile Responsiveness
============================*/
@media (max-width: 768px) {
#calendar .weekdays, #calendar .other-month {
display: none;
}
#calendar li {
height: auto !important;
border: 1px solid #ededed;
width: 100%;
padding: 10px;
margin-bottom: -1px;
}
#calendar .date {
float: none;
}
}
</style>
</head>
<body>
<div id="calendar-wrap">
<header>
<h1>December 2017</h1>
</header>
<div id="calendar">
<ul class="weekdays">
<li>Sunday</li>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
<li>Thursday</li>
<li>Friday</li>
<li>Saturday</li>
</ul>
<!-- Days from previous month -->
<ul class="days">
<li class="day other-month">
<div class="date">27</div>
</li>
<li class="day other-month">
<div class="date">28</div>
<div class="event">
<div class="event-desc">
HTML 5 lecture with Brad Traversy from Eduonix
</div>
<div class="event-time">
1:00pm to 3:00pm
</div>
</div>
</li>
<li class="day other-month">
<div class="date">29</div>
</li>
<li class="day other-month">
<div class="date">30</div>
</li>
<li class="day other-month">
<div class="date">31</div>
</li>
<!-- Days in current month -->
<li class="day">
<div class="date">1</div>
</li>
<li class="day">
<div class="date">2</div>
<div class="event">
<div class="event-desc">
Career development @ Community College room #402
</div>
<div class="event-time">
2:00pm to 5:00pm
</div>
</div>
</li>
</ul>
<!-- Row #2 -->
<ul class="days">
<li class="day">
<div class="date">3</div>
</li>
<li class="day">
<div class="date">4</div>
</li>
<li class="day">
<div class="date">5</div>
</li>
<li class="day">
<div class="date">6</div>
</li>
<li class="day">
<div class="date">7</div>
<div class="event">
<div class="event-desc">
Group Project meetup
</div>
<div class="event-time">
6:00pm to 8:30pm
</div>
</div>
</li>
<li class="day">
<div class="date">8</div>
</li>
<li class="day">
<div class="date">9</div>
</li>
</ul>
<!-- Row #3 -->
<ul class="days">
<li class="day">
<div class="date">10</div>
</li>
<li class="day">
<div class="date">11</div>
</li>
<li class="day">
<div class="date">12</div>
</li>
<li class="day">
<div class="date">13</div>
</li>
<li class="day">
<div class="date">14</div><div class="event">
<div class="event-desc">
Board Meeting
</div>
<div class="event-time">
1:00pm to 3:00pm
</div>
</div>
</li>
<li class="day">
<div class="date">15</div>
</li>
<li class="day">
<div class="date">16</div>
</li>
</ul>
<!-- Row #4 -->
<ul class="days">
<li class="day">
<div class="date">17</div>
</li>
<li class="day">
<div class="date">18</div>
</li>
<li class="day">
<div class="date">19</div>
</li>
<li class="day">
<div class="date">20</div>
</li>
<li class="day">
<div class="date">21</div>
</li>
<li class="day">
<div class="date">22</div>
<div class="event">
<div class="event-desc">
Conference call
</div>
<div class="event-time">
9:00am to 12:00pm
</div>
</div>
</li>
<li class="day">
<div class="date">23</div>
</li>
</ul>
<!-- Row #5 -->
<ul class="days">
<li class="day">
<div class="date">24</div>
</li>
<li class="day">
<div class="date">25</div>
<div class="event">
<div class="event-desc">
Conference Call
</div>
<div class="event-time">
1:00pm to 3:00pm
</div>
</div>
</li>
<li class="day">
<div class="date">26</div>
</li>
<li class="day">
<div class="date">27</div>
</li>
<li class="day">
<div class="date">28</div>
</li>
<li class="day">
<div class="date">29</div>
</li>
<li class="day">
<div class="date">30</div>
</li>
</ul>
<!-- Row #6 -->
<ul class="days">
<li class="day">
<div class="date">31</div>
</li>
<li class="day other-month">
<div class="date">1</div> <!-- Next Month -->
</li>
<li class="day other-month">
<div class="date">2</div>
</li>
<li class="day other-month">
<div class="date">3</div>
</li>
<li class="day other-month">
<div class="date">4</div>
</li>
<li class="day other-month">
<div class="date">5</div>
</li>
<li class="day other-month">
<div class="date">6</div>
</li>
</ul>
</div><!-- /. calendar -->
</div><!-- /. wrap -->
</body>
</html>5. Calendar with Sidebar
Made by Alex Oliver. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
/* not required */
*,:active{
outline: none;
}
*{
padding: 0px;
margin: 0px;
}
body{
margin: 20px;
background-color: #EEEDE9;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-size: 96.5%;
font-family: Helvetica, Arial, sans-serif;
}
input{
font-family: Helvetica, Arial, sans-serif;
}
h1, h2, h3, h4, h5, p{
margin-bottom: 10px;
}
p{
line-height: 20px;
}
a{
text-decoration: none;
color: #FF462B;
}
.clearfix{
clear: both;
}
.animate{
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
/* required */
.calendar{
position: absolute;
border-radius: 4px;
overflow: hidden;
width: 800px;
height: 450px;
left: 50%;
margin-left: -400px;
margin-top: -225px;
top: 50%;
background-color: #ffffff;
color: #333333;
}
.calendar h1, .calendar h2{
font-weight: 300;
font-size: 26px;
line-height: 28px;
text-transform: uppercase;
margin: 0px 0px 20px 0px;
}
.calendar h1 span{
display: block;
}
.calendar .col{
position: relative;
float: left;
height: 100%;
}
.calendar .col .content{
padding: 40px;
}
.calendar ul{
margin: 0px;
}
.calendar ul li{
list-style: none;
}
.calendar .leftCol{
width: 40%;
background-color: #F48989;
}
.calendar .noteList li{
color: #ffffff;
margin-bottom: 10px;
}
.calendar .notes p,
.calendar .notes input,
.calendar .noteList li{
font-weight: 300;
font-size: 14px;
}
.calendar .notes p{
border-bottom: solid 1px rgba(255,255,255,0.4);
}
.calendar .notes input{
background-color: #F48989;
color: #ffffff;
border: none;
width: 200px;
}
.calendar .addNote,
.calendar .removeNote{
float: right;
color: rgba(255,255,255,0.4);
font-weight: bold;
margin-left: 20px;
}
.calendar .addNote:hover,
.calendar .removeNote:hover{
color: #ffffff;
}
.calendar .addNote{
font-size: 16px;
}
.calendar .leftCol h1{
color: #ffffff;
margin-bottom: 40px;
}
.calendar .rightCol{
width: 60%;
}
.calendar .rightCol h2{
color: #C7BEBE;
text-align: right;
margin-bottom: 70px;
}
.calendar .months li,
.calendar .weekday li,
.calendar .days li{
float: left;
text-transform: uppercase;
}
.calendar .months li a,
.calendar .weekday li a,
.calendar .days li a{
display: block;
color: #747978;
}
.calendar .months li a{
font-size: 10px;
color: #C7BEBE;
text-align: center;
width: 32px;
margin-bottom: 20px;
}
.calendar .months li .selected{
font-weight: bold;
color: #747978;
}
.calendar .weekday li a{
width: 55px;
text-align: center;
margin-bottom: 20px;
font-size: 12px;
}
.calendar .days li{
width: 55px;
}
.calendar .days li a{
width: 36px;
height: 24px;
text-align: center;
margin: auto auto;
font-size: 12px;
font-weight: bold;
border-radius: 12px;
margin-bottom: 10px;
padding-top: 10px;
}
.calendar .days li a:hover{
background-color: #EEEDE9;
}
.calendar .days li .selected{
background-color: #F5A1A3!important;
color: #ffffff;
}
.calendar .days li .event{
color: #F5A1A3;
}
/* placeholder color */
::-webkit-input-placeholder {color: #ffffff; }
:-moz-placeholder {color: #ffffff; }
::-moz-placeholder {color: #ffffff; }
:-ms-input-placeholder {color: #ffffff; }
</style>
</head>
<body>
<div class="calendar">
<div class="col leftCol">
<div class="content">
<h1 class="date">Friday<span>September 12th</span></h1>
<div class="notes">
<p>
<input type="text" value="" placeholder="new note"/>
<a href="#" title="Add note" class="addNote animate">+</a>
</p>
<ul class="noteList">
<li>Headbutt a lion<a href="#" title="Remove note" class="removeNote animate">x</a></li>
</ul>
</div>
</div>
</div>
<div class="col rightCol">
<div class="content">
<h2 class="year">2013</h2>
<ul class="months">
<li><a href="#" title="Jan" data-value="1">Jan</a></li>
<li><a href="#" title="Feb" data-value="2">Feb</a></li>
<li><a href="#" title="Mar" data-value="3">Mar</a></li>
<li><a href="#" title="Apr" data-value="4">Apr</a></li>
<li><a href="#" title="May" data-value="5">May</a></li>
<li><a href="#" title="Jun" data-value="6">Jun</a></li>
<li><a href="#" title="Jul" data-value="7">Jul</a></li>
<li><a href="#" title="Aug" data-value="8">Aug</a></li>
<li><a href="#" title="Sep" data-value="9" class="selected">Sep</a></li>
<li><a href="#" title="Oct" data-value="10">Oct</a></li>
<li><a href="#" title="Nov" data-value="11">Nov</a></li>
<li><a href="#" title="Dec" data-value="12">Dec</a></li>
</ul>
<div class="clearfix"></div>
<ul class="weekday">
<li><a href="#" title="Mon" data-value="1">Mon</a></li>
<li><a href="#" title="Tue" data-value="2">Tue</a></li>
<li><a href="#" title="Wed" data-value="3">Wed</a></li>
<li><a href="#" title="Thu" data-value="4">Thu</a></li>
<li><a href="#" title="Fri" data-value="5">Fri</a></li>
<li><a href="#" title="Say" data-value="6">Sat</a></li>
<li><a href="#" title="Sun" data-value="7">Sun</a></li>
</ul>
<div class="clearfix"></div>
<ul class="days">
<script>
for( var _i = 1; _i <= 31; _i += 1 ){
var _addClass = '';
if( _i === 12 ){ _addClass = ' class="selected"'; }
switch( _i ){
case 8:
case 10:
case 27:
_addClass = ' class="event"';
break;
}
document.write( '<li><a href="#" title="'+_i+'" data-value="'+_i+'"'+_addClass+'>'+_i+'</a></li>' );
}
</script>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="clearfix"></div>
</div>
</body>
</html>6. Round Calendar
Made by Marco Biedermann. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300,400,700">
<style>
/* ---------- FONTAWESOME ---------- */
/* ---------- https://fortawesome.github.com/Font-Awesome/ ---------- */
/* ---------- http://weloveiconfonts.com/ ---------- */
@import url(https://weloveiconfonts.com/api/?family=fontawesome);
*[class*="fontawesome-"]:before {
font-family: 'FontAwesome', sans-serif;
}
/* ---------- GENERAL ---------- */
body {
background: #f9f9f9;
color: #0e171c;
display: grid;
font: 300 100%/1.5em 'Lato', sans-serif;
margin: 0;
min-height: 100vh;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
justify-items: center;
place-items: center;
}
a {
text-decoration: none;
}
h2 {
font-size: 2em;
line-height: 1.25em;
margin: .25em 0;
}
h3 {
font-size: 1.5em;
line-height: 1em;
margin: .33em 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.container {
width: 510px;
}
/* ---------- CALENDAR ---------- */
.calendar {
text-align: center;
}
.calendar header {
position: relative;
}
.calendar h2 {
text-transform: uppercase;
}
.calendar thead {
font-weight: 600;
text-transform: uppercase;
}
.calendar tbody {
color: #7c8a95;
}
.calendar tbody td:hover {
border: 2px solid #00addf;
}
.calendar td {
border: 2px solid transparent;
border-radius: 50%;
display: inline-block;
height: 4em;
line-height: 4em;
text-align: center;
width: 4em;
}
.calendar .prev-month,
.calendar .next-month {
color: #cbd1d2;
}
.calendar .prev-month:hover,
.calendar .next-month:hover {
border: 2px solid #cbd1d2;
}
.current-day {
background: #00addf;
color: #f9f9f9;
}
.event {
cursor: pointer;
position: relative;
}
.event:after {
background: #00addf;
border-radius: 50%;
bottom: .5em;
display: block;
content: '';
height: .5em;
left: 50%;
margin: -.25em 0 0 -.25em;
position: absolute;
width: .5em;
}
.event.current-day:after {
background: #f9f9f9;
}
.btn-prev,
.btn-next {
border: 2px solid #cbd1d2;
border-radius: 50%;
color: #cbd1d2;
height: 2em;
font-size: .75em;
line-height: 2em;
margin: -1em;
position: absolute;
top: 50%;
width: 2em;
}
.btn-prev:hover,
.btn-next:hover {
background: #cbd1d2;
color: #f9f9f9;
}
.btn-prev {
left: 6em;
}
.btn-next {
right: 6em;
}
</style>
</head>
<body>
<div class="container">
<div class="calendar">
<header>
<h2>September</h2>
<a class="btn-prev fontawesome-angle-left" href="#"></a>
<a class="btn-next fontawesome-angle-right" href="#"></a>
</header>
<table>
<thead>
<tr>
<td>Mo</td>
<td>Tu</td>
<td>We</td>
<td>Th</td>
<td>Fr</td>
<td>Sa</td>
<td>Su</td>
</tr>
</thead>
<tbody>
<tr>
<td class="prev-month">26</td>
<td class="prev-month">27</td>
<td class="prev-month">28</td>
<td class="prev-month">29</td>
<td class="prev-month">30</td>
<td class="prev-month">31</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td class="event">10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td class="event">21</td>
<td>22</td>
</tr>
<tr>
<td class="current-day event">23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
</tr>
<tr>
<td>30</td>
<td class="next-month">1</td>
<td class="next-month">2</td>
<td class="next-month">3</td>
<td class="next-month">4</td>
<td class="next-month">5</td>
<td class="next-month">6</td>
</tr>
</tbody>
</table>
</div> <!-- end calendar -->
</div> <!-- end container -->
</body>
</html>7. Flexbox responsive calendar
Made by Gabi. Source
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<title></title>
<style>
html {
font-size: 80%;
}
* {
margin: 0;
padding: 0;
font-family: "Times New Roman", Times, serif;
}
.calendar,
section {
max-width: 50rem;
}
.day {
width: 1.5em;
height: 1.5em;
}
.day:nth-of-type(7n+1) {
color: #f09;
}
.to.day {
color: white;
background: #f09;
border-radius: 50%;
}
.month {
width: calc(1.5em * 7);
padding: 1em;
cursor: pointer;
}
h4 {
font-size: 1em;
text-transform: uppercase;
color: #f09;
}
h1#year {
font-size: 2em;
height: 29px;
font-weight: normal;
padding: 1em 1em .5em 1em;
margin-bottom: .5em;
border-bottom: 5px double #d9d9d9;
}
.no-flexbox .day {
text-align: center;
float: left;
line-height: 1.5em;
}
.no-flexbox h4 {
text-align: center;
}
.no-flexbox h1 {
width: 4em;
}
/* FLEXBOX styles*/
body,
body * {
display: flex;
justify-content: center;
}
h4 {
justify-content: center;
flex: 1 0 100%;
}
h1 {
justify-content: center;
align-self: stretch;
}
.calendar,
.month {
flex-wrap: wrap;
}
section {
flex-direction: column;
align-self: center;
}
.month {
align-items: flex-start;
}
.day {
align-items: center;
justify-content: center;
}
/*for a Spanish like calendar
.month .day:nth-of-type(1){order:7!important;}
.month .day:nth-of-type(8){order:-1!important;}
*/
script {
display: none;
}
.cloneCont {
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-left: -5em;
margin-top: -10.89em;
box-shadow: 0px 0px 5px 1px #ccc;
transform: scale(2, 2);
background: rgba(255, 255, 255, .9);
animation: redimensionar .5s cubic-bezier(.86, 0, .07, 1);
}
.month.cloneMonth {
display: flex
}
.month.cloneMonth:after {
content: "\02718";
color: #f09;
position: absolute;
top: 1em;
right: 1em;
}
.cloneCont.trans {
transform: translateY(1000px);
background: rgba(255, 255, 255, .9);
opacity: 0;
animation: trasladar .5s cubic-bezier(.86, 0, .07, 1);
}
@keyframes redimensionar {
0% {
transform: scale(1, 1);
background: rgba(255, 255, 255, .9);
opacity: 0;
}
100% {
transform: scale(2, 2);
background: rgba(255, 255, 255, .9);
opacity: 1;
}
}
@keyframes trasladar {
0% {
opacity: 1;
}
100% {
transform: translateY(1000px);
opacity: 0;
}
}
</style>
</head>
<body>
<section>
<h1 id="year"></h1>
<div class="calendar"></div>
</section>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
<script src='https://codepen.io/enxaneta/pen/WrJREB.js'></script>
<script>
var monthNamesRy = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var daysOfTheWeekRy = ["S", "M", "T", "W", "T", "F", "S"];
var d = new Date();
var year = d.getFullYear(); // 2016
document.querySelector("#year").innerHTML = year;
var thisMonth = d.getMonth(); // 0 - 11
var today = d.getDate(); // 1 -31
//var nthday = d.getDay();// 0 - 7
var daysOfTheMonthDiv = document.querySelectorAll(".daysOfTheMonth");
for (var month = 0; month < 12; month++) {if (window.CP.shouldStopExecution(0)) break;
createCalendar(month);
}window.CP.exitedLoop(0);
function createCalendar(month) {
var monthDiv = createMonthHeader(month);
var firstDayOfTheMonth = getFirstDayOfTheMonth(year, month);
var daysinmonth = daysInMonth(year, month);
var counter = 0,order = 6;
for (var i = 0; i < firstDayOfTheMonth + 7; i++) {if (window.CP.shouldStopExecution(1)) break;
order++;
createDay(month, " ", order, monthDiv);
}window.CP.exitedLoop(1);
for (var i = firstDayOfTheMonth; i < daysInMonth(year, month) + firstDayOfTheMonth; i++) {if (window.CP.shouldStopExecution(2)) break;
counter++;
order++;
createDay(month, counter, order, monthDiv);
}window.CP.exitedLoop(2);
for (var i = firstDayOfTheMonth + daysinmonth; i < 6 * 7; i++) {if (window.CP.shouldStopExecution(3)) break;
order++;
createDay(month, " ", order, monthDiv);
}window.CP.exitedLoop(3);
}
function createDay(month, counter, order, monthDiv) {
//if(order == 8){order = -1}
var day = document.createElement("div");
if (month == thisMonth && counter == today) {day.setAttribute("class", "to day");
} else {
day.setAttribute("class", "day");}
day.setAttribute("style", "order:" + order);
day.innerHTML = counter;
monthDiv.appendChild(day);
/*
<div class="monthDiv">
<div class="day">5</div>
*/
}
function createMonthHeader(month) {
var calendar = document.querySelector(".calendar");
var monthDiv = document.createElement("div");
monthDiv.setAttribute("class", "month");
calendar.appendChild(monthDiv);
var h4 = document.createElement("h4");
h4.innerHTML = monthNamesRy[month];
monthDiv.appendChild(h4);
for (var i = 0; i < 7; i++) {if (window.CP.shouldStopExecution(4)) break;
//var order = (i == 0) ? order = 7 : order = i;
var hday = document.createElement("div");
hday.setAttribute("class", "day OfWeek");
hday.setAttribute("style", "order:" + i);
hday.innerHTML = daysOfTheWeekRy[i].toUpperCase();
monthDiv.appendChild(hday);
}window.CP.exitedLoop(4);
return monthDiv;
/*
<div class="month">
<div class="monthHeader">
<div class="day OfWeek">Sun</div>
<div class="day OfWeek">Mon</div>
<div class="day OfWeek">Tue</div>
<div class="day OfWeek">Wed</div>
<div class="day OfWeek">Thu</div>
<div class="day OfWeek">Fri</div>
<div class="day OfWeek">Sat</div>
</div>
<div class="daysOfTheMonth">
*/
}
function daysInMonth(year, month) {
return new Date(year, month + 1, 0).getDate(); //29/03/2016 (month + 1)
}
/*function leapYear(year){
return ((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0);
}
function getNextMonth(month){
if (month == 11) {
var nextMonth = 0;
} else {
var nextMonth = month+1;
}
return nextMonth;
}
*/
function getMonthName(month) {
return monthNamesRy[month];
}
function getDayName(day) {
return daysOfTheWeekRy[day];
}
function getFirstDayOfTheMonth(y, m) {
var firstDay = new Date(y, m, 1);
return firstDay.getDay();
}
function getLastDayOfTheMonth(y, m) {
var lastDay = new Date(y, m + 1, 0);
return lastDay.getDay();
}
// the popp up
var calendar = document.querySelector(".calendar");
var cloneCont = document.querySelector(".cloneCont");
var requestId = false;
calendar.addEventListener("click", function (e) {
if (this.querySelector(".cloneCont")) {
this.removeChild(this.querySelector(".cloneCont"));} else
if (e.target.parentNode.className == 'month') {
var monthClone = e.target.parentNode.cloneNode(true);
monthClone.className += " cloneMonth";
var cloneCont = document.createElement("div");
cloneCont.className += " cloneCont";
cloneCont.appendChild(monthClone);
this.appendChild(cloneCont);
}
}, false);
</script>
</body>
</html>8. CSS-only Calendar App Concept
Made by David Khourshid. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
* {
box-sizing: border-box;
position: relative;
}
html, body {
font-family: Lato, sans-serif;
font-weight: 300;
line-height: 1;
background-color: #4075b7;
width: 100%;
height: 100%;
counter-reset: previous-month 29 current-month next-month;
margin: 0;
}
aside, main {
width: 50%;
height: 816px;
float: left;
padding: 0 2rem;
margin: 2rem 0;
}
header {
color: white;
}
.header-bar {
height: 1rem;
}
.header-title {
padding: 1rem;
}
.header-title h1 {
font-weight: 300;
font-size: 1rem;
margin: 0;
padding: 0;
text-align: center;
text-transform: uppercase;
letter-spacing: 3px;
}
.header-weekdays {
height: 2rem;
}
.header-weekdays span {
font-size: 0.8rem;
display: block;
float: left;
width: 14.28571%;
padding: 0.5rem 0;
text-align: center;
text-transform: uppercase;
}
.calendar:before, .calendar:after {
content: " ";
display: table;
}
.calendar:after {
clear: both;
}
.calendar.inactive {
pointer-events: none;
}
form {
background: rgba(88, 178, 164, 0.9);
}
form:before, form:after {
content: " ";
display: table;
}
form:after {
clear: both;
}
.month {
padding: 1rem;
font-size: 1rem;
color: #333;
margin: 0;
}
.day {
float: left;
width: 14.28571%;
text-align: center;
padding: 1rem 0;
margin: 0;
font-size: 1rem;
line-height: 1;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
transition-property: background, color;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}
.device:not(:hover) .day {
transition-duration: 0;
}
.day:after {
display: block;
transition-property: transform, opacity;
transition-duration: 0.6s;
transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
}
.day.current-month:after {
content: counter(current-month);
counter-increment: current-month;
}
.day.next-month:after {
content: counter(next-month);
counter-increment: next-month;
}
.day.previous-month:after {
content: counter(previous-month);
counter-increment: previous-month;
}
.day.previous-month, .day.next-month {
color: rgba(51, 51, 51, 0.3);
}
.day:last-of-type:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 100%;
width: 700%;
height: 100%;
background: white;
}
.day:checked, .day:checked ~ .day {
color: white;
}
.day:checked ~ .day {
background-color: transparent;
}
.day:hover, .day:checked, .day ~ .day:hover, .day ~ .day:checked {
background-color: rgba(0, 0, 0, 0.1);
color: white;
}
.day, .day:checked ~ .day:checked ~ .day, .day:checked ~ .day:hover ~ .day, .day:checked:hover ~ .day {
background-color: white;
color: #333;
}
.day.next-month, .day:checked ~ .day:checked ~ .day.next-month, .day:checked ~ .day:hover ~ .day.next-month, .day:checked:hover ~ .day.next-month {
color: rgba(51, 51, 51, 0.3);
}
.day:nth-child(7n + 1):after {
transition-delay: 0s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.day:nth-child(7n + 2):after {
transition-delay: 0.08571s;
-webkit-animation-delay: 0.08571s;
animation-delay: 0.08571s;
}
.day:nth-child(7n + 3):after {
transition-delay: 0.17143s;
-webkit-animation-delay: 0.17143s;
animation-delay: 0.17143s;
}
.day:nth-child(7n + 4):after {
transition-delay: 0.25714s;
-webkit-animation-delay: 0.25714s;
animation-delay: 0.25714s;
}
.day:nth-child(7n + 5):after {
transition-delay: 0.34286s;
-webkit-animation-delay: 0.34286s;
animation-delay: 0.34286s;
}
.day:nth-child(7n + 6):after {
transition-delay: 0.42857s;
-webkit-animation-delay: 0.42857s;
animation-delay: 0.42857s;
}
.day:nth-child(7n + 7):after {
transition-delay: 0.51429s;
-webkit-animation-delay: 0.51429s;
animation-delay: 0.51429s;
}
.calendar-label-bg {
display: block;
position: absolute;
outline: none;
top: 0;
left: 0;
width: 100%;
height: 15rem;
margin: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
transform: translateX(-100%);
-webkit-animation: bg-inactive 1s cubic-bezier(0.77, 0, 0.175, 1);
animation: bg-inactive 1s cubic-bezier(0.77, 0, 0.175, 1);
}
.calendar-label-bg:checked {
-webkit-animation: bg-active 1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
animation: bg-active 1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
.calendar-label-bg:checked ~ .calendar .day:checked:after, .calendar-label-bg:checked ~ .calendar .day:checked ~ .day:after {
-webkit-animation-name: day-active;
animation-name: day-active;
-webkit-animation-duration: 0.6s;
animation-duration: 0.6s;
-webkit-animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
}
.calendar-label-bg:checked ~ .calendar .day:checked ~ .day:checked ~ .day:after {
-webkit-animation: none;
animation: none;
}
#vacation {
background-color: #d3738b;
}
#vacation:checked ~ .calendar .day:nth-child(7n + 1) {
z-index: 70;
}
#vacation:checked ~ .calendar .day:nth-child(7n + 2) {
z-index: 60;
}
#vacation:checked ~ .calendar .day:nth-child(7n + 3) {
z-index: 50;
}
#vacation:checked ~ .calendar .day:nth-child(7n + 4) {
z-index: 40;
}
#vacation:checked ~ .calendar .day:nth-child(7n + 5) {
z-index: 30;
}
#vacation:checked ~ .calendar .day:nth-child(7n + 6) {
z-index: 20;
}
#vacation:checked ~ .calendar .day:nth-child(7n + 7) {
z-index: 10;
}
#vacation:checked ~ .calendar .calendar-labels label[for=vacation]:not(.full):before {
visibility: visible;
-webkit-animation: check-active 0.1s 0.2s ease-out both;
animation: check-active 0.1s 0.2s ease-out both;
}
#vacation:checked ~ .calendar .calendar-labels label[for=vacation].full input {
font-weight: 700;
}
#vacation:checked ~ .calendar .calendar-labels label[for=vacation].full:before {
color: white;
border-color: white;
}
#vacation:checked ~ .calendar .calendar-labels label[for=vacation] > span {
transform: translateX(2rem);
}
#fishing {
background-color: #8f658a;
}
#fishing:checked ~ .calendar .day:nth-child(7n + 1) {
z-index: 70;
}
#fishing:checked ~ .calendar .day:nth-child(7n + 2) {
z-index: 60;
}
#fishing:checked ~ .calendar .day:nth-child(7n + 3) {
z-index: 50;
}
#fishing:checked ~ .calendar .day:nth-child(7n + 4) {
z-index: 40;
}
#fishing:checked ~ .calendar .day:nth-child(7n + 5) {
z-index: 30;
}
#fishing:checked ~ .calendar .day:nth-child(7n + 6) {
z-index: 20;
}
#fishing:checked ~ .calendar .day:nth-child(7n + 7) {
z-index: 10;
}
#fishing:checked ~ .calendar .calendar-labels label[for=fishing]:not(.full):before {
visibility: visible;
-webkit-animation: check-active 0.1s 0.2s ease-out both;
animation: check-active 0.1s 0.2s ease-out both;
}
#fishing:checked ~ .calendar .calendar-labels label[for=fishing].full input {
font-weight: 700;
}
#fishing:checked ~ .calendar .calendar-labels label[for=fishing].full:before {
color: white;
border-color: white;
}
#fishing:checked ~ .calendar .calendar-labels label[for=fishing] > span {
transform: translateX(2rem);
}
#walk {
background-color: #7186db;
}
#walk:checked ~ .calendar .day:nth-child(7n + 1) {
z-index: 70;
}
#walk:checked ~ .calendar .day:nth-child(7n + 2) {
z-index: 60;
}
#walk:checked ~ .calendar .day:nth-child(7n + 3) {
z-index: 50;
}
#walk:checked ~ .calendar .day:nth-child(7n + 4) {
z-index: 40;
}
#walk:checked ~ .calendar .day:nth-child(7n + 5) {
z-index: 30;
}
#walk:checked ~ .calendar .day:nth-child(7n + 6) {
z-index: 20;
}
#walk:checked ~ .calendar .day:nth-child(7n + 7) {
z-index: 10;
}
#walk:checked ~ .calendar .calendar-labels label[for=walk]:not(.full):before {
visibility: visible;
-webkit-animation: check-active 0.1s 0.2s ease-out both;
animation: check-active 0.1s 0.2s ease-out both;
}
#walk:checked ~ .calendar .calendar-labels label[for=walk].full input {
font-weight: 700;
}
#walk:checked ~ .calendar .calendar-labels label[for=walk].full:before {
color: white;
border-color: white;
}
#walk:checked ~ .calendar .calendar-labels label[for=walk] > span {
transform: translateX(2rem);
}
#weekend {
background-color: #f7c187;
}
#weekend:checked ~ .calendar .day:nth-child(7n + 1) {
z-index: 70;
}
#weekend:checked ~ .calendar .day:nth-child(7n + 2) {
z-index: 60;
}
#weekend:checked ~ .calendar .day:nth-child(7n + 3) {
z-index: 50;
}
#weekend:checked ~ .calendar .day:nth-child(7n + 4) {
z-index: 40;
}
#weekend:checked ~ .calendar .day:nth-child(7n + 5) {
z-index: 30;
}
#weekend:checked ~ .calendar .day:nth-child(7n + 6) {
z-index: 20;
}
#weekend:checked ~ .calendar .day:nth-child(7n + 7) {
z-index: 10;
}
#weekend:checked ~ .calendar .calendar-labels label[for=weekend]:not(.full):before {
visibility: visible;
-webkit-animation: check-active 0.1s 0.2s ease-out both;
animation: check-active 0.1s 0.2s ease-out both;
}
#weekend:checked ~ .calendar .calendar-labels label[for=weekend].full input {
font-weight: 700;
}
#weekend:checked ~ .calendar .calendar-labels label[for=weekend].full:before {
color: white;
border-color: white;
}
#weekend:checked ~ .calendar .calendar-labels label[for=weekend] > span {
transform: translateX(2rem);
}
#new {
background-color: #58b2a4;
}
#new:checked ~ .calendar .day:nth-child(7n + 1) {
z-index: 70;
}
#new:checked ~ .calendar .day:nth-child(7n + 2) {
z-index: 60;
}
#new:checked ~ .calendar .day:nth-child(7n + 3) {
z-index: 50;
}
#new:checked ~ .calendar .day:nth-child(7n + 4) {
z-index: 40;
}
#new:checked ~ .calendar .day:nth-child(7n + 5) {
z-index: 30;
}
#new:checked ~ .calendar .day:nth-child(7n + 6) {
z-index: 20;
}
#new:checked ~ .calendar .day:nth-child(7n + 7) {
z-index: 10;
}
#new:checked ~ .calendar .calendar-labels label[for=new]:not(.full):before {
visibility: visible;
-webkit-animation: check-active 0.1s 0.2s ease-out both;
animation: check-active 0.1s 0.2s ease-out both;
}
#new:checked ~ .calendar .calendar-labels label[for=new].full input {
font-weight: 700;
}
#new:checked ~ .calendar .calendar-labels label[for=new].full:before {
color: white;
border-color: white;
}
#new:checked ~ .calendar .calendar-labels label[for=new] > span {
transform: translateX(2rem);
}
.calendar-labels {
display: none;
width: 100%;
position: absolute;
top: 0;
z-index: 100;
pointer-events: none;
transition: all 0s ease-in-out;
transition-delay: 1s;
transform: translateY(0);
opacity: 0;
}
.device:hover .calendar-labels {
display: block;
}
.calendar-labels:before {
content: '';
display: block;
position: absolute;
bottom: 100%;
height: 15rem;
width: 100%;
pointer-events: auto;
}
.calendar-labels > label {
display: block;
float: left;
width: 57.14286%;
font-size: 1rem;
padding: 1rem;
color: white;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.calendar-labels > label:before {
display: block;
position: absolute;
left: 0.75rem;
height: 1rem;
visibility: hidden;
}
.calendar-labels > label.full {
width: 100%;
font-weight: 700;
}
.calendar-labels > label.full:before {
transition-property: color, border-color;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
content: '+';
top: calc(50% - 0.75rem);
font-size: 1rem;
font-weight: 700;
width: 1rem;
border: 4px solid rgba(255, 255, 255, 0.7);
color: rgba(255, 255, 255, 0.7);
border-radius: 50%;
text-align: center;
visibility: visible;
}
.calendar-labels > label.full > input {
display: block;
margin-left: 2rem;
width: calc(100% - 2rem);
font-size: 1rem;
background-image: none;
background-color: transparent;
outline: none;
border: none;
color: white;
line-height: 1;
padding: 0;
}
.calendar-labels > label.full > input::-moz-placeholder {
color: rgba(255, 255, 255, 0.7);
}
.calendar-labels > label.full > input:-ms-input-placeholder {
color: rgba(255, 255, 255, 0.7);
}
.calendar-labels > label.full > input::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.calendar-labels > label.reset {
width: 100%;
background: white;
float: left;
padding: 0;
height: 3rem;
}
.calendar-labels > label.reset > input {
display: block;
padding: 1rem;
line-height: 1;
font-size: 0.8rem;
width: 100%;
height: 100%;
-webkit-appearance: none;
border: none;
background: transparent;
outline: none;
text-transform: uppercase;
color: rgba(51, 51, 51, 0.3);
letter-spacing: 3px;
}
.calendar-labels > label:not(.full):before {
content: '';
top: 50%;
width: 0.5rem;
transform: scaleX(-1) rotate(135deg);
transform-origin: left top;
border-right: 5px solid rgba(255, 255, 255, 0.7);
border-top: 5px solid rgba(255, 255, 255, 0.7);
-webkit-animation: check-inactive 0.3s 0 cubic-bezier(0.77, 0, 0.175, 1) both;
animation: check-inactive 0.3s 0 cubic-bezier(0.77, 0, 0.175, 1) both;
}
.calendar-labels > label > * {
transition: transform 0.3s cubic-bezier(0.77, 0, 0.175, 1);
display: inline-block;
}
.calendar-labels > label[for="vacation"] {
background: #d3738b;
}
.calendar-labels > label[for="fishing"] {
background: #8f658a;
}
.calendar-labels > label[for="walk"] {
background: #7186db;
}
.calendar-labels > label[for="weekend"] {
background: #f7c187;
}
.calendar-labels > label[for="new"] {
background: #58b2a4;
}
.calendar-labels > label:nth-child(n + 2):nth-child(-n + 3) {
width: 42.85714%;
}
.calendar-labels > label:nth-child(2n - 1) {
z-index: 20;
-webkit-animation-name: leftLabel-inactive;
animation-name: leftLabel-inactive;
}
.calendar-labels > label:nth-child(2n) {
z-index: 10;
-webkit-animation-name: rightLabel-inactive;
animation-name: rightLabel-inactive;
}
.day:checked ~ .day:checked ~ .calendar-labels {
transition-delay: 0s;
display: block;
opacity: 1;
}
.day:checked ~ .day:checked:nth-child(n + 1):nth-child(-n + 7) ~ .calendar-labels {
transform: translateY(3rem);
pointer-events: auto;
}
.day:checked ~ .day:checked:nth-child(n + 8):nth-child(-n + 14) ~ .calendar-labels {
transform: translateY(6rem);
pointer-events: auto;
}
.day:checked ~ .day:checked:nth-child(n + 15):nth-child(-n + 21) ~ .calendar-labels {
transform: translateY(9rem);
pointer-events: auto;
}
.day:checked ~ .day:checked:nth-child(n + 22):nth-child(-n + 28) ~ .calendar-labels {
transform: translateY(12rem);
pointer-events: auto;
}
.day:checked ~ .day:checked:nth-child(n + 29):nth-child(-n + 35) ~ .calendar-labels {
transform: translateY(15rem);
pointer-events: auto;
}
.day:checked ~ .day:checked ~ .day:nth-child(7n) ~ .day:after, .day:checked ~ .day:checked:nth-child(7n) ~ .day:after {
transform: translateY(15rem);
opacity: 0;
}
.day:checked ~ .day:checked ~ .calendar-labels label:nth-child(2n - 1) {
z-index: 20;
-webkit-animation: leftLabel-active 1s cubic-bezier(0.77, 0, 0.175, 1) both;
animation: leftLabel-active 1s cubic-bezier(0.77, 0, 0.175, 1) both;
}
.day:checked ~ .day:checked ~ .calendar-labels label:nth-child(2n) {
z-index: 10;
-webkit-animation: rightLabel-active 1s cubic-bezier(0.77, 0, 0.175, 1) both;
animation: rightLabel-active 1s cubic-bezier(0.77, 0, 0.175, 1) both;
}
@-webkit-keyframes check-active {
0% {
width: 0;
height: 0;
opacity: 0;
}
50% {
opacity: 1;
width: 0.5rem;
height: 0;
}
100% {
opacity: 1;
}
}
@keyframes check-active {
0% {
width: 0;
height: 0;
opacity: 0;
}
50% {
opacity: 1;
width: 0.5rem;
height: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes check-inactive {
50% {
opacity: 1;
width: 0.5rem;
height: 0;
}
100% {
width: 0;
height: 0;
opacity: 0;
}
}
@keyframes check-inactive {
50% {
opacity: 1;
width: 0.5rem;
height: 0;
}
100% {
width: 0;
height: 0;
opacity: 0;
}
}
@-webkit-keyframes labels-inactive {
to {
transform: translateY(0);
}
}
@keyframes labels-inactive {
to {
transform: translateY(0);
}
}
@-webkit-keyframes leftLabel-active {
from {
transform: translateX(-100%);
}
}
@keyframes leftLabel-active {
from {
transform: translateX(-100%);
}
}
@-webkit-keyframes leftLabel-inactive {
to {
transform: translateX(-100%);
}
}
@keyframes leftLabel-inactive {
to {
transform: translateX(-100%);
}
}
@-webkit-keyframes rightLabel-active {
from {
transform: translateX(-300%);
}
}
@keyframes rightLabel-active {
from {
transform: translateX(-300%);
}
}
@-webkit-keyframes rightLabel-inactive {
to {
transform: translateX(-300%);
}
}
@keyframes rightLabel-inactive {
to {
transform: translateX(-300%);
}
}
@-webkit-keyframes bg-active {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
@keyframes bg-active {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
@-webkit-keyframes bg-inactive {
from {
transform: translateX(0);
}
to {
transform: translateX(100%);
}
}
@keyframes bg-inactive {
from {
transform: translateX(0);
}
to {
transform: translateX(100%);
}
}
@-webkit-keyframes day-active {
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
@keyframes day-active {
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
.meta {
top: 50%;
transform: translateY(-50%);
font-size: 1.2rem;
}
.meta p, .meta a {
color: rgba(255, 255, 255, 0.5);
}
.meta h1 {
font-size: 3rem;
line-height: 1.2;
font-weight: 300;
color: white;
}
.meta p {
line-height: 1.4;
}
.meta a:hover {
color: rgba(255, 255, 255, 0.7);
}
.device {
position: absolute;
right: 2rem;
height: 816px;
width: 396px;
padding: 90px 10px;
border: 5px solid white;
border-radius: 60px;
background-color: #dcdfe6;
box-shadow: 0 0 50px 10px rgba(0, 0, 0, 0.1);
}
.device:before, .device:after {
content: '';
position: absolute;
z-index: 2;
}
.device:before {
width: 20%;
height: 10px;
top: 40px;
left: 40%;
border-radius: 10px;
background-color: #a1a5b3;
}
.device:after {
width: 50px;
height: 50px;
border-radius: 50%;
border: solid 5px #bdc0ca;
left: calc(50% - 25px);
bottom: 15px;
}
.device header {
height: 6rem;
background-color: #58b2a4;
}
.device section {
height: calc(100% - 6rem);
width: 100%;
overflow: hidden;
background-color: white;
}
</style>
</head>
<body>
<main>
<div class="device">
<header>
<div class="header-bar"></div>
<div class="header-title">
<h1>Calendar</h1>
</div>
<div class="header-weekdays">
<span>sun</span>
<span>mon</span>
<span>tue</span>
<span>wed</span>
<span>thu</span>
<span>fri</span>
<span>sat</span>
</div>
</header>
<section>
<h2 class="month">December</h2>
<form>
<input type="radio" name="calendar-label-bg" class="calendar-label-bg" id="vacation" />
<input type="radio" name="calendar-label-bg" class="calendar-label-bg" id="walk" />
<input type="radio" name="calendar-label-bg" class="calendar-label-bg" id="fishing" />
<input type="radio" name="calendar-label-bg" class="calendar-label-bg" id="weekend" />
<input type="radio" name="calendar-label-bg" id="new" class="calendar-label-bg">
<div class="calendar">
<input type="checkbox" name="" id="" class="day previous-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day next-month" />
<input type="checkbox" name="" id="" class="day next-month" />
<input type="checkbox" name="" id="" class="day next-month" />
<div class="calendar-labels">
<label for="vacation"><span>vacation</span></label>
<label for="walk"><span>walk</span></label>
<label for="fishing"><span>fishing</span></label>
<label for="weekend"><span>weekend</span></label>
<label for="new" class="full"><input type="text" placeholder="Add new task"></label>
<label class="reset">
<input type="reset" value="Reset"/>
</label>
</div>
</div>
</form>
<h2 class="month">January</h2>
<div class="calendar inactive">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
</div>
</section>
</div>
</main>
<aside>
<div class="meta">
<h1>CSS-only Calendar App Concept</h1>
<p>
Dribbble Rework<br>
Original shot by <a href="https://dribbble.com/shots/1841134-Gif-for-Calendar">Sergey Valiukh</a>
</p>
<p>
Click two dates and the labels to see the effect.<br>
Works <strike>best</strike> only in Chrome and Safari.
</p>
</div>
</aside>
</body>
</html>9. Responsive CSS calendar
Made by Michael Groklaus. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
html,
body {
margin: 0;
padding: 0;
}
html {
font-size: 10px;
}
body {
background: #001823;
height: 100%;
font-family: Helvetica, Arial, serif;
}
.calendar {
margin: 4rem;
padding: 0;
list-style: none;
font-size: 1.4rem;
}
.calendar-day {
color: #fff;
position: relative;
box-sizing: border-box;
}
.calendar-day:nth-child(7n+1)::before {
content: attr(data-week);
position: absolute;
color: #999;
}
.calendar-day::after {
content: attr(data-weekday);
position: absolute;
color: #999;
}
.calendar-day__content {
background: #4e8792;
}
.calendar-day--not-month .calendar-day__content {
opacity: 0.5;
}
.calendar-day--today .calendar-day__content {
background-color: #67c77c;
}
.calendar-day--entry .calendar-day__content {
background-color: #ab6381;
}
.calendar-day__number {
position: absolute;
top: 0.5rem;
left: 0.5rem;
}
@media screen and (max-width: 40rem) {
.calendar-day {
margin: 0 0 2px;
}
.calendar-day:nth-child(7n+1)::before {
left: 0;
right: 0;
bottom: calc(100% + .5rem);
display: block;
text-align: center;
}
.calendar-day::after {
right: calc(100% + .5rem);
top: 0.5rem;
}
.calendar-day--not-month {
display: none;
}
.calendar-day--begin-week {
margin-top: 3rem;
}
.calendar-day__content {
padding: 0 0 20%;
}
}
@media screen and (min-width: 40rem) {
.calendar {
display: flex;
flex-wrap: wrap;
}
.calendar-day {
flex-basis: calc(14.28571% - 2px);
margin: 1px;
}
.calendar-day:nth-child(7n+1)::before {
right: calc(100% + .5rem);
top: 0.5rem;
}
.calendar-day::after {
display: none;
}
.calendar-day:nth-child(-n+7)::after {
display: inline;
bottom: calc(100% + .2rem);
left: 0.5rem;
}
.calendar-day--not-month {
display: block;
}
.calendar-day--past .calendar-day__number {
opacity: 0.5;
}
.calendar-day__content {
padding-bottom: 100%;
}
}
</style>
</head>
<body>
<ol class="calendar">
<li class="calendar-day calendar-day--begin-week calendar-day--past calendar-day--not-month" data-weekday="Mon" data-week="39">
<span class="calendar-day__number">26</span>
<div class="calendar-day__content"></div>
</li>
<li class="calendar-day calendar-day--past calendar-day--not-month" data-weekday="Tue" data-week="39">
<span class="calendar-day__number">27</span>
<div class="calendar-day__content"></div>
</li>
<li class="calendar-day calendar-day--past calendar-day--not-month" data-weekday="Wed" data-week="39">
<span class="calendar-day__number">28</span>
<div class="calendar-day__content"></div>
</li>
<li class="calendar-day calendar-day--past calendar-day--entry calendar-day--not-month" data-weekday="Thu" data-week="39">
<span class="calendar-day__number">29</span>
<div class="calendar-day__content"></div>
</li>
<li class="calendar-day calendar-day--past calendar-day--not-month" data-weekday="Fri" data-week="39">
<span class="calendar-day__number">30</span>
<div class="calendar-day__content"></div>
</li>
<li class="calendar-day calendar-day--past calendar-day--entry" data-weekday="Sat" data-week="39">
<span class="calendar-day__number">01</span>
<div class="calendar-day__content"></div>
</li>
<li class="calendar-day calendar-day--past calendar-day--entry" data-weekday="Sun" data-week="39">
<span class="calendar-day__number">02</span>
<div class="calendar-day__content"></div>
</li>
<li class="calendar-day calendar-day--begin-week calendar-day--past" data-weekday="Mon" data-week="40">
<span class="calendar-day__number">03</span>
<div class="calendar-day__content"></div>
</li>
<li class="calendar-day calendar-day--past" data-weekday="Tue" data-week="40">
<span class="calendar-day__number">04</span>
<div class="calendar-day__content"></div>
</li>
<li class="calendar-day calendar-day--past" data-weekday="Wed" data-week="40">
<span class="calendar-day__number">05</span>
<div class="calendar-day__content"></div>
</li>
<li class="calendar-day calendar-day--past" data-weekday="Thu" data-week="40">
<span class="calendar-day__number">06</span>
<div class="calendar-day__content"></div>
</li>
<li class="calendar-day calendar-day--today" data-weekday="Fri" data-week="40">
<span class="calendar-day__number">07</span>
<div class="calendar-day__content"></div>
</li>
<li class="calendar-day" data-weekday="Sat" data-week="40">
<span class="calendar-day__number">08</span>
<div class="calendar-day__content"></div>
</li>
<li class="calendar-day calendar-day--entry" data-weekday="Sun" data-week="40">
<span class="calendar-day__number">09</span>
<div class="calendar-day__content"></div>
</li>
<li class="calendar-day calendar-day--begin-week calendar-day--entry" data-weekday="Mon" data-week="41">
<span class="calendar-day__number">10</span>
<div class="calendar-day__content"></div>
</li>
<li class="calendar-day calendar-day--entry" data-weekday="Tue" data-week="41">
<span class="calendar-day__number">11</span>
<div class="calendar-day__content"></div>
</li>
<li class="calendar-day calendar-day--entry" data-weekday="Wed" data-week="41">
<span class="calendar-day__number">12</span>
<div class="calendar-day__content"></div>
</li>
<li class="calendar-day" data-weekday="Thu" data-week="41">
<span class="calendar-day__number">13</span>
<div class="calendar-day__content"></div>
</li>
<li class="calendar-day" data-weekday="Fri" data-week="41">
<span class="calendar-day__number">14</span>
<div class="calendar-day__content"></div>
</li>
<li class="calendar-day" data-weekday="Sat" data-week="41">
<span class="calendar-day__number">15</span>
<div class="calendar-day__content"></div>
</li>
<li class="calendar-day" data-weekday="Sun" data-week="41">
<span class="calendar-day__number">16</span>
<div class="calendar-day__content"></div>
</li>
<li class="calendar-day calendar-day--begin-week" data-weekday="Mon" data-week="42">
<span class="calendar-day__number">17</span>
<div class="calendar-day__content"></div>
</li>
<li class="calendar-day" data-weekday="Tue" data-week="42">
<span class="calendar-day__number">18</span>
<div class="calendar-day__content"></div>
</li>
<li class="calendar-day" data-weekday="Wed" data-week="42">
<span class="calendar-day__number">19</span>
<div class="calendar-day__content"></div>
</li>
<li class="calendar-day" data-weekday="Thu" data-week="42">
<span class="calendar-day__number">20</span>
<div class="calendar-day__content"></div>
</li>
<li class="calendar-day" data-weekday="Fri" data-week="42">
<span class="calendar-day__number">21</span>
<div class="calendar-day__content"></div>
</li>
<li class="calendar-day" data-weekday="Sat" data-week="42">
<span class="calendar-day__number">22</span>
<div class="calendar-day__content"></div>
</li>
<li class="calendar-day" data-weekday="Sun" data-week="42">
<span class="calendar-day__number">23</span>
<div class="calendar-day__content"></div>
</li>
<li class="calendar-day calendar-day--begin-week" data-weekday="Mon" data-week="43">
<span class="calendar-day__number">24</span>
<div class="calendar-day__content"></div>
</li>
<li class="calendar-day" data-weekday="Tue" data-week="43">
<span class="calendar-day__number">25</span>
<div class="calendar-day__content"></div>
</li>
<li class="calendar-day" data-weekday="Wed" data-week="43">
<span class="calendar-day__number">26</span>
<div class="calendar-day__content"></div>
</li>
<li class="calendar-day" data-weekday="Thu" data-week="43">
<span class="calendar-day__number">27</span>
<div class="calendar-day__content"></div>
</li>
<li class="calendar-day" data-weekday="Fri" data-week="43">
<span class="calendar-day__number">28</span>
<div class="calendar-day__content"></div>
</li>
<li class="calendar-day" data-weekday="Sat" data-week="43">
<span class="calendar-day__number">29</span>
<div class="calendar-day__content"></div>
</li>
<li class="calendar-day" data-weekday="Sun" data-week="43">
<span class="calendar-day__number">30</span>
<div class="calendar-day__content"></div>
</li>
<li class="calendar-day calendar-day--begin-week" data-weekday="Mon" data-week="44">
<span class="calendar-day__number">31</span>
<div class="calendar-day__content"></div>
</li>
<li class="calendar-day calendar-day--not-month" data-weekday="Tue" data-week="44">
<span class="calendar-day__number">01</span>
<div class="calendar-day__content"></div>
</li>
<li class="calendar-day calendar-day--not-month" data-weekday="Wed" data-week="44">
<span class="calendar-day__number">02</span>
<div class="calendar-day__content"></div>
</li>
<li class="calendar-day calendar-day--not-month" data-weekday="Thu" data-week="44">
<span class="calendar-day__number">03</span>
<div class="calendar-day__content"></div>
</li>
<li class="calendar-day calendar-day--not-month" data-weekday="Fri" data-week="44">
<span class="calendar-day__number">04</span>
<div class="calendar-day__content"></div>
</li>
<li class="calendar-day calendar-day--not-month" data-weekday="Sat" data-week="44">
<span class="calendar-day__number">05</span>
<div class="calendar-day__content"></div>
</li>
<li class="calendar-day calendar-day--not-month" data-weekday="Sun" data-week="44">
<span class="calendar-day__number">06</span>
<div class="calendar-day__content"></div>
</li>
</ol>
</body>
</html>10. Calendar mobile app UI
Made by Eliza Rajbhandari. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700" rel="stylesheet">
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
-webkit-font-smoothing: antialiased;
font-family: "Montserrat", sans-serif;
text-rendering: optimizeLegibility;
background: #fcfcfc;
}
.mock-up-link {
display: none;
}
@media (min-width: 768px) {
.mock-up-link {
display: block;
}
}
.main-container-wrapper {
background-color: #F8FAFA;
min-width: 320px;
min-height: 568px;
max-width: 414px;
overflow-y: auto;
}
@media (min-width: 415px) {
.main-container-wrapper {
-moz-box-shadow: 0px 32px 47px rgba(32, 23, 23, 0.09);
-webkit-box-shadow: 0px 32px 47px rgba(32, 23, 23, 0.09);
box-shadow: 0px 32px 47px rgba(32, 23, 23, 0.09);
margin: 24px auto;
}
}
header {
background-color: #fff;
display: flex;
height: 58px;
justify-content: space-between;
overflow: hidden;
position: relative;
}
.header__btn {
background-color: #86D8C9;
border: 2px solid #fff;
border-radius: 50%;
-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
cursor: pointer;
height: 80px;
padding-top: 18px;
position: absolute;
top: -25px;
width: 80px;
}
.header__btn:hover, .header__btn:focus {
background: #67cebb;
transition: all 0.3s ease-in;
outline: none;
}
.header__btn .icon {
display: inline-block;
}
.header__btn--left {
left: -25px;
padding-left: 38px;
text-align: left;
}
.header__btn--right {
padding-right: 32px;
right: -25px;
text-align: right;
}
.calendar-container {
background-color: #fff;
padding: 16px;
margin-bottom: 24px;
}
.calendar-container__header {
display: flex;
justify-content: space-between;
}
.calendar-container__btn {
background: transparent;
border: 0;
cursor: pointer;
font-size: 16px;
outline: none;
color: #E9E8E8;
}
.calendar-container__btn:hover, .calendar-container__btn:focus {
color: #9FAAB7;
transition: all 0.3s ease-in;
}
.calendar-container__title {
color: #222741;
font-size: 20px;
font-weight: 700;
}
.calendar-table {
margin-top: 12px;
width: 100%;
}
.calendar-table__item {
border: 2px solid transparent;
border-radius: 50%;
color: #424588;
font-size: 12px;
font-weight: 700;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.calendar-table__item:hover {
background: #f8fafa;
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
transition: 0.2s all ease-in;
}
.calendar-table__row {
display: flex;
justify-content: center;
}
.calendar-table__header {
border-bottom: 2px solid #F2F6F8;
margin-bottom: 4px;
}
.calendar-table__header .calendar-table__col {
display: inline-block;
color: #99A4AE;
font-size: 12px;
font-weight: 700;
padding: 12px 3px;
text-align: center;
text-transform: uppercase;
width: 40px;
height: 38px;
}
@media (min-width: 360px) {
.calendar-table__header .calendar-table__col {
width: 46px;
}
}
@media (min-width: 410px) {
.calendar-table__header .calendar-table__col {
width: 54px;
}
}
.calendar-table__body .calendar-table__col {
width: 40px;
height: 42px;
padding-bottom: 2px;
}
@media (min-width: 360px) {
.calendar-table__body .calendar-table__col {
width: 46px;
height: 48px;
}
}
@media (min-width: 410px) {
.calendar-table__body .calendar-table__col {
width: 54px;
height: 56px;
}
}
.calendar-table__today .calendar-table__item {
border-color: #FEFEFE;
background-color: #F2F6F8;
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
}
.calendar-table__event .calendar-table__item {
background-color: #66DCEC;
border-color: #FEFEFE;
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
color: #fff;
}
.calendar-table__event--long {
overflow-x: hidden;
}
.calendar-table__event--long .calendar-table__item {
border-radius: 0;
border-width: 2px 0;
}
.calendar-table__event--start .calendar-table__item {
border-left: 2px solid #fff;
border-radius: 50% 0 0 50%;
}
.calendar-table__event--start.calendar-table__col:last-child .calendar-table__item {
border-width: 2px;
}
.calendar-table__event--end .calendar-table__item {
border-right: 2px solid #fff;
border-radius: 0 50% 50% 0;
}
.calendar-table__event--end.calendar-table__col:first-child .calendar-table__item {
border-width: 2px;
}
.calendar-table__inactive .calendar-table__item {
color: #DCDCE3;
cursor: default;
}
.calendar-table__inactive .calendar-table__item:hover {
background: transparent;
box-shadow: none;
}
.calendar-table__inactive.calendar-table__event .calendar-table__item {
color: #fff;
opacity: 0.25;
}
.calendar-table__inactive.calendar-table__event .calendar-table__item:hover {
background: #66DCEC;
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
}
.events-container {
padding: 0 15px;
}
.events__title {
color: #BEC1CA;
display: inline-block;
font-size: 14px;
font-weight: 600;
margin-bottom: 16px;
}
.events__tag {
background: #66DCEC;
border: 2px solid #FEFEFE;
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
border-radius: 20px;
color: #fff;
font-size: 10px;
font-weight: 600;
width: 60px;
margin-left: 16px;
padding: 5px 2px;
text-align: center;
}
.events__tag--highlighted {
background: #FDCA40;
}
.events__item {
background: #fff;
border-left: 8px solid #86D8C9;
border-radius: 2px;
-moz-box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.05);
-webkit-box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.05);
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.05);
padding: 15px 16px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.events__item--left {
width: calc(100% - 76px);
}
.events__name {
font-size: 12px;
font-weight: 700;
color: #222741;
display: block;
margin-bottom: 6px;
}
.events__date {
font-size: 12px;
color: #9FAAB7;
display: inline-block;
}
</style>
</head>
<body>
<p class="mock-up-link">Mock up link <a href="https://dribbble.com/shots/5465486-Calendar-UI#comment-7928835">here</a></p>
<div class="main-container-wrapper">
<header>
<button class="header__btn header__btn--left" title="Menu">
<svg class="icon" width="20px" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill="#fff" d="M0 0h20v2H0zM0 7h20v2H0zM0 14h20v2H0z"/>
</svg>
</button>
<button class="header__btn header__btn--right" title="Add event">
<svg class="icon" width="26px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="#fff" d="M416 277.333H277.333V416h-42.666V277.333H96v-42.666h138.667V96h42.666v138.667H416v42.666z"/>
</svg>
</button>
</header>
<main>
<div class="calendar-container">
<div class="calendar-container__header">
<button class="calendar-container__btn calendar-container__btn--left" title="Previous">
<i class="icon ion-ios-arrow-back"></i>
</button>
<h2 class="calendar-container__title">October 2018</h2>
<button class="calendar-container__btn calendar-container__btn--right" title="Next">
<i class="icon ion-ios-arrow-forward"></i>
</button>
</div>
<div class="calendar-container__body">
<div class="calendar-table">
<div class="calendar-table__header">
<div class="calendar-table__row">
<div class="calendar-table__col">S</div>
<div class="calendar-table__col">M</div>
<div class="calendar-table__col">T</div>
<div class="calendar-table__col">W</div>
<div class="calendar-table__col">T</div>
<div class="calendar-table__col">F</div>
<div class="calendar-table__col">S</div>
</div>
</div>
<div class="calendar-table__body">
<div class="calendar-table__row">
<div class="calendar-table__col calendar-table__inactive">
<div class="calendar-table__item">
<span>30</span>
</div>
</div>
<div class="calendar-table__col calendar-table__today">
<div class="calendar-table__item">
<span>1</span>
</div>
</div>
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>2</span>
</div>
</div>
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>3</span>
</div>
</div>
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>4</span>
</div>
</div>
<div class="calendar-table__col calendar-table__event">
<div class="calendar-table__item">
<span>5</span>
</div>
</div>
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>6</span>
</div>
</div>
</div>
<div class="calendar-table__row">
<div class="calendar-table__col calendar-table__event">
<div class="calendar-table__item">
<span>7</span>
</div>
</div>
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>8</span>
</div>
</div>
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>9</span>
</div>
</div>
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>10</span>
</div>
</div>
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>11</span>
</div>
</div>
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>12</span>
</div>
</div>
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>13</span>
</div>
</div>
</div>
<div class="calendar-table__row">
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>14</span>
</div>
</div>
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>15</span>
</div>
</div>
<div class="calendar-table__col calendar-table__event calendar-table__event--long calendar-table__event--start">
<div class="calendar-table__item">
<span>16</span>
</div>
</div>
<div class="calendar-table__col calendar-table__event calendar-table__event--long">
<div class="calendar-table__item">
<span>17</span>
</div>
</div>
<div class="calendar-table__col calendar-table__event calendar-table__event--long calendar-table__event--end">
<div class="calendar-table__item">
<span>18</span>
</div>
</div>
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>19</span>
</div>
</div>
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>20</span>
</div>
</div>
</div>
<div class="calendar-table__row">
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>21</span>
</div>
</div>
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>22</span>
</div>
</div>
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>23</span>
</div>
</div>
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>24</span>
</div>
</div>
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>25</span>
</div>
</div>
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>26</span>
</div>
</div>
<div class="calendar-table__col calendar-table__event calendar-table__event--long calendar-table__event--start">
<div class="calendar-table__item">
<span>27</span>
</div>
</div>
</div>
<div class="calendar-table__row">
<div class="calendar-table__col calendar-table__event calendar-table__event--long calendar-table__event--end">
<div class="calendar-table__item">
<span>28</span>
</div>
</div>
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>29</span>
</div>
</div>
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>30</span>
</div>
</div>
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>31</span>
</div>
</div>
<div class="calendar-table__col calendar-table__event calendar-table__inactive">
<div class="calendar-table__item">
<span>1</span>
</div>
</div>
<div class="calendar-table__col calendar-table__inactive">
<div class="calendar-table__item">
<span>2</span>
</div>
</div>
<div class="calendar-table__col calendar-table__inactive">
<div class="calendar-table__item">
<span>3</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="events-container">
<span class="events__title">Upcoming events this month</span>
<ul class="events__list">
<li class="events__item">
<div class="events__item--left">
<span class="events__name">Town hall meeting</span>
<span class="events__date">Oct 5</span>
</div>
<span class="events__tag">16:00</span>
</li>
<li class="events__item">
<div class="events__item--left">
<span class="events__name">Meet with George</span>
<span class="events__date">Oct 7</span>
</div>
<span class="events__tag">10:00</span>
</li>
<li class="events__item">
<div class="events__item--left">
<span class="events__name">Vacation!!!</span>
<span class="events__date">Oct 16 - Oct 18</span>
</div>
<span class="events__tag events__tag--highlighted">All day</span>
</li>
<li class="events__item">
<div class="events__item--left">
<span class="events__name">Visit Grandma</span>
<span class="events__date">Oct 27 - Oct 28</span>
</div>
</li>
</ul>
</div>
</main>
</div>
</body>
</html>11. Wim Crouwel’s Calendar (CSS Grid)
Made by Margins. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
padding: 0;
counter-reset: date;
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
label.day {
font-size: 9px;
text-transform: lowercase;
}
time {
font-size: 20px;
font-weight: 900;
text-align: right;
}
label,
time {
background: #75847d;
font-family: helvetica, sans-serif;
line-height: 1.2em;
}
time {
counter-increment: date;
}
time:after {
content: counter(date);
}
.plaque {
font-family: helvetica, sans-serif;
font-size: 11px;
font-weight: 400;
line-height: 14px;
letter-spacing: 0.025em;
margin-top: 0;
padding-top: 0;
}
hr {
height: 1px;
margin: 0;
padding: 0;
background: #666;
background: white;
border: none;
}
figure,
figcaption {
padding: 0;
margin: 0;
}
a.toggle {
font-size: 9px;
font-family: helvetica, sans-serif;
letter-spacing: 0.1em;
text-decoration: none;
text-transform: uppercase;
display: inline-block;
border-radius: 1px;
padding: 10px 10px 7px 10px;
color: black;
transition: 100ms ease all;
background: rgba(0, 0, 0, 0.08);
margin: 3em 0 2em 0;
}
a.toggle:hover {
background: rgba(65, 255, 255, 0.35);
}
a.toggle.active {
background: rgba(65, 255, 255, 0.95);
}
.support {
display: flex;
width: 100vw;
height: 100vh;
background: #ececec;
align-items: center;
justify-items: center;
padding: 10vh;
}
.support a {
color: blue;
}
.frame {
grid-template-columns: 1fr 2fr;
grid-column-gap: 20px;
align-self: stretch;
align-items: center;
}
.frame .info {
align-self: stretch;
width: 100%;
background: #ececec;
line-height: 0;
text-align: right;
}
.frame .info .plaque {
padding: 1em;
}
.frame .info img {
max-width: 100%;
}
.frame .art {
margin: auto;
padding: 0 0 3em 0;
}
.frame .art .lockup {
width: 516px;
height: 516px;
position: relative;
}
.frame .art figcaption .plaque {
padding: 1em 0 0 0;
display: none;
}
.calendar {
position: absolute;
display: grid;
grid-template-columns: repeat(7, 72px);
grid-template-rows: 14fr 6fr 1fr;
grid-column-gap: 2px;
margin: auto;
width: 516px;
height: 516px;
background: #85938c;
}
.calendar:hover .month:nth-child(1), .calendar:hover .month:nth-child(2), .calendar:hover .month:nth-child(4), .calendar:hover .month:nth-child(5) {
background-position: -200% 0;
}
.calendar:hover .month:nth-child(3) {
background-position: -103% 0;
}
.calendar .month {
transition: all ease-out 600ms;
}
.calendar .month:nth-child(1) {
grid-column: 1/span 1;
}
.calendar .month:nth-child(2) {
grid-column: 2/span 1;
}
.calendar .month:nth-child(3) {
grid-column: 3/span 1;
}
.calendar .month:nth-child(4) {
grid-column: 4/span 1;
}
.calendar .month:nth-child(5) {
grid-column: 5/span 1;
}
.calendar .month:nth-child(6) {
grid-column: 6/span 1;
}
.calendar .month:nth-child(7) {
grid-column: 7/span 1;
}
.calendar .month:nth-child(1), .calendar .month:nth-child(2), .calendar .month:nth-child(3), .calendar .month:nth-child(4), .calendar .month:nth-child(5), .calendar .month:nth-child(6), .calendar .month:nth-child(7) {
grid-row-start: 1;
grid-row-end: span 14;
}
.calendar .month:nth-child(1), .calendar .month:nth-child(2), .calendar .month:nth-child(4), .calendar .month:nth-child(5) {
background-position: 0 0;
}
.calendar .month:nth-child(3) {
background-position: 100% 0;
}
.calendar .month:nth-child(1) {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNDIiIGhlaWdodD0iNTAwIiB2aWV3Qm94PSIwIDAgMTQyIDUwMCI+PHBhdGggZD0iTTEzMS4yNyAxODcuMjczYzAgMTQuODcyIDMuNDMzIDIxLjE2NCA1LjQzNSAyNC4zMUg5OS44MTJjLTIuMjktMy40MzItMy40MzMtOS40MzgtMy40MzMtMTMuMTU2LTEzLjQ0MiAxMC44NjgtMjkuMTcyIDE2LjU4OC00Ny4xOSAxNi41ODhDMjEuNzM2IDIxNS4wMTUgMCAxOTcuNTcgMCAxNjkuNTRjMC0yOC4zMTIgMjIuNTk0LTQwLjg5NiA0NC4wNDMtNDUuMTg2bDE0LjU4Ni0yLjg2YzEyLjU4My0yLjU3NCAyOC44ODQtNS40MzQgMzcuNzUtOC41OHYtNC4yOWMwLTE0LjMtMTIuMjk4LTE4LjMwNC0yNy40NTYtMTguMzA0LTIwLjMwNSAwLTI2Ljg4MyA2LjAwNi0yNi44ODMgMjEuNzM2bC0zNC44OS0xLjQzYzAtMzQuMDMzIDMwLjAzLTQ3LjE5IDYxLjc3My00Ny4xOSAzMS4xNzQgMCA2Mi4zNDggNi4yOTMgNjIuMzQ4IDQ3LjQ3NnY3Ni4zNnptLTM0Ljg5LTQ4LjA0N2MtNC41NzUgMi4yODgtMTAuMjk2IDQuMDA0LTE2LjU4NyA1LjE0OGwtMTkuMTYyIDQuMDA0Yy0xMy4xNTUgMi41NzQtMjQuMDIyIDYuMjkyLTI0LjAyMiAyMC4wMiAwIDEwLjg2OCAxMC4wMSAxOC4wMTggMjIuNTk0IDE4LjAxOCAxNi4zIDAgMzcuMTgtOC4wMDggMzcuMTgtMjYuNTk4di0yMC41OTJ6Ii8+PC9zdmc+");
}
.calendar .month:nth-child(2) {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNDIiIGhlaWdodD0iNTAwIiB2aWV3Qm94PSIwIDAgMTQyIDUwMCI+PHBhdGggZD0iTTAgNjMuNzVoMzQuODkydjE1LjQxN2guNTcyYzEwLjU4Mi05LjcyNCAyNC4wMjQtMTUuNzMgNDEuMTgzLTE1LjczIDM2LjYwNyAwIDYyLjM1IDM0LjAzNCA2Mi4zNSA3NS43OXMtMjUuNzQgNzcuNzktNjIuOTIgNzcuNzljLTIwLjg3NyAwLTMyLjAzLTUuMTUtNDEuMTgzLTE1LjQ0N1YyNTRIMFY2My43NXptMTAyLjM4NyA3NS40NzZDMTAyLjEgMTE4LjM1IDk0LjM4IDk1LjQ3IDY4LjA2NyA5NS40N3MtMzQuMDM0IDIyLjg4LTM0LjMyIDQzLjc1NmMuMjg2IDIwLjg3OCA4LjAwOCA0NS43NTcgMzQuMzIgNDUuNzU3czM0LjAzMy0yNC44OCAzNC4zMi00NS43NTd6Ii8+PC9zdmc+");
}
.calendar .month:nth-child(3) {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNDIiIGhlaWdodD0iNTAwIiB2aWV3Qm94PSIwIDAgMTQyIDUwMCI+PHBhdGggZD0iTTE0MiAyMTUuMDg1aC0zNC44OTN2LTE3Ljk0aC0uNTdjLTguMjk1IDEzLjI1NC0yNC4zMSAyMC4xMTgtNDQuNjE2IDIwLjExOHYtMzEuODg4YzIzLjczOCAwIDQ1LjE4Ny0xNC43MyA0NS4xODctNDYuMTlWNjQuMTlIMTQydjE1MC44OTd6Ii8+PC9zdmc+");
}
.calendar .month:nth-child(4) {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNDIiIGhlaWdodD0iNTAwIiB2aWV3Qm94PSIwIDAgMTQyIDUwMCI+PHBhdGggZD0iTTAgMTYuMjg3aDM1LjVWNDkuNUgwVjE2LjI4N3ptMCA0Ny45MTVoMzUuNXYxNTAuOTY2SDBWNjQuMjAyeiIvPjwvc3ZnPg==");
}
.calendar .month:nth-child(5) {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNDIiIGhlaWdodD0iNTAwIiB2aWV3Qm94PSIwIDAgMTQyIDUwMCI+PHBhdGggZD0iTTAgMTYuMjg3aDM1LjV2MTk4LjgxOEgwVjE2LjI4N3oiLz48L3N2Zz4=");
}
.days,
.labels {
display: grid;
grid-template-columns: repeat(7, 36px);
grid-column-gap: 38px;
}
.labels {
grid-row-start: 3;
grid-row-end: 4;
grid-column-start: 1;
grid-column-end: span 7;
}
.days {
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 1;
grid-column-end: span 7;
}
time:nth-child(1) {
grid-column-start: 6;
grid-column-end: 7;
}
label.day:after {
display: block;
transform: rotate(-90deg);
transform-origin: center center;
}
label.day:nth-child(1):after {
content: "sun";
}
label.day:nth-child(2):after {
content: "mon";
}
label.day:nth-child(3):after {
content: "tue";
}
label.day:nth-child(4):after {
content: "wed";
}
label.day:nth-child(5):after {
content: "thu";
}
label.day:nth-child(6):after {
content: "fri";
}
label.day:nth-child(7):after {
content: "sat";
}
.guide {
position: absolute;
display: grid;
grid-template-columns: repeat(7, 72px);
grid-template-rows: repeat(21, 1fr);
grid-column-gap: 2px;
width: 516px;
height: 516px;
margin: auto;
pointer-events: none;
z-index: 999;
transition: 100ms ease opacity;
opacity: 0;
}
.guide.visible {
opacity: 1;
}
.guide .cell {
grid-row-end: span 1;
grid-column-end: span 1;
border-top: 1px solid rgba(65, 255, 255, 0.2);
}
.guide .cell:nth-child(7n), .guide .cell:nth-child(7n-1), .guide .cell:nth-child(7n-2), .guide .cell:nth-child(7n-3), .guide .cell:nth-child(7n-4), .guide .cell:nth-child(7n-5), .guide .cell:nth-child(7n-6) {
border-left: 1px solid rgba(65, 255, 255, 0.85);
border-right: 1px solid rgba(65, 255, 255, 0.85);
}
.guide .cell:nth-child(99), .guide .cell:nth-child(100), .guide .cell:nth-child(101), .guide .cell:nth-child(102), .guide .cell:nth-child(103), .guide .cell:nth-child(104), .guide .cell:nth-child(105) {
border-top: 1px solid rgba(255, 177, 255, 0.85);
}
.guide .cell:nth-last-child(1), .guide .cell:nth-last-child(2), .guide .cell:nth-last-child(3), .guide .cell:nth-last-child(4), .guide .cell:nth-last-child(5), .guide .cell:nth-last-child(6), .guide .cell:nth-last-child(7) {
border-top: 1px solid rgba(255, 177, 255, 0.85);
border-bottom: 1px solid rgba(65, 255, 255, 0.2);
background: none;
}
.frame {
display: none;
}
@supports (display: grid) {
.frame {
display: grid;
}
.support {
display: none;
}
}
@media (max-width: 800px) {
.frame {
grid-template-columns: 1fr;
}
.frame .info {
display: none;
position: relative;
}
.frame .info .wrap {
position: absolute;
top: 0;
left: 0;
}
.frame .info img {
display: none;
}
.frame .art figcaption .plaque {
display: block;
}
}
</style>
</head>
<body>
<div class="support">Your browser doesn’t support <a href="https://caniuse.com/#feat=css-grid">CSS Grid</a> :(</div>
<div class="frame">
<div class="info"><img src="https://i.ibb.co/6DJZrb4/wim.jpg"/>
<hr/>
<div class="plaque"><strong>Calendar</strong><br/>Wim Crouwel<br/>1964</div>
</div>
<div class="art">
<figure>
<figcaption>
<div class="plaque"><strong>Calendar</strong><br/>Wim Crouwel<br/>1964</div><a class="toggle" href="#" id="toggle">Show Grid</a>
</figcaption>
<div class="lockup">
<div class="guide hide" id="guide">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="calendar">
<label class="month"></label>
<label class="month"></label>
<label class="month"></label>
<label class="month"></label>
<label class="month"></label>
<label class="month"></label>
<label class="month"></label>
<div class="days">
<time></time>
<time></time>
<time></time>
<time></time>
<time></time>
<time></time>
<time></time>
<time></time>
<time></time>
<time></time>
<time></time>
<time></time>
<time></time>
<time></time>
<time></time>
<time></time>
<time></time>
<time></time>
<time></time>
<time></time>
<time></time>
<time></time>
<time></time>
<time></time>
<time></time>
<time></time>
<time></time>
<time></time>
<time></time>
<time></time>
</div>
<div class="labels">
<label class="day"></label>
<label class="day"></label>
<label class="day"></label>
<label class="day"></label>
<label class="day"></label>
<label class="day"></label>
<label class="day"></label>
</div>
</div>
</div>
</figure>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script>
jQuery(document).ready(function ($) {
$('#toggle').click(function (e) {
e.preventDefault();
$(this).toggleClass('active');
$('#guide').toggleClass('visible');
console.log("click");
});
});
</script>
</body>
</html>