-
Notifications
You must be signed in to change notification settings - Fork 41
Expand file tree
/
Copy pathindex.html
More file actions
135 lines (129 loc) · 6.07 KB
/
Copy pathindex.html
File metadata and controls
135 lines (129 loc) · 6.07 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo page</title>
<meta charset="utf-8">
<link rel="stylesheet" href="/style/common.css">
<script src="/bundle.min.js"></script>
</head>
<body>
<div class="calendar-main">
<div id="event-info" class="event-info--inactive">event info here!</div>
<div class="pat-calendar"
lang="en"
data-pat-calendar="category-controls: .cal-categories;
event-sources: ./test_event_source.json,./test_event_source2.json;
add-url: ./test_add_event.html;
initial-date: 2020-10-10;
event-color: fuchsia;
pat-inject-target: #event-info;
pat-inject-source: #document-body;
pat-modal-class: large panel;
pat-switch-selector: #event-info;
pat-switch-remove: event-info--inactive;
pat-switch-add: event-info--active;
timezone: Europe/Berlin;
store: local;">
<form class="pat-toolbar cal-toolbar pat-form"
id="calendar-toolbar">
<div class="pat-toolbar-section">
<fieldset class="pat-button-cluster cal-nav">
<button class="pat-button jump-prev"
title="Back"
type="button"><</button>
<button class="pat-button jump-today"
title="Today"
type="button">Today</button>
<button class="pat-button jump-next"
title="Forward"
type="button">></button>
</fieldset>
</div>
<div class="pat-toolbar-section cal-timezone">
<select name="timezone"
class="timezone">
<option value="Europe/London">GMT</option>
<option value="Europe/Berlin" selected="selected">CET</option>
<option value="Europe/Moscow">MSK</option>
</select>
</div>
</form>
<form class="pat-toolbar cal-toolbar pat-form"
id="calendar-toolbar">
<div class="pat-toolbar-section">
<fieldset class="pat-button-cluster cal-views">
<button class="pat-button view-month"
type="button">Month</button>
<button class="pat-button view-week"
type="button">Week</button>
<button class="pat-button view-day"
type="button">Day</button>
<button class="pat-button view-listYear"
type="button">List Year</button>
<button class="pat-button view-listMonth"
type="button">List Month</button>
<button class="pat-button view-listWeek"
type="button">List Week</button>
<button class="pat-button view-listDay"
type="button">List Day</button>
</fieldset>
</div>
</form>
<form class="row">
<div class="vertical six columns cal-categories-container">
<fieldset class="pat-checklist cal-categories checklist">
<div class="pat-toolbar">
<div class="toggles list-functions pat-button-cluster">
<button class="pat-button select-all">Select all</button>
<button class="pat-button deselect-all">Deselect all</button>
</div>
</div>
<label>
Section 1 Cateory 1
<input id="calendar-section1-category1" type="checkbox" autocomplete="off" checked />
</label>
<label>
Section 1 Category 2
<input id="calendar-section1-category2" type="checkbox" autocomplete="off" checked />
</label>
</fieldset>
</div>
<div class="vertical six columns cal-categories-container">
<fieldset class="pat-checklist cal-categories checklist">
<div class="pat-toolbar">
<div class="toggles list-functions pat-button-cluster">
<button class="pat-button select-all">Select all</button>
<button class="pat-button deselect-all">Deselect all</button>
</div>
</div>
<label>
Section 2 Cateory 1
<input id="calendar-section2-category1" type="checkbox" autocomplete="off" checked />
</label>
<label>
Section 2 Category 2
<input id="calendar-section2-category2" type="checkbox" autocomplete="off" checked />
</label>
</fieldset>
</div>
</form>
<article class="pat-rich">
<p>
<strong class="cal-title">Calendar</strong>
</p>
</article>
</div>
</div>
<style>
.calendar-hidden {
display: none !important;
}
.event-info--inactive {
color: grey;
}
.event-info--active {
background: lightblue;
}
</style>
</body>
</html>