Calendar

Generated 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.