-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
140 lines (129 loc) · 5.92 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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Kalender Musim Gorontalo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="ZulNs">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="robots" content="all">
<meta name="copyright" content="ZulNs">
<link rel="icon" href="../favicon.svg" type="image/svg+xml" />
<!--link rel="icon" href="favicon.png" type="image/png" /-->
<!--link rel="icon" href="favicon.ico" type="image/x-icon" /-->
</head>
<body>
<link rel="stylesheet" type="text/css" href="../w3css/w3.css" />
<style type="text/css">
.w3-bar-item input[type=radio],.w3-bar-item label{cursor:pointer}
.w3-bar-item:focus-within{border-color:#2196F3!important}
</style>
<div class="w3-sidebar w3-bar-block w3-collapse w3-card w3-animate-left" style="width:228px;z-index:2" id="mySidebar">
<button class="w3-bar-item w3-button w3-ripple w3-large w3-hide-large" onclick="closeSidebar()">Close<span class="w3-right">×</span></button>
<button class="w3-bar-item w3-button w3-ripple collapsed" onclick="dropdown(this)">
<span>Atur Nilai Tahun</span>
<span class="w3-right"><svg width="10" height="10"><path d="M1 3L5 7L9 3Z"/></svg></span>
<span class="w3-right"><svg width="10" height="10"><path d="M1 7L5 3L9 7Z"/></svg></span>
</button>
<div class="w3-bar-block w3-light-grey">
<div class="w3-bar-item">
<input id="valYear" class="w3-input w3-border" type="text" placeholder="nilai tahun...">
</div>
<button class="w3-bar-item w3-button w3-ripple" onclick="setYear()">Terapkan</button>
</div>
<button class="w3-bar-item w3-button w3-ripple collapsed" onclick="dropdown(this)">
<span>Atur Nilai Bulan</span>
<span class="w3-right"><svg width="10" height="10"><path d="M1 3L5 7L9 3Z"/></svg></span>
<span class="w3-right"><svg width="10" height="10"><path d="M1 7L5 3L9 7Z"/></svg></span>
</button>
<div class="w3-bar-block w3-light-grey">
<div class="w3-bar-item">
<input id="valMonth" class="w3-input w3-border" type="text" placeholder="nilai bulan...">
</div>
<button class="w3-bar-item w3-button w3-ripple" onclick="setMonth()">Terapkan</button>
</div>
<button class="w3-bar-item w3-button w3-ripple collapsed" onclick="dropdown(this)">
<span>Atur Tema</span>
<span class="w3-right"><svg width="10" height="10"><path d="M1 3L5 7L9 3Z"/></svg></span>
<span class="w3-right"><svg width="10" height="10"><path d="M1 7L5 3L9 7Z"/></svg></span>
</button>
<div class="w3-bar-block w3-light-grey">
<div class="w3-bar-item">
<input id="txtTheme" class="w3-input w3-border" type="text" placeholder="warna-tema/index...">
</div>
<button class="w3-bar-item w3-button w3-ripple" onclick="setTheme()">Terapkan</button>
</div>
<button class="w3-bar-item w3-button w3-ripple collapsed" onclick="dropdown(this)">
<span>Atur Pewaktu Hari-ini</span>
<span class="w3-right"><svg width="10" height="10"><path d="M1 3L5 7L9 3Z"/></svg></span>
<span class="w3-right"><svg width="10" height="10"><path d="M1 7L5 3L9 7Z"/></svg></span>
</button>
<div class="w3-bar-block w3-light-grey">
<div class="w3-bar-item">
<input id="valTimeout" class="w3-input w3-border" type="text" placeholder="nilai pewaktu...">
</div>
<button class="w3-bar-item w3-button w3-ripple" onclick="setTodayTimeout()">Terapkan</button>
</div>
<button class="w3-bar-item w3-button w3-ripple collapsed" onclick="dropdown(this)">
<span>Tautan lain</span>
<span class="w3-right"><svg width="10" height="10"><path d="M1 3L5 7L9 3Z"/></svg></span>
<span class="w3-right"><svg width="10" height="10"><path d="M1 7L5 3L9 7Z"/></svg></span>
</button>
<div class="w3-bar-block w3-light-grey">
<a class="w3-bar-item w3-button w3-ripple" href="../Kalmustago.js/index.html">● Versi Tahunan</a>
<a class="w3-bar-item w3-button w3-ripple" href="../Calendar.js/index.html">● Dual Calendar</a>
<a class="w3-bar-item w3-button w3-ripple" href="../Datepicker.js/index.html">● Datepicker</a>
<a class="w3-bar-item w3-button w3-ripple" href="../Timepicker.js/index.html">● Timepicker</a>
<a class="w3-bar-item w3-button w3-ripple" href="https://github.com/ZulNs/Kalmusgo.js">● Kode sumber</a>
</div>
</div>
<div class="w3-main" style="margin-left:228px">
<div class="w3-container w3-padding w3-red">
<button class="w3-button w3-ripple w3-xlarge w3-hide-large w3-left" style="margin:6px 8px 0px -16px" onclick="openSidebar()">
<svg width="18" height="23"><path d="M0 6L18 6L18 8L0 8Z M0 13L18 13L18 15L0 15Z M0 20L18 20L18 22L0 22Z"/></svg>
</button>
<h3>Demo Kalender Musim Gorontalo</h3>
</div>
<div id="calendar" class="w3-container w3-margin-top"></div>
</div>
<script type="text/javascript" src="../HijriDate.js/hijri-date.js"></script>
<script type="text/javascript" src="kalmusgo.js"></script>
<script type="text/javascript">
'use strict';
let cal=new Kalmusgo();
cal.attachTo(document.getElementById('calendar'));
function openSidebar(){
document.getElementById("mySidebar").style.display = "block"
}
function closeSidebar(){
document.getElementById("mySidebar").style.display = "none"
}
function dropdown(el){
if(el.className.indexOf('expanded')==-1){
el.className=el.className.replace('collapsed','expanded');
}else{
el.className=el.className.replace('expanded','collapsed');
}
}
function setYear(){
let el=document.getElementById('valYear');
cal.setFullYear(el.value)
}
function setMonth(){
let el=document.getElementById('valMonth');
cal.setMonth(el.value)
}
function setTheme(){
let el=document.getElementById('txtTheme');
let n=parseInt(el.value);
if(!isNaN(n))cal.setTheme(n);
else cal.setTheme(el.value)
}
function setTodayTimeout(){
let el=document.getElementById('valTimeout');
cal.setTodayTimeout(el.value)
}
</script>
</body>
</html>