myapp.ScreenName.EntityName_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/>");
    div.appendTo($(element));
    div.attr("style", "width: 800px; height: 640px");

    contentItem.dataBind("value.isLoaded", function (newValue) {
        if (newValue) {
            div.wijevcal({
                timeInterval: 60,
                timeIntervalHeight: 20,
                viewType: "day"
            });

            $(".wijmo-wijev-headerbar .wijmo-wijev-tools").controlgroup("refresh");

            contentItem.value.oncollectionchange = function (a) {
                var calendar = c1ls.getCalendarContent(div, contentItem), timer;

                function refresh() {
                    if (div.is(":visible")) {
                        clearInterval(timer);
                        div.wijevcal("option", "beforeEditEventDialogShow", calendar.Select);
                        div.wijevcal("option", "eventsData", calendar.Events);
                    }
                }

                if (a.detail.action === "refresh") {
                    timer = setInterval(refresh, 100);
                }
            };

            c1ls.renderControl(contentItem);
        }
    });
};

Remarks

The first two lines ensure that the appropriate color swatches are used in both light and dark themes.

This widget specifies an initial width and height for optimal rendering on tablet or desktop devices. If desired, change the default width (800px) and height (640px) of the generated DOM element.

This widget will not fully render until the screen collection to which it is bound is loaded (that is, when the oncollectionchange event fires). If the underlying query is re-executed with different sort or filter criteria, then the widget will re-render accordingly. The final line of code calls the c1ls.renderControl method to ensure proper rendering in tabs and popups, and to handle collections that have already been loaded.

The utility method c1ls.getCalendarContent parses the child properties defined in the screen designer and returns an object used to initialize the wijevcal control. This object has the following properties:

• Events, an array of appointments derived from the control’s contentItem and used to initialize the widget’s eventsData option.
• Select, a function that invokes the Tap handler associated with the control’s Columns Layout element, if any. This property is used to initialize the widget’s beforeEditEventDialogShow option, effectively replacing the default Wijmo dialog with the appropriate LightSwitch detail screen.

Copyright (c) GrapeCity, inc. All rights reserved.