html
<div id="build-target"></div>
<script type="text/javascript">
$(document.body).ready(function () {
var
buildTarget = $("#build-target"),
today = new Date(),
_c_date = ax5.util.date;
buildTarget.html(
'<div id="calendar-target-01" style="width:300px;border:1px solid #888;padding: 10px;float:left;margin: 10px;"></div>'
+ '<div id="calendar-target-02" style="width:300px;border:1px solid #888;padding: 10px;float:left;margin: 10px;"></div>'
+ '<div style="clear:both;"></div>'
);
// use Array
new ax5.ui.calendar({
target: document.getElementById("calendar-target-01"),
marker: (function () {
var marker = {};
marker[_c_date(today, {'return':'yyyy-MM-dd', 'add': {d: -1}})] = true;
marker[_c_date(today, {'return':'yyyy-MM-dd', 'add': {d: 0}})] = true;
marker[_c_date(today, {'return':'yyyy-MM-dd', 'add': {d: 1}})] = true;
console.log(marker);
return marker;
})(),
onClick: function () {
console.log(this)
}
});
// use Object
new ax5.ui.calendar({
target: document.getElementById("calendar-target-02"),
onStateChanged: function () {
if (this.action == "printDay") {
var holidays = {};
holidays[_c_date(this.printedDay.start, {'return': 'yyyy-MM-dd', 'add': {d: 7}})] = {theme: 'holiday'};
holidays[_c_date(this.printedDay.start, {'return': 'yyyy-MM-dd', 'add': {d: 8}})] = {theme: 'holiday'};
holidays[_c_date(this.printedDay.start, {'return': 'yyyy-MM-dd', 'add': {d: 9}})] = {theme: 'holiday'};
this.self.setMarker(holidays);
}
}
});
});
</script>
'AX5UI' can be used with Bootstrap theme. The development of the distribution of the various UI plug-in. When you click the link to move to AX5UI index page.
AXBoot makes it easy to build web applications with Java & HTML5 Repeatable and noise development process are resolved by AXBoot.