-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·78 lines (65 loc) · 3.76 KB
/
index.html
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE HTML>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Calendar</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=5" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="theme-color" content="#CCC">
<link rel="icon" href="./img/icon.png">
<link rel="manifest" href="./manifest.json">
<meta name="description" content="Calendar">
<meta name="keywords" content="calendar, month, year" />
<meta name="author" content="Salvador Camacho" />
<style>
html {
box-sizing: border-box;
font-size: 10px;
}
body {
font-family: Roboto, Helvetica, Arial, sans-serif;
color: #333;
font-size: 1.6rem;
background-color: #FAFAFA;
}
.container {
width: 96%;
min-width: 240px;
margin: 1.6rem auto;
max-width: 42rem;
text-align: center;
}
:root{--vcal-bg-color:#fff;--vcal-border-radius:0;--vcal-border-color:#e7e9ed;--vcal-today-bg-color:#2196f3;--vcal-today-color:#fff;--vcal-selected-bg-color:#E7E9ED;--vcal-selected-color:#333;--vcal-holiday-bg-color:#10989E;--vcal-holiday-color: #fff;}#v-cal *,#v-cal :after,#v-cal :before{box-sizing:border-box}#v-cal{background-color:var(--vcal-bg-color);border-radius:var(--vcal-border-radius);border:solid 1px var(--vcal-border-color);box-shadow:0 4px 22px 0 rgba(0,0,0,.05);margin:0 auto;overflow:hidden;width:100%}#v-cal .vcal-btn{-moz-user-select:none;-ms-user-select:none;-webkit-appearance:button;background:0 0;border:0;color:inherit;cursor:pointer;font:inherit;line-height:normal;min-width:27px;outline:0;overflow:visible;padding:0;text-align:center}#v-cal .vcal-header{align-items:center;display:flex;padding:1.2rem 1.4rem}#v-cal .vcal-header svg{fill:var(--vcal-today-bg-color)}#v-cal .vcal-header__label{font-weight:700;text-align:center;width:100%}#v-cal .vcal-week{background-color:var(--vcal-selected-bg-color);display:flex;flex-wrap:wrap}#v-cal .vcal-week span{flex-direction:column;flex:0 0 14.28%;font-size:1.2rem;font-weight:700;max-width:14.28%;padding:1.2rem 1.4rem;text-align:center}#v-cal .vcal-body{background-color:rgba(var(--vcal-selected-bg-color),.3);display:flex;flex-wrap:wrap}#v-cal .vcal-date{align-items:center;background-color:#fff;border-radius:var(--vcal-border-radius);display:flex;flex-direction:column;flex:0 0 14.28%;max-width:14.28%;padding:1.2rem 0}#v-cal .vcal-date--active{cursor:pointer}#v-cal .vcal-date--today{background-color:var(--vcal-today-bg-color);color:var(--vcal-today-color)}#v-cal .vcal-date--holiday{background-color: var(--vcal-holiday-bg-color);color: var(--vcal-holiday-color);}#v-cal .vcal-date--selected{background-color:var(--vcal-selected-bg-color);color:var(--vcal-selected-color)}
</style>
</head>
<body>
<div class="container">
<div id="v-cal">
<div class="vcal-header">
<button class="vcal-btn" data-calendar-toggle="previous">
<svg height="24" version="1.1" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"></path>
</svg>
</button>
<div class="vcal-header__label" data-calendar-label="month"></div>
<button class="vcal-btn" data-calendar-toggle="next">
<svg height="24" version="1.1" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path>
</svg>
</button>
</div>
<div class="vcal-week">
<span>L</span>
<span>Ma</span>
<span>Mi</span>
<span>J</span>
<span>V</span>
<span>S</span>
<span>D</span>
</div>
<div class="vcal-body" data-calendar-area="month"></div>
</div>
</div>
<script type="text/javascript" charset="utf-8" src="js/main.js"></script>
</body>
</html>