Skip to content

Commit b9f52d3

Browse files
author
Cornelis G. A. Kolbach
committed
Calendar demo
1 parent 93087f4 commit b9f52d3

File tree

3 files changed

+105
-95
lines changed

3 files changed

+105
-95
lines changed

‎src/pat/calendar/index.html‎

Lines changed: 101 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -11,107 +11,117 @@
1111
></script>
1212
</head>
1313
<body>
14-
<!--div id="calendar" class="pat-calendar"
15-
data-pat-calendar="
16-
url: http://localhost:8080/Plone/@search?portal_type=Event&start.query=${end_str}&start.range=max&end.query=${start_str}&end.range=min&metadata_fields=start&metadata_fields=end&metadata_fields=whole_day&metadata_fields=location;
17-
initial-date: 2020-10-10;
18-
lang: de;
19-
store: session;"
20-
-->
14+
<div class="calendar-main">
2115

22-
<div class="calendar-main">
16+
<div class="pat-calendar"
17+
data-pat-calendar="category-controls: .cal-nav;
18+
event-sources: ./test_event_source.json,./test_event_source2.json;
19+
event-sources-classes: internal-calendar, external-calendar;
20+
add-url: ./test_add_event.html;
21+
initial-date: 2020-10-10;
22+
event-color: fuchsia;
23+
lang: de;
24+
store: local;">
25+
<form class="pat-toolbar cal-toolbar pat-form"
26+
id="calendar-toolbar">
27+
<div class="pat-toolbar-section">
28+
<fieldset class="pat-button-cluster cal-nav">
29+
<button class="pat-button jump-prev"
30+
title="Back"
31+
type="button">&lt;</button>
32+
<button class="pat-button jump-today"
33+
title="Today"
34+
type="button">Today</button>
35+
<button class="pat-button jump-next"
36+
title="Forward"
37+
type="button">&gt;</button>
38+
</fieldset>
39+
</div>
40+
<div class="pat-toolbar-section cal-timezone">
41+
<label class="pat-select">
42+
<select name="timezone"
43+
class="timezone">
44+
<option value="Europe/London">GMT</option>
45+
<option value="Europe/Berlin" selected="selected">CET</option>
46+
<option value="Europe/Moscow">MSK</option>
47+
</select>
48+
</label>
49+
</div>
50+
</form>
2351

24-
<div class="calendar-sidebar">
52+
<form class="pat-toolbar cal-toolbar pat-form"
53+
id="calendar-toolbar">
54+
<div class="pat-toolbar-section">
55+
<fieldset class="pat-button-cluster cal-views">
56+
<button class="pat-button view-month"
57+
type="button">Month</button>
58+
<button class="pat-button view-week"
59+
type="button">Week</button>
60+
<button class="pat-button view-day"
61+
type="button">Day</button>
62+
<button class="pat-button view-listYear"
63+
type="button">List Year</button>
64+
<button class="pat-button view-listMonth"
65+
type="button">List Month</button>
66+
<button class="pat-button view-listWeek"
67+
type="button">List Week</button>
68+
<button class="pat-button view-listDay"
69+
type="button">List Day</button>
70+
</fieldset>
71+
</div>
72+
</form>
2573

26-
<div class="pat-collapsible cal-categories-container">
27-
<h4 class="section-label">Category section 1</h4>
28-
<fieldset class="pat-checklist cal-categories checklist">
29-
<div class="toggles list-functions button-cluster">
30-
<button class="small pat-button select-all">Select all</button>
31-
<button class="small pat-button deselect-all">Deselect all</button>
32-
</div>
33-
<label>
34-
<span class="calendar-name">Cateory 1</span>
35-
<input id="calendar-section1-category1" type="checkbox" checked />
36-
</label>
37-
<label>
38-
<span class="calendar-name">Category 2</span>
39-
<input id="calendar-section1-category2" type="checkbox" checked />
40-
</label>
41-
</fieldset>
42-
</div>
74+
<form class="row">
75+
<div class="vertical six columns cal-categories-container">
76+
<fieldset class="pat-checklist cal-categories checklist">
77+
<div class="pat-toolbar">
78+
<div class="toggles list-functions pat-button-cluster">
79+
<button class="pat-button select-all">Select all</button>
80+
<button class="pat-button deselect-all">Deselect all</button>
81+
</div>
82+
</div>
83+
<label>
84+
Cateory 1
85+
<input id="calendar-section1-category1" type="checkbox" checked />
86+
</label>
87+
<label>
88+
Category 2
89+
<input id="calendar-section1-category2" type="checkbox" checked />
90+
</label>
91+
</fieldset>
92+
</div>
93+
<div class="vertical six columns cal-categories-container">
94+
<fieldset class="pat-checklist cal-categories checklist">
95+
<div class="pat-toolbar">
96+
<div class="toggles list-functions pat-button-cluster">
97+
<button class="pat-button select-all">Select all</button>
98+
<button class="pat-button deselect-all">Deselect all</button>
99+
</div>
100+
</div>
101+
<label>
102+
Cateory 1
103+
<input id="calendar-section2-category1" type="checkbox" checked />
104+
</label>
105+
<label>
106+
Category 2
107+
<input id="calendar-section2-category2" type="checkbox" checked />
108+
</label>
109+
</fieldset>
110+
</div>
111+
</form>
43112

44-
<div class="pat-collapsible cal-categories-container">
45-
<h4 class="section-label">Category section 2</h4>
46-
<fieldset class="pat-checklist cal-categories checklist">
47-
<div class="toggles list-functions button-cluster">
48-
<button class="small pat-button select-all">Select all</button>
49-
<button class="small pat-button deselect-all">Deselect all</button>
50-
</div>
51-
<label>
52-
<span class="calendar-name">Cateory 1</span>
53-
<input id="calendar-section2-category1" type="checkbox" checked />
54-
</label>
55-
<label>
56-
<span class="calendar-name">Category 2</span>
57-
<input id="calendar-section2-category2" type="checkbox" checked />
58-
</label>
59-
</fieldset>
60-
</div>
61-
62-
</div>
63-
64-
<div id="calendar" class="pat-calendar"
65-
data-pat-calendar="
66-
category-controls: .cal-categories;
67-
event-sources: ./test_event_source.json,./test_event_source2.json;
68-
event-sources-classes: internal-calendar, external-calendar;
69-
add-url: ./test_add_event.html;
70-
initial-date: 2020-10-10;
71-
event-color: fuchsia;
72-
lang: de;
73-
store: local;">
74-
<h1 class="cal-title">title</h1>
75-
<div class="cal-toolbar">
76-
<fieldset class="cal-nav">
77-
<button class="small pat-button jump-prev" title="Back" type="button">&lt;</button>
78-
<button class="small pat-button jump-today" title="Today" type="button">Today</button>
79-
<button class="small pat-button jump-next" title="Forward" type="button">&gt;</button>
80-
</fieldset>
81-
<fieldset class="cal-views">
82-
<button class="small pat-button view-month" type="button">Month</button>
83-
<button class="small pat-button view-week" type="button">Week</button>
84-
<button class="small pat-button view-day" type="button">Day</button>
85-
<button class="small pat-button view-listYear" type="button">List Year</button>
86-
<button class="small pat-button view-listMonth" type="button">List Month</button>
87-
<button class="small pat-button view-listWeek" type="button">List Week</button>
88-
<button class="small pat-button view-listDay" type="button">List Day</button>
89-
</fieldset>
90-
<fieldset class="cal-timezone">
91-
<select name="timezone" class="timezone">
92-
<option value="Africa/Dakar">(GMT+00:00) Dakar, Monrovia, Reykjavik</option>
93-
<option value="Europe/London">(GMT+00:00) Greenwich Mean Time : Dublin, Edinburgh, Lisbon, London</option>
94-
<option value="Europe/Berlin" selected="selected">(GMT+01:00) Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna</option>
95-
<option value="Europe/Athens">(GMT+02:00) Athens, Bucharest, Istanbul</option>
96-
<option value="Europe/Moscow">(GMT+03:00) Moscow, St. Petersburg, Volgograd</option>
97-
</select>
98-
</fieldset>
99-
</div>
113+
<article class="pat-rich">
114+
<p>
115+
<strong class="cal-title">Calendar</strong>
116+
</p>
117+
</article>
100118
</div>
101119

102-
</div>
103-
104120
<style type="text/css" media="screen">
105-
.calendar-main {
106-
display: flex;
107-
}
108121
.calendar-sidebar {
109-
width: 30%;
110122
padding: 0 1em;
111123
}
112-
.pat-calendar {
113-
flex-grow: 2;
114-
}
124+
115125
.calendar-hidden {
116126
display: none !important;
117127
}

‎src/pat/masonry/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,12 @@
1616
<body>
1717
<div id="masonry-demo"
1818
class="sidebar-closed">
19-
<p>
19+
<div class="pat-toolbar">
2020
<button class="pat-button pat-toggle"
2121
data-pat-toggle="selector: #masonry-demo; value: sidebar-open sidebar-closed; store: session">
2222
Expand sidebar
2323
</button>
24-
</p>
24+
</div>
2525

2626
<div id="sidebar">
2727
This is a sidebar pushing the masonry aside. It should detect this

‎src/pat/stacks/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
<p>The stacks pattern can for instance be used to make tabs. Use your own styling to create various manifestations of this interaction pattern.</p>
2222
</article>
2323

24-
<div class="canvas-toolbar">
24+
<div class="pat-toolbar">
2525
<nav class="tabs">
2626
<a href="#sheet-1"
2727
class="small pat-button current">Tab one</a>
@@ -68,7 +68,7 @@ <h4>Sheet three</h4>
6868
</p>
6969
</article>
7070

71-
<div class="canvas-toolbar">
71+
<div class="pat-toolbar">
7272
<nav class="tabs">
7373
<a href="#sheet-a"
7474
class="small pat-button">Tab one</a>

0 commit comments

Comments
 (0)