108 lines
4.1 KiB
HTML
108 lines
4.1 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
|
"http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
<head>
|
|
<title>Dojox Calendar Views Test</title>
|
|
<style type="text/css">
|
|
@import "../../../dojo/resources/dojo.css";
|
|
@import "../../../dijit/themes/tundra/tundra.css";
|
|
@import "../../../dijit/themes/soria/soria.css";
|
|
@import "../../../dijit/themes/nihilo/nihilo.css";
|
|
@import "../../../dijit/themes/dijit.css";
|
|
@import "../../../dijit/tests/css/dijitTests.css";
|
|
@import "../Calendar/Calendar.css";
|
|
|
|
.title {
|
|
font-weight: bolder;
|
|
}
|
|
</style>
|
|
|
|
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true"></script>
|
|
|
|
<!-- not needed, for testing alternate themes -->
|
|
<script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
|
|
dojo.require("dijit.dijit");
|
|
dojo.require("dojox.fx");
|
|
dojo.require("dojox.widget.Calendar");
|
|
dojo.require("dojox.widget.CalendarViews");
|
|
|
|
function log(str){
|
|
dojo.byId("report").innerHTML = str;
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class="soria">
|
|
<div>
|
|
Use different theme:
|
|
<a href="test_CalendarViews.html?theme=tundra">tundra</a>
|
|
<a href="test_CalendarViews.html?theme=soria">soria</a>
|
|
<a href="test_CalendarViews.html?theme=nihilo">nihilo</a>
|
|
</div>
|
|
<div id="report" style="float:left; width:100%;height:40px;color:red;font-weight:bold;"></div>
|
|
<p>
|
|
This page shows the dojox.widget.Calendar widget with three panes, a day, month and year view.
|
|
Click on the date on the top of the widget to select the month, and click it again to
|
|
select the year.
|
|
</p>
|
|
|
|
<div>
|
|
<span style="width:33%;float:left;">
|
|
<div class="title">With day, month and year views</div>
|
|
|
|
<div dojoType="dojox.widget.Calendar3Pane" id="cal3Pane">
|
|
<script type="dojo/connect" event="onValueSelected" args="value">
|
|
log("Date Value selected: " + value);
|
|
</script>
|
|
</div>
|
|
|
|
<p>
|
|
Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Aenean
|
|
semper sagittis velit. Cras in mi. Duis porta mauris ut ligula.
|
|
Proin porta rutrum lacus. <a href="#">Etiam</a> consequat scelerisque quam. Nulla
|
|
facilisi. Maecenas luctus venenatis nulla. In sit amet dui non mi
|
|
semper iaculis. Sed molestie tortor at ipsum. <a href="#">Morbi</a> dictum rutrum
|
|
magna. Sed vitae risus.
|
|
</p>
|
|
</span>
|
|
<span style="width:33%;float:left;">
|
|
<div class="title">With month only view, no daily or yearly</div>
|
|
|
|
<div dojoType="dojox.widget.MonthlyCalendar" id="calMonthOnly">
|
|
<script type="dojo/connect" event="onValueSelected" args="value">
|
|
log("Month Value selected: " + value);
|
|
</script>
|
|
</div>
|
|
|
|
<p>
|
|
Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Aenean
|
|
semper sagittis velit. Cras in mi. Duis porta mauris ut ligula.
|
|
Proin porta rutrum lacus. <a href="#">Etiam</a> consequat scelerisque quam. Nulla
|
|
facilisi. Maecenas luctus venenatis nulla. In sit amet dui non mi
|
|
semper iaculis. Sed molestie tortor at ipsum. <a href="#">Morbi</a> dictum rutrum
|
|
magna. Sed vitae risus.
|
|
</p>
|
|
</span>
|
|
<span style="width:33%;float:left;">
|
|
<div class="title">With year only view, no daily or yearly</div>
|
|
|
|
<div dojoType="dojox.widget.YearlyCalendar" id="calYearOnly">
|
|
<script type="dojo/connect" event="onValueSelected" args="value">
|
|
log("Year Value selected: " + value);
|
|
</script>
|
|
</div><p>
|
|
Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Aenean
|
|
semper sagittis velit. Cras in mi. Duis porta mauris ut ligula.
|
|
Proin porta rutrum lacus. <a href="#">Etiam</a> consequat scelerisque quam. Nulla
|
|
facilisi. Maecenas luctus venenatis nulla. In sit amet dui non mi
|
|
semper iaculis. Sed molestie tortor at ipsum. <a href="#">Morbi</a> dictum rutrum
|
|
magna. Sed vitae risus.
|
|
</p>
|
|
</span>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|