Events Calendar

Member Of	Wijmo Collection Control
Base Control	wijevcal
Description	Creates a schedule for managing a list of appointments.
Usage	Apply to a collection with at least three entity properties. The first two properties are DateTime values representing an appointment’s start and end time, respectively. The third property is a string value used to label an appointment in the events calendar.

Generated Code	Copy Code
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); } }); };

Generated Code

Copy Code

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.