|
Member Of |
|
|
Base Control |
|
|
Description |
Creates a schedule component 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
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");
setTimeout(function () {
div.wijevcal({
timeInterval: 60,
timeIntervalHeight: 20,
viewType: "day"
});
$(".wijmo-wijev-headerbar .wijmo-wijev-tools").controlgroup("refresh");
}, 100);
contentItem.value.oncollectionchange = function (a) {
var calendar = c1ls.getCalendarContent(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.