Description: Calendar month view that just resembles Window 10’s calendar appearance and animations.
Dependencies: JQuery
Mobile support: No
License: MIT License
Live:
Su
Mo
Tu
We
Th
Fr
Sa
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
Code:
HTML-CSS-JS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Windows 10 Inspired Calender</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
body {
background-color: rgb(39, 39, 39);
}
.calender-container {
display: block;
background-color: rgb(39, 39, 39);
clip-path: polygon(294px 0, 294px 240px, 0 240px, 0 0);
}
.circle {
position: absolute;
background: radial-gradient(circle, rgba(255, 255, 255, 1) 9%, rgba(39, 39, 39, 1) 63%, rgba(39, 39, 39, 1) 100%);
width: 110px;
height: 110px;
border-radius: 50%;
z-index: -1;
}
.calender {
display: grid;
grid-template-columns: repeat(7, 42px);
grid-template-rows: repeat(6, 40px);
cursor: default;
width: 294px;
}
.day {
display: flex;
align-items: center;
justify-content: center;
}
.number {
background-color: rgb(39, 39, 39);
border: 3px solid rgba(39, 39, 39, 0.5);
background-clip: padding-box;
padding: 2px;
color: rgb(230, 230, 230);
width: 80%;
height: 80%;
}
.border {
border: 0.5px solid rgba(39, 39, 39, 1);
display: flex;
align-items: center;
justify-content: center;
}
.name {
background-color: rgb(39, 39, 39);
color: rgb(230, 230, 230);
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.other_month {
color: #7c7c74;
}
.number:hover {
border: 3px solid rgba(255, 255, 255, 1);
}
.active {
color: rgb(230, 230, 230);
border: 3px solid #4aa4f8;
background-color: rgb(39, 39, 39);
background-clip: padding-box;
padding: 2px;
color: rgb(230, 230, 230);
width: 80%;
height: 80%;
}
</style>
</head>
<body>
<div class="calender-container">
<div id="calender" class="calender">
<span id="circle" class="circle"></span>
<div class="day name">Su</div>
<div class="day name">Mo</div>
<div class="day name">Tu</div>
<div class="day name">We</div>
<div class="day name">Th</div>
<div class="day name">Fr</div>
<div class="day name">Sa</div>
<div class="border">
<div class="day number other_month">28</div>
</div>
<div class="border">
<div class="day number other_month">29</div>
</div>
<div class="border">
<div class="day number other_month">30</div>
</div>
<div class="border">
<div class="day number">1</div>
</div>
<div class="border">
<div class="day number">2</div>
</div>
<div class="border">
<div class="day number">3</div>
</div>
<div class="border">
<div class="day number">4</div>
</div>
<div class="border">
<div class="day number">5</div>
</div>
<div class="border">
<div class="day number">6</div>
</div>
<div class="border">
<div class="day number">7</div>
</div>
<div class="border">
<div class="day number">8</div>
</div>
<div class="border">
<div class="day number">9</div>
</div>
<div class="border">
<div class="day number">10</div>
</div>
<div class="border">
<div class="day number">11</div>
</div>
<div class="border">
<div class="day number">12</div>
</div>
<div class="border">
<div class="day number">13</div>
</div>
<div class="border">
<div class="day number">14</div>
</div>
<div class="border">
<div class="day number">15</div>
</div>
<div class="border">
<div class="day number">16</div>
</div>
<div class="border">
<div class="day number">17</div>
</div>
<div class="border">
<div class="day number">18</div>
</div>
<div class="border">
<div class="day number">19</div>
</div>
<div class="border">
<div class="day number">20</div>
</div>
<div class="border">
<div class="day number">21</div>
</div>
<div class="border">
<div class="day number">22</div>
</div>
<div class="border">
<div class="day number">23</div>
</div>
<div class="border">
<div class="day number">24</div>
</div>
<div class="border">
<div class="day number">25</div>
</div>
<div class="border">
<div class="day number">26</div>
</div>
<div class="border">
<div class="day number">27</div>
</div>
<div class="border">
<div class="day number">28</div>
</div>
<div class="border">
<div class="day number">29</div>
</div>
<div class="border">
<div class="day number">30</div>
</div>
<div class="border">
<div class="day number">31</div>
</div>
<div class="border">
<div class="day number other_month">1</div>
</div>
</div>
</div>
<script>
var previousElement = 0;
var previousClasses = "";
jQuery(document).ready(function () {
var mouseX = 0,
mouseY = 0;
var xp = 0,
yp = 0;
$(document).mousemove(function (e) {
mouseX = e.pageX - 55;
mouseY = e.pageY - 55;
});
setInterval(function () {
xp += (mouseX - xp) / 3;
yp += (mouseY - yp) / 3;
$("#circle").css({ left: xp + "px", top: yp + "px" });
}, 25);
});
$('.number').click(function (e) {
if (previousElement !== 0){
previousElement.className = previousClasses;
}
previousElement = e.target;
previousClasses = e.target.className;
e.target.className = "day active"
});
</script>
</body>
</html>