dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
108 lines (95 loc) • 4.1 kB
HTML
<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/tests/css/dijitTests.css";
@import "../Calendar/Calendar.css";
.title {
font-weight: bolder;
}
</style>
<script type="text/javascript" src="../../../dojo/dojo.js"
data-dojo-config="async:1, transparentColor: [ 255, 255, 255 ]"></script>
<!-- not needed, for testing alternate themes -->
<script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script>
<script type="text/javascript">
require([
"dojo/parser",
"dojo/domReady!"
], function(parser){
//window['log'] = function(str){
//dom.byId("report").innerHTML = str;
//}
parser.parse();
});
</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/aspect" data-dojo-advice="after" data-dojo-method="onValueSelected" data-dojo-args="value">
console.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/aspect" data-dojo-advice="after" data-dojo-method="onValueSelected" data-dojo-args="value">
console.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/aspect" data-dojo-advice="after" data-dojo-method="onValueSelected" data-dojo-args="value">
console.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>