-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathindex.html
More file actions
130 lines (123 loc) · 5.48 KB
/
Copy pathindex.html
File metadata and controls
130 lines (123 loc) · 5.48 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
<!DOCTYPE html>
<html>
<head>
<title>Test Agenda</title>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-touch-fullscreen" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<!-- <link href='https://fonts.googleapis.com/css?family=Oxygen:400,700,300' rel='stylesheet' type='text/css'> -->
<link href='http://fonts.googleapis.com/css?family=Oxygen+Mono|Oxygen:400,700,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
<script src="../webcomponentsjs/webcomponents.min.js"></script>
<script src="../momentjs/min/moment-with-locales.min.js"></script>
<link rel="import" href="zdk-agenda.html">
<link rel="import" href="../zdk-modal/zdk-modal.html">
<link rel="import" href="zdk-event.html">
</head>
<body unresolved>
<zdk-agenda i18n="en-gb" hourHeight="40" hourShow="8" view="week" style="width:100%;height:600px">
<zdk-event class="event1" start="2014-12-12" end="2014-12-12" all-day="true" label="Some work"></zdk-event>
<zdk-event class="event2" start="2014-12-12" end="2014-12-12" all-day="true" label="A lot of work to do"></zdk-event>
<zdk-event class="event3" start="2014-12-12" end="2014-12-12" all-day="true" label="A task to finish"></zdk-event>
<zdk-event class="event4" start="2014-12-12T10:30:00Z" end="2014-12-12T11:00:00Z" label="Shopping Delivery"></zdk-event>
<zdk-event class="event5" start="2014-12-14T09:30:00Z" end="2014-12-14T10:00:00Z" label="Stand Up"></zdk-event>
<zdk-event class="event6" start="2014-12-11T14:00:00Z" end="2014-12-11T15:00:00Z" label="Event 1 suite"></zdk-event>
<zdk-event class="event7" start="2014-12-11T09:00:00Z" end="2014-12-11T15:00:00Z" label="Event 1"></zdk-event>
<zdk-event class="event8" start="2014-12-13T14:00:00Z" end="2014-12-13T15:00:00Z" label="Event 2"></zdk-event>
<zdk-event class="event9" start="2014-12-13T14:00:00Z" end="2014-12-13T15:00:00Z" label="Event 1"></zdk-event>
<zdk-event class="event10" start="2014-12-13T15:00:00Z" end="2014-12-13T20:00:00Z" label="Event 3"></zdk-event>
<zdk-event class="event11" start="2014-12-13T17:00:00Z" end="2014-12-13T18:00:00Z" label="Event 3"></zdk-event>
<zdk-event class="event12" start="2014-12-14T14:00:00Z" end="2014-12-14T15:00:00Z" label="Event 2"></zdk-event>
<zdk-event class="event1" start="2014-12-14T14:00:00Z" end="2014-12-14T15:00:00Z" label="Event 1"></zdk-event>
<zdk-event class="event2" start="2014-12-14T15:00:00Z" end="2014-12-14T15:15:00Z" label="Event 3"></zdk-event>
<zdk-event class="event5" start="2014-12-01T15:00:00Z" end="2014-12-01T19:00:00Z" label="Event 3"></zdk-event>
</zdk-agenda>
<button onclick="addEvent()">add Event</button>
<button onclick="editEvent(1)">edit Event 1</button>
<button onclick="editEvent(2)">edit Event 2</button>
<zdk-modal id="modal1" width="400" height="320" class="hide" type="middle" >
<div class="box">
<header>
Edit event
</header>
<div class="content">
<form name="eventForm">
<div class="row">
<label for="label">Label</label><input type="text" id="label" name="label">
</div>
<div class="row">
<label>Date</label><input type="text" name="date">
</div>
<div class="row">
<label>Time</label><input type="text" name="time">
</div>
<div class="row">
<label>Duration</label><input type="text" name="duration">
</div>
<div class="row">
<label>Comment</label>
</div>
<textarea name="comment"></textarea>
</form>
</div>
<footer>
<button class="red" onclick="boxClose('#modal1')">Cancel</button> <button>Valid</button>
</footer>
</div>
</zdk-modal>
<script>
function boxClose(selector) {
document.querySelector(selector).hide();
}
function addEvent() {
var event = document.createElement("zdk-event");
event.setAttribute("date","2014-08-07");
event.setAttribute("time","18:00");
event.setAttribute("duration","02:30");
event.setAttribute("label","Apero");
event.classList.add("event5");
agenda = document.querySelector("zdk-agenda");
// agenda.appendChild(event);
event = agenda.addEvent({ date:"2014-08-07",time:"18:00",duration:"02:30",label:"Apero"});
event.classList.add("event5");
agenda.drawEvents();
}
function editEvent(evt) {
switch(evt) {
case 1:
var event = document.querySelector("zdk-event[date='2014-08-11'][time='09:00']");
if(event) event.time = "10:00";
break;
case 2:
var event = document.querySelector("zdk-event[date='2014-08-11'][time='14:00']");
if(event) event.time = "08:00";
break;
}
}
/*
window.addEventListener("click", function(evt) {
if (evt.target.tagName.toLowerCase() === "zdk-event") {
console.log(evt.target);
}
}, false);
*/
window.addEventListener("polymer-ready", function() {
console.log("polymer ready");
document.querySelector("zdk-agenda").addEventListener("zdkEventClick", function(evt) {
// console.log(event);
var event = evt.detail.event;
var modal = document.querySelector("#modal1");
var form = document.forms["eventForm"];
form.label.value = event.label;
form.date.value = event.date;
form.time.value = event.time;
form.duration.value = event.duration;
form.comment.value = event.textContent;
modal.show();
},false);
},false);
</script>
</body>
</html>