Pivot provides two types of calendar components: a standalone Calendar component that can be used anywhere within an application's user interface, and a CalendarButton component that, like a list button, displays a popup calendar when pressed.

The following sample application demonstrates both component types. Selecting a date on one calendar automatically updates the other calendar as well as setting the text of a label to the currently selected date:

The BXML source is as follows:

            <Window title="Calendars" maximized="true"
                <Border styles="{padding:8}">
                            <Border Form.label="Calendar" styles="{color:10}">
                                <Calendar bxml:id="calendar" selectedDate="${calendarButton.selectedDate}">
                                        function selectedDateChanged(calendar, previousSelectedDate) {
                                            calendar.year = calendar.selectedDate.year;
                                            calendar.month = calendar.selectedDate.month;
                            <CalendarButton bxml:id="calendarButton" Form.label="Calendar button"
                            <Label bxml:id="selectedDateLabel" Form.label="Selected date"

Note that there is no Java or script code associated with this example. The calendars are kept in sync via a Pivot feature called property binding. This feature allows a caller to declaratively create a relationship between a source and target property such that changes to the source are automatically reflected in the target.

In BXML, a binding relationship is created via the "${...}" syntax shown in the sample code. For example, the following markup ensures that any changes to the "calendar.selectedDate" property are automatically propagated to the Label's "text" property:

            <Label bxml:id="selectedDateLabel" Form.label="Selected date"

Property binding is discussed in more detail in the Property Binding section.

Next: Menus