forked from kristijanbambir/react-booking-calendar
/
index.html
72 lines (72 loc) · 2.62 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
<html>
<head>
<meta charset="utf-8">
<title>Booking Calendar</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.blue-orange.min.css">
<style>
.mdl-layout__header-row {
padding-left: 40px;
}
@media (max-width: 600px) {
.mdl-layout__header-row {
padding-left: 20px;
}
}
</style>
</head>
<body>
<div class="mdl-layout mdl-layout--fixed-header mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--scroll">
<div class="mdl-layout__header-row">
<span class="mdl-layout__title">
React Booking Calendar
</span>
<div class="mdl-layout-spacer"></div>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="https://github.com/kristijanbambir/react-booking-calendar">
<i class="fa fa-2x fa-github"></i>
</a>
</nav>
</div>
</header>
<main class="mdl-layout__content">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
<div class="main-content content mdl-cell mdl-cell--8-col">
<div id="main"></div>
</div>
</div>
</div>
</main>
</div>
<script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
<script src="https://use.fontawesome.com/f757ed9a8c.js"></script>
<script src="https://unpkg.com/react@15.3.1/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.3.1/dist/react-dom.js"></script>
<script src="lib/index.js"></script>
<script>
const date = new Date();
const currentYear = date.getFullYear();
const currentMonth = date.getMonth();
ReactDOM.render(React.createElement(BookingCalendar, {
bookings: [
new Date(currentYear, currentMonth, 3),
new Date(currentYear, currentMonth, 4),
new Date(currentYear, currentMonth, 5),
new Date(currentYear, currentMonth, 6),
new Date(currentYear, currentMonth, 7),
new Date(currentYear, currentMonth, 8),
new Date(currentYear, currentMonth, 9),
new Date(currentYear, currentMonth, 10),
new Date(currentYear, currentMonth, 19),
new Date(currentYear, currentMonth, 20),
new Date(currentYear, currentMonth, 21),
new Date(currentYear, currentMonth, 22),
new Date(currentYear, currentMonth, 23),
]
}), document.getElementById('main'));
</script>
</body>
</html>