<a:form id="form">
    <a:growl id="msgs" showDetail="true" />

    <h:panelGrid columns="2" cellpadding="5">
        <a:outputLabel for="inline" value="Inline:" />
        <a:calendar id="inline" value="#{calendarView.date1}" mode="inline" />

        <a:outputLabel for="popup" value="Popup:" />
        <a:calendar id="popup" value="#{calendarView.date2}" />

        <a:outputLabel for="button" value="Button:" />
        <a:calendar id="button" value="#{calendarView.date3}" showOn="button" />

        <a:outputLabel for="event" value="Select Event:" />
        <a:calendar id="event" value="#{calendarView.date4}">
            <a:ajax event="dateSelect" listener="#{calendarView.onDateSelect}" update="msgs" />
        </a:calendar>

        <a:outputLabel for="german" value="German:" />
        <a:calendar id="german" value="#{calendarView.date5}" locale="de" navigator="true" pattern="yyyy-MMM-dd" />

        <a:outputLabel for="restricted" value="Restricted:" />
        <a:calendar id="restricted" value="#{calendarView.date6}" mindate="4/1/14" maxdate="7/1/14" />

        <a:outputLabel for="multi" value="Multiple:" />
        <a:calendar id="multi" value="#{calendarView.date7}" pages="3" />

        <a:outputLabel for="effect" value="Effect:" />
        <a:calendar id="effect" value="#{calendarView.date8}" effect="fold" />

        <a:outputLabel for="mask" value="Mask:" />
        <a:calendar id="mask" value="#{calendarView.date9}" pattern="dd-MM-yyyy" mask="true" />

        <a:outputLabel for="datetime" value="Datetime:" />
        <a:calendar id="datetime" value="#{calendarView.date10}" pattern="MM/dd/yyyy HH:mm:ss" />

        <a:outputLabel for="time" value="Time:" />
        <a:calendar id="time" value="#{calendarView.date11}" pattern="HH:mm" timeOnly="true"  />
    </h:panelGrid>

    <a:commandButton value="Submit" update="msgs" actionListener="#{calendarView.click}" icon="ui-icon-check" />

    <a:dialog modal="true" resizable="false" header="Values" widgetVar="dlg" showEffect="fold">
        <a:panelGrid id="display" columns="2" columnClasses="label,value">
            <h:outputText value="Inline:" />
            <h:outputText value="#{calendarView.date1}">
                <f:convertDateTime pattern="MM/dd/yyyy" />
            </h:outputText>

            <h:outputText value="Popup:" />
            <h:outputText value="#{calendarView.date2}">
                <f:convertDateTime pattern="MM/dd/yyyy" />
            </h:outputText>

            <h:outputText value="Button:" />
            <h:outputText value="#{calendarView.date3}">
                <f:convertDateTime pattern="MM/dd/yyyy" />
            </h:outputText>

            <h:outputText value="Event:" />
            <h:outputText value="#{calendarView.date4}">
                <f:convertDateTime pattern="MM/dd/yyyy" />
            </h:outputText>

            <h:outputText value="German:" />
            <h:outputText value="#{calendarView.date5}">
                <f:convertDateTime pattern="MM/dd/yyyy" />
            </h:outputText>

            <h:outputText value="Restricted:" />
            <h:outputText value="#{calendarView.date6}">
                <f:convertDateTime pattern="MM/dd/yyyy" />
            </h:outputText>

            <h:outputText value="Multiple:" />
            <h:outputText value="#{calendarView.date7}">
                <f:convertDateTime pattern="MM/dd/yyyy" />
            </h:outputText>

            <h:outputText value="Effect:" />
            <h:outputText value="#{calendarView.date8}">
                <f:convertDateTime pattern="MM/dd/yyyy" />
            </h:outputText>

            <h:outputText value="Mask:" />
            <h:outputText value="#{calendarView.date9}">
                <f:convertDateTime pattern="MM/dd/yyyy" />
            </h:outputText>

            <h:outputText value="Datetime:" />
            <h:outputText value="#{calendarView.date10}">
                <f:convertDateTime pattern="MM/dd/yyyy HH:mm:ss" />
            </h:outputText>

            <h:outputText value="Time:" />
            <h:outputText value="#{calendarView.date11}">
                <f:convertDateTime pattern="HH:mm" />
            </h:outputText>
        </a:panelGrid>
    </a:dialog>
</a:form>