-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathItems.html
More file actions
112 lines (106 loc) · 4.21 KB
/
Copy pathItems.html
File metadata and controls
112 lines (106 loc) · 4.21 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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MindFusion JsPlanner Sample - Items</title>
<link href="common/samples.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="themes/light.css" />
<style type="text/css">
.mfp-planner.light .itemClass1 .mfp-item {
background-color: #eee;
}
.mfp-planner.light .itemClass2 .mfp-item {
background-color: lightBlue;
}
.mfp-planner.light .myItemClass .mfp-item {
background-color: salmon;
}
.mfp-planner.light .modItemClass .mfp-item .mfp-icons:after {
content: "*";
font-size: x-large;
line-height: 30px;
color: #fff;
}
</style>
</head>
<body>
<div id="header" style="height: 59px;">
<div style="float: left; margin-left: 5px;">
<a href="index.html" style="margin-left: 10px;">Index</a>
<button onclick="changeView(1)">
Single Month
</button>
<button onclick="changeView(0)">
MonthRange
</button>
<button onclick="changeView(3)">
List
</button>
<button onclick="changeView(2)">
Week Range
</button>
<button onclick="changeView(4)">
Timetable
</button>
Items size <input id="size" maxlength="2" size="3" />
Items spacing <input id="spacing" maxlength="2" size="3" />
<select id="itemClass">
<option></option>
<option>itemClass1</option>
<option>itemClass2</option>
</select>
<button onclick="clearItems()">
Clear items
</button>
<button onclick="toXml()">
Save to Xml
</button>
<button onclick="fromXml()">
Load from Xml
</button>
</div>
<div style="float: right; margin-right: 5px;">
<a href="Items.js" style="margin-right: 10px;">View source</a>
<button id="expandButton" onclick="onExpandCollapse()">
›
</button>
</div>
</div>
<div id="info" style="top: 70px; bottom: 24px;">
<div id="infoTab" style="padding: 10px;">
<h1>
About this sample
</h1>
<p id="pinfo">
This sample shows how to create calendar items.
</p>
<p>
Calendar items represent events scheduled to occur at an appointed time and are
defined by instances of the Item class. Items can have associated resources via
the resources, contacts, location and task properties. Items can recur in time,
following a specific recurrence pattern. The appearance of calendar items can be
customized by using the calendar.itemSettings property or by specifying a css class
to individual items.
<br />
JSplanner offers out-of-the-box interactive creating, modifying and deleting of
calendar items by using the built-in popup forms.
</p>
</div>
</div>
<div id="content" style="top: 70px; bottom: 24px;">
<div style="position: absolute; width: 100%; height: 100%;">
<div id="calendar" style="height: 100%; width: 100%;">
</div>
</div>
</div>
<div id="footer" style="height: 24px;">
<span id="copyright"></span>
</div>
<script src="Scripts/drawing.js" type="text/javascript"></script>
<script src="Scripts/controls.js" type="text/javascript"></script>
<script src="Scripts/common.js" type="text/javascript"></script>
<script src="Scripts/common-collections.js" type="text/javascript"></script>
<script src="Scripts/scheduling.js" type="text/javascript"></script>
<script src="Items.js" type="text/javascript"></script>
<script type="text/javascript" src="common/samples.js"></script>
</body>
</html>