| Custom Controls > Widget Reference > Calendar |
| Member Of | Wijmo Value Control |
| Base Control | wijcalendar |
| Description | Creates a month calendar display with customizable styles and navigation elements. |
| Usage | Apply to an entity property of type Date or DateTime. |
| Generated Code |
Copy Code
|
|---|---|
myapp.ScreenName.PropertyName_render = function (element, contentItem) {
$.wijmo.wijcalendar.prototype.options.wijCSS.stateDefault = "ui-btn-up-a";
$.wijmo.wijcalendar.prototype.options.wijCSS.content = "ui-body ui-body-a";
var div = $("<div data-role='wijcalendar'/>");
div.appendTo($(element));
div.wijcalendar({
selectionMode: {day: true},
displayDate: contentItem.value
});
div.wijcalendar("selectDate", contentItem.value);
var displayDate = true;
div.wijcalendar({
selectedDatesChanged: function (e, args) {
var newValue = div.wijcalendar("getSelectedDate");
if (contentItem.value != newValue) {
displayDate = false;
contentItem.value = newValue;
displayDate = true;
}
}
});
contentItem.dataBind("value", function (newValue) {
div.wijcalendar("unSelectAll");
if (displayDate) {
div.wijcalendar({ displayDate: newValue });
}
div.wijcalendar("selectDate", newValue);
});
};
|
|
The first two lines ensure that the appropriate color swatches are used in both light and dark themes.
Since this widget is bound to a single Date or DateTime value, the constructor sets the selectionMode option to day. The initial date value is passed to both the displayDate option and the selectDate method to ensure that it is selected and brought into view.
If you need to set additional options on the widget, add them to the initializer passed to the constructor.
The selectedDatesChanged event is handled to update the bound value whenever the end user changes the current date selection.
The dataBind method call ensures that the widget stays in sync whenever the bound value changes.