You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
226 lines
9.2 KiB
226 lines
9.2 KiB
<!DOCTYPE HTML> |
|
<html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<title>Dojox Calendar Test</title> |
|
<style type="text/css"> |
|
@import "../../../dojo/resources/dojo.css"; |
|
@import "../../../dijit/themes/tundra/tundra.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" |
|
data-dojo-config="async:1, transparentColor: [ 255, 255, 255 ]"></script> |
|
|
|
<script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script> |
|
|
|
<script type="text/javascript"> |
|
require([ |
|
"dojo/_base/declare", |
|
"dojo/parser", |
|
"dojo/query", |
|
"dojox/fx/_base", |
|
"dojox/widget/Calendar", |
|
"dojo/dom", |
|
"dojox/widget/DailyCalendar", |
|
"dojox/widget/MonthAndYearlyCalendar", |
|
"dojox/widget/MonthlyCalendar", |
|
"dojox/widget/CalendarFisheye", |
|
"dojo/aspect", |
|
"dojo/domReady!" |
|
], function(declare, parser, query, xFx, Calendar, dom){ |
|
|
|
declare("test/CalendarCustomFx", [Calendar], { |
|
|
|
addFx: function(theQuery, fromNode){ |
|
query(theQuery, fromNode).on("mouseover", function(evt){ |
|
xFx.highlight({node: evt.target}).play(); |
|
}); |
|
} |
|
}); |
|
//window['log'] = function(str){ |
|
// dom.byId("report").innerHTML = str; |
|
//} |
|
parser.parse(); |
|
}); |
|
</script> |
|
</head> |
|
<body class="soria"> |
|
<div> |
|
Use different theme: |
|
<a href="test_Calendar.html?theme=tundra">tundra</a> |
|
<a href="test_Calendar.html?theme=soria">soria</a> |
|
<a href="test_Calendar.html?theme=nihilo">nihilo</a> |
|
</div> |
|
<div id="report" style="float:left; width:100%;height:40px;color:red;font-weight:bold;"></div> |
|
|
|
<div> |
|
<span style="width:33%;float:left;"> |
|
<div class="title">Typical Calendar usage, with day, and month/year views</div> |
|
<div data-dojo-type="dojox/widget/Calendar" id="cal"> |
|
<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 day only view, no month/year view</div> |
|
|
|
<div data-dojo-type="dojox/widget/DailyCalendar" id="calDayOnly"> |
|
<script type="dojo/aspect" data-dojo-advice="after" data-dojo-method="onValueSelected" data-dojo-args="value"> |
|
console.log("Day 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 day only view, no month/year view</div> |
|
|
|
<div data-dojo-type="dojox/widget/MonthAndYearlyCalendar" id="calMonthAndYearOnly"> |
|
<script type="dojo/aspect" data-dojo-advice="after" data-dojo-method="onValueSelected" data-dojo-args="value"> |
|
console.log("Date Value selected from Month and Year Only Calendar: " + 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> |
|
|
|
<div> |
|
<span style="width:33%;float:left;"> |
|
<div class="title">Typical calendar, with min/max constraints = {min:'2012-12-12',max:'2013-01-15'}</div> |
|
<div data-dojo-type="dojox/widget/Calendar" id="calLimits" value="2012-12-25" |
|
constraints="{min:'2012-12-12',max:'2013-01-15'}"> |
|
<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">Typical calendar, with min/max constraints a week before and after the current date</div> |
|
<div data-dojo-type="dojox/widget/Calendar" id="calLimitsWeek"> |
|
<script type="dojo/aspect" data-dojo-advice="before" data-dojo-method="postMixInProperties"> |
|
//TODO: This never gets called... |
|
require(["dojox/widget/Calendar", "dojo/date"], function(Calendar, date){ |
|
var currentDate = new Date(); |
|
var constraints = { |
|
min: date.add(currentDate, 'week', -1), |
|
max: date.add(currentDate, 'week', +1) |
|
}; |
|
Calendar._setConstraintsAttr(constraints); |
|
}); |
|
</script> |
|
<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">Typical calendar, initial date set in HTML to December 25th, 2012</div> |
|
<div data-dojo-type="dojox/widget/Calendar" id="calXmas" value="2012-12-25"> |
|
<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> |
|
</div> |
|
|
|
<div> |
|
<span style="width:50%;float:left;"> |
|
<div class="title">Standard calendar, with FisheyeLite effects (in development, just here to show that FX can be applied)</div> |
|
|
|
<div data-dojo-type="dojox/widget/CalendarFisheye" id="calFisheye"> |
|
<script type="dojo/aspect" data-dojo-advice="after" data-dojo-method="onValueSelected" data-dojo-args="value"> |
|
console.log("Date Value selected from Fisheye Calendar: " + 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:50%;float:left;"> |
|
<div class="title">With custom Highlighting effects (in development, just here to show that FX can be applied)</div> |
|
|
|
<div data-dojo-type="test/CalendarCustomFx" id="calCustomFx"> |
|
<script type="dojo/aspect" data-dojo-advice="after" data-dojo-method="onValueSelected" data-dojo-args="value"> |
|
console.log("Date Value selected in FX Calendar: " + 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>
|
|
|