-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
155 lines (143 loc) · 6.38 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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Responsive Hijri/Gregorian Dual Calendar Demo</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:220px;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>Set Language</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 w3-button" onclick="selectLang(this)">
<input id="langEn" class="w3-radio" type="radio" name="lang" value="en" checked>
<label for="langEn">English</label>
</div>
<div class="w3-bar-item w3-button" onclick="selectLang(this)">
<input id="langAr" class="w3-radio" type="radio" name="lang" value="ar">
<label for="langAr">Arabic</label>
</div>
<div class="w3-bar-item w3-button" onclick="selectLang(this)">
<input id="langId" class="w3-radio" type="radio" name="lang" value="id">
<label for="langId">Indonesian</label>
</div>
</div>
<button class="w3-bar-item w3-button w3-ripple collapsed" onclick="dropdown(this)">
<span>Set Full Year</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="full year value...">
</div>
<button class="w3-bar-item w3-button w3-ripple" onclick="setYear()">Apply</button>
</div>
<button class="w3-bar-item w3-button w3-ripple collapsed" onclick="dropdown(this)">
<span>Set Month</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="month value...">
</div>
<button class="w3-bar-item w3-button w3-ripple" onclick="setMonth()">Apply</button>
</div>
<button class="w3-bar-item w3-button w3-ripple collapsed" onclick="dropdown(this)">
<span>Set Theme</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="theme-color or index">
</div>
<button class="w3-bar-item w3-button w3-ripple" onclick="setTheme()">Apply</button>
</div>
<button class="w3-bar-item w3-button w3-ripple collapsed" onclick="dropdown(this)">
<span>Set Today Timeout</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="timeout value...">
</div>
<button class="w3-bar-item w3-button w3-ripple" onclick="setTodayTimeout()">Apply</button>
</div>
<a class="w3-bar-item w3-button w3-ripple" href="../Datepicker.js/index.html">See My Datepicker</a>
<a class="w3-bar-item w3-button w3-ripple" href="../Timepicker.js/index.html">See My Timepicker</a>
<a class="w3-bar-item w3-button w3-ripple" href="https://github.com/ZulNs/Calendar.js">Source code</a>
</div>
<div class="w3-main" style="margin-left:220px">
<div class="w3-container w3-padding w3-teal">
<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>
<h2>Responsive Hijri/Gregorian Dual Calendar Demo</h2>
</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="calendar.js"></script>
<script type="text/javascript">
'use strict';
let cal=new Calendar();
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 selectLang(el){
el.children[0].checked=true;
cal.setLanguage(el.children[0].value)
}
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>