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); }); };

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);
    });
};

Remarks

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.