"Tear off calendar"
Bootstrap 4.1.1 Snippet by koshikojha

1
2
3
4
5
6
7
8
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="calendar">
<div class="pages"></div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
32
33
34
35
36
37
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: 'Zilla Slab', serif;
background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
}
overflow: hidden;
}
p {
margin: 0 0 3px;
line-height: 1;
letter-spacing: 1px;
pointer-events: none;
}
.calendar {
position: relative;
width: 152px;
cursor: default;
user-select: none;
&::before,
&::after {
content: '';
position: absolute;
top: -28px;
left: 40px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
32
33
34
35
36
37
const pages = document.querySelector('.pages');
const locale = window.navigator.language || 'en-us'
let date = new Date();
let dayNum = date.getDate();
let month = date.getMonth();
let dayName = date.toLocaleString(locale, { weekday: 'long' });
let monthName = date.toLocaleString(locale, { month: 'long' });
let year = date.getFullYear();
function daysInMonth (month, year) {
return new Date(year, month + 1, 0).getDate();
}
function getNewDate () {
if (dayNum < daysInMonth(month, year)) {
dayNum++;
} else {
dayNum = 1;
}
if (dayNum === 1 && month < 11) {
month++;
} else if (dayNum === 1 && month === 11) {
month = 0;
}
if (dayNum ===1 && month === 0) {
year++;
}
const newDate = new Date(year, month, dayNum);
dayName = newDate.toLocaleString('en-us', { weekday: 'long' });
monthName = newDate.toLocaleString('en-us', { month: 'long' });
}
function handleClick (e) {
getNewDate();
updateCalendar(e.target);
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: