abap2UI5

calendar type

islamic Calendar with secondary gregorian type

Z2UI5_CL_SMPC_APP_151

Controls sap.ui.unified UI5 1.71

The facts

Repository
abap2UI5/samples-controls
Class
Z2UI5_CL_SMPC_APP_151
Source file
z2ui5_cl_smpc_app_151.clas.abap
Library
sap.ui.unified
UI5 entity
sap.ui.unified.Calendar
Demo kit sample
sap.ui.unified.sample.CalendarCalendarType
SAP's own sample
running at sdk.openui5.org ↗
Minimum UI5
1.71 — the floor abap2UI5 holds its samples to
In the playground
runs in the browser, with no system and nothing installed

Keywords: calendar, sap.ui.unified, types, verticallayout, horizontallayout, button, label, text

Controls it builds

Read out of the builder chain by the abap2UI5 linter, not from the category this sample is filed under — which is what makes “which samples build one of these” a question the catalogue can answer at all.

Libraries

Run it here

The sample running, in this page — the app on its own, with no editor over it. Switch to Playground with this code

Nothing is installed and nothing is sent anywhere: the ABAP is compiled to JavaScript in this browser and runs against abap2UI5 itself.

The ABAP

z2ui5_cl_smpc_app_151.clas.abap — 112 lines Read it on GitHub ↗
" @keywords calendar sap.ui.unified types verticallayout horizontallayout button label text
" @summary islamic Calendar with secondary gregorian type
CLASS z2ui5_cl_smpc_app_151 DEFINITION PUBLIC.

  PUBLIC SECTION.
    INTERFACES z2ui5_if_app.

    DATA selected_date TYPE string.

  PROTECTED SECTION.
    DATA client TYPE REF TO z2ui5_if_client.

    METHODS view_display.
    METHODS on_event.

  PRIVATE SECTION.
ENDCLASS.


CLASS z2ui5_cl_smpc_app_151 IMPLEMENTATION.

  METHOD z2ui5_if_app~main.

    me->client = client.
    IF client->check_on_init( ).
      selected_date = `No Date Selected`.
      view_display( ).
    ELSEIF client->check_on_navigated( ).
      view_display( ).
    ELSEIF client->check_on_event( ).
      on_event( ).
    ENDIF.

  ENDMETHOD.


  METHOD view_display.

    DATA(view) = z2ui5_cl_ui5_view_builder=>factory( ).

    view->ele( n = `View` ns = `mvc`
        )->a( n = `xmlns:l`   v = `sap.ui.layout`
        )->a( n = `xmlns:u`   v = `sap.ui.unified`
        )->a( n = `xmlns:mvc` v = `sap.ui.core.mvc`
        )->a( n = `xmlns`     v = `sap.m`
        )->a( n = `class`     v = `viewPadding`

        )->ele( n = `VerticalLayout` ns = `l`
            )->a( n = `class` v = `sapUiContentPadding`

            )->tag( n = `Calendar` ns = `u`
                )->a( n = `id`                    v = `calendar`
                )->a( n = `primaryCalendarType`   v = `Islamic`
                )->a( n = `secondaryCalendarType` v = `Gregorian`
                " the picked day is read out of the event as a UI5 EXPRESSION - indexed
                " access and chained calls resolve there (measured with
                " scripts/probes/event-arg-expression-probe.mjs). The LOCAL date parts
                " travel, not toISOString( ), which would shift the day east of
                " Greenwich; the length guard reproduces the deselect case
                )->a( n = `select`                v = client->_event( val   = `CAL_SELECT`
                                                                      t_arg = VALUE #(
                                                                        ( `$event.oSource.getSelectedDates().length > 0 ? $event.oSource.getSelectedDates()[0].getStartDate().getFullYear() : 0` )
                                                                        ( `$event.oSource.getSelectedDates().length > 0 ? $event.oSource.getSelectedDates()[0].getStartDate().getMonth() + 1 : 0` )
                                                                        ( `$event.oSource.getSelectedDates().length > 0 ? $event.oSource.getSelectedDates()[0].getStartDate().getDate() : 0` ) ) )

            )->ele( n = `HorizontalLayout` ns = `l`
                )->a( n = `allowWrapping` v = `true`
                )->tag( `Button`
                    )->a( n = `press` v = client->_event( `FOCUS_TODAY` )
                    )->a( n = `text`  v = `Focus Today`
                    )->a( n = `class` v = `sapUiSmallMarginEnd`
                )->tag( `Label`
                    )->a( n = `text`  v = `Selected Date (yyyy-mm-dd):`
                    )->a( n = `class` v = `sapUiSmallMarginEnd`
                )->tag( `Text`
                    )->a( n = `id`   v = `selectedDate`
                    )->a( n = `text` v = client->_bind( selected_date ) ).

    client->view_display( view->stringify( ) ).

  ENDMETHOD.


  METHOD on_event.

    CASE client->get_event( ).

      WHEN `CAL_SELECT`.
        " Calendar.select formats the SELECTED day as Gregorian yyyy-MM-dd (the
        " primary calendar is Islamic, the status text stays Gregorian like its
        " label). The day arrives as its three LOCAL parts; year 0 means the
        " re-click cleared the selection
        DATA(year) = client->get_event_arg( ).
        IF year IS INITIAL OR year = `0`.
          selected_date = `No Date Selected`.
        ELSE.
          selected_date = |{ year }-{ CONV i( client->get_event_arg( 2 ) ) WIDTH = 2 ALIGN = RIGHT PAD = '0' }| &&
                          |-{ CONV i( client->get_event_arg( 3 ) ) WIDTH = 2 ALIGN = RIGHT PAD = '0' }|.
        ENDIF.

      WHEN `FOCUS_TODAY`.
        " handleFocusToday only calls focusDate(today) - it changes no text in
        " the original. The port keeps writing the server date (= today), which
        " is what the button visibly does here; the calendar focus itself is not
        " moved (focusDate takes a Date OBJECT no wire can construct)
        selected_date = |{ sy-datum+0(4) }-{ sy-datum+4(2) }-{ sy-datum+6(2) }|.

    ENDCASE.

  ENDMETHOD.

ENDCLASS.

More in sap.ui.unified

Search every abap2UI5 sample · the full list on one page

On this page