Calendars

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"
                xmlns:bxml="http://pivot.apache.org/bxml"
                xmlns="org.apache.pivot.wtk">
                <Border styles="{padding:8}">
                    <Form>
                        <Form.Section>
                            <Border Form.label="Calendar" styles="{color:10}">
                                <Calendar bxml:id="calendar" selectedDate="${calendarButton.selectedDate}">
                                    <calendarSelectionListeners>
                                        function selectedDateChanged(calendar, previousSelectedDate) {
                                            calendar.year = calendar.selectedDate.year;
                                            calendar.month = calendar.selectedDate.month;
                                        }
                                    </calendarSelectionListeners>
                                </Calendar>
                            </Border>
                            <CalendarButton bxml:id="calendarButton" Form.label="Calendar button"
                                selectedDate="${calendar.selectedDate}"/>
                        </Form.Section>
                        <Form.Section>
                            <Label bxml:id="selectedDateLabel" Form.label="Selected date"
                                text="${calendar.selectedDate}"/>
                        </Form.Section>
                    </Form>
                </Border>
            </Window>
            
        

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"
                text="${calendar.selectedDate}"/>
            
        

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