-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathMonthView.html
More file actions
92 lines (89 loc) · 4.28 KB
/
Copy pathMonthView.html
File metadata and controls
92 lines (89 loc) · 4.28 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
<!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 - Month view</title>
<link href="common/samples.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="themes/light.css" />
</head>
<body>
<div id="header" style="height: 79px;">
<div style="float: left; margin-left: 5px;">
<a href="index.html" style="margin-left: 10px;">Index</a>
<div style="margin-top: 10px;">
View <select id="view">
<option value="0">MonthRange</option>
<option value="1">SingleMonth</option>
</select>
Header style <select id="headerStyle">
<option value="0">None</option>
<option value="1">Title only</option>
<option value="3">Title and buttons</option>
</select>
<div id="rangeSettings" style="display: inline;">
Total months <input id="numberOfMonths" maxlength="2" size="2" />
Months per row <input id="monthsPerRow" maxlength="2" size="2" />
Visible rows <input id="visibleRows" maxlength="2" size="2" />
</div>
<div id="singleSettings">
Week header
<input type="checkbox" id="weekHeaderStyle" />
Day names header
<input type="checkbox" id="dayNamesHeaderStyle" />
Show padding days
<input type="checkbox" id="showPaddingDays" />
Show padding items
<input type="checkbox" id="showPaddingItems" />
Expand day headers
<input type="checkbox" id="expandDayHeaders" />
</div>
</div>
</div>
<div style="float: right; margin-right: 5px;">
<a href="MonthView.js" style="margin-right: 10px;">View source</a>
<button id="expandButton" onclick="onExpandCollapse()">
›
</button>
</div>
</div>
<div id="info" style="top: 90px; bottom: 24px;">
<div id="infoTab" style="padding: 10px;">
<h1>
About this sample
</h1>
<p id="pinfo">
This sample shows the capabilities of the Month views.
</p>
<p>
The SingleMonth view displays one month at a time and lets the user scroll to the
previous or next month or the previous or next year by using the navigation buttons
optionally displayed in the view header. The month is represented by a grid of day
cells, which display the day number and the schedule events set to occur on the
specific date.
<br />
The MonthRange view displays an arbitrary long sequence of months arranged in rows
and columns. The months in the view can be scrolled back or forth in time by using
the navigation buttons in the view header.
<br />
Use the MonthSettings and MonthRangeSettings properties of the Calendar class to
set the appearance of these views.
</p>
</div>
</div>
<div id="content" style="top: 90px; 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="MonthView.js" type="text/javascript"></script>
<script type="text/javascript" src="common/samples.js"></script>
</body>
</html>