Multiple Day Selection
Calendar where the user can select multiple days, entire weeks (either by selecting its week number or by using SHIFT + Space) and ranges (using SHIFT + ENTER/Left mouse click).
Z2UI5_CL_SMPC_APP_307
Controls
sap.ui.unified
UI5 1.71
The facts
- Repository
- abap2UI5/samples-controls
- Class
Z2UI5_CL_SMPC_APP_307- Source file
z2ui5_cl_smpc_app_307.clas.abap↗- Library
- sap.ui.unified
- UI5 entity
sap.ui.unified.Calendar- Demo kit sample
sap.ui.unified.sample.CalendarMultipleDaySelection- 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, calendarmultipledayselection, html, verticallayout, button, list, standardlistitem
Controls it builds
- sap.m.Button
- sap.m.List
- sap.m.StandardListItem
- sap.ui.core.HTML
- sap.ui.core.mvc.View
- sap.ui.layout.VerticalLayout
- sap.ui.unified.Calendar
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_307.clas.abap — 165 lines
Click a number to link to a line — shift-click for a range.
Read it on GitHub ↗
" @keywords calendar sap.ui.unified calendarmultipledayselection html verticallayout button list standardlistitem
" @summary Calendar where the user can select multiple days, entire weeks (either by selecting its week number or by using SHIFT + Space) and ranges (using SHIFT + ENTER/Left mouse click).
CLASS z2ui5_cl_smpc_app_307 DEFINITION PUBLIC.
PUBLIC SECTION.
INTERFACES z2ui5_if_app.
TYPES: BEGIN OF ty_s_date,
date TYPE string,
END OF ty_s_date.
DATA selecteddates TYPE STANDARD TABLE OF ty_s_date WITH EMPTY KEY.
PROTECTED SECTION.
" one entry per DateRange the frontend marshalled out of the LIVE
" selectedDates aggregation - startDate arrives as an ISO LOCAL timestamp
" (no Z), so its first ten characters are the day the user picked
TYPES: BEGIN OF ty_s_event_range,
startdate TYPE string,
END OF ty_s_event_range.
TYPES ty_t_event_range TYPE STANDARD TABLE OF ty_s_event_range WITH EMPTY KEY.
DATA client TYPE REF TO z2ui5_if_client.
METHODS view_display.
METHODS on_event.
METHODS event_ranges
IMPORTING
val TYPE string
RETURNING
VALUE(result) TYPE ty_t_event_range.
PRIVATE SECTION.
ENDCLASS.
CLASS z2ui5_cl_smpc_app_307 IMPLEMENTATION.
METHOD z2ui5_if_app~main.
me->client = client.
IF 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`
)->a( n = `xmlns:core` v = `sap.ui.core`
" the sample's own ../style.css (shared by the sap.ui.unified samples and
" listed in this sample's manifest) - the view carries the class and the
" rule behind it has to come with it. \{ \} escaped: the XMLView parser
" reads an unescaped brace as a binding
)->tag( n = `HTML` ns = `core`
)->a( n = `content` v = `<style>.viewPadding\{padding:1rem\}` &&
`.sap-phone .viewPadding\{padding:0rem\}` &&
`.sap-phone .sapUiCal\{position:relative\}` &&
`.labelMarginLeft\{margin:1rem\}</style>`
)->ele( n = `VerticalLayout` ns = `l`
)->tag( n = `Calendar` ns = `u`
)->a( n = `id` v = `calendar`
" the WHOLE selectedDates aggregation travels in one arg: the
" frontend marshals each DateRange into its public properties
" (Lib.normalizeEventArgs), which is the loop the client
" expression grammar does not have
)->a( n = `select` v = client->_event( val = `CAL_SELECT` arg = `$event.oSource.getSelectedDates()` )
)->a( n = `intervalSelection` v = `false`
)->a( n = `singleSelection` v = `false`
)->tag( `Button`
)->a( n = `press` v = client->_event( `REMOVE_SELECTION` )
)->a( n = `text` v = `Remove All Selected Dates`
)->ele( `List`
)->a( n = `id` v = `selectedDatesList`
)->a( n = `class` v = `labelMarginLeft`
)->a( n = `noDataText` v = `No Dates Selected`
)->a( n = `headerText` v = `Selected Dates (yyyy-mm-dd)`
)->a( n = `items` v = |\{path: '{ client->_bind_path( selecteddates ) }'\}|
)->tag( `StandardListItem`
)->a( n = `title` v = `{DATE}` ).
client->view_display( view->stringify( ) ).
ENDMETHOD.
METHOD on_event.
CASE client->get_event( ).
WHEN `CAL_SELECT`.
" handleCalendarSelect: rebuild the model from EVERY selected date,
" each formatted yyyy-MM-dd - the day is the first ten characters of
" the ISO local timestamp the marshalled DateRange carries
CLEAR selecteddates.
DATA(ranges) = event_ranges( client->get_event_arg( ) ).
LOOP AT ranges REFERENCE INTO DATA(lr_range).
IF strlen( lr_range->startdate ) < 10.
CONTINUE.
ENDIF.
INSERT VALUE #( date = lr_range->startdate(10) ) INTO TABLE selecteddates.
ENDLOOP.
WHEN `REMOVE_SELECTION`.
" handleRemoveSelection: removeAllSelectedDates( ) + clear the model.
" selectedDates is written by the control itself, so the aggregation
" has to be emptied on the control - the model half alone would leave
" the days highlighted
CLEAR selecteddates.
client->follow_up_action( val = client->cs_event-control_by_id
t_arg = VALUE #( ( `calendar` ) ( `removeAllSelectedDates` ) ) ).
ENDCASE.
ENDMETHOD.
METHOD event_ranges.
DATA(lv_json) = condense( val ).
IF lv_json IS INITIAL.
RETURN.
ENDIF.
IF lv_json(1) <> `[`.
lv_json = |[{ lv_json }]|.
ENDIF.
TRY.
" a marshalled DateRange carries ALL its public properties (ID,
" startDate, endDate), so only the one field this port models is
" mapped - a plain to_abap( ) fails on the first extra one
"
" z2ui5_cl_ajson is the framework's VENDORED ajson copy and lives
" outside the released API (src/02), so it may be renamed or
" restructured without notice - the linter says so, and it is right.
" There is no released JSON reader to use instead, the same reasoning
" as apps 103 and 298; declared as a deviation in the sidecar
" abap2ui5lint-disable-next-line non-released-api -- no released JSON reader exists; see the comment above and the sidecar deviation
z2ui5_cl_ajson=>parse( lv_json
)->to_abap_corresponding_only(
)->to_abap( IMPORTING ev_container = result ).
" abap2ui5lint-disable-next-line non-released-api -- the exception of the call above
CATCH z2ui5_cx_ajson_error.
CLEAR result.
ENDTRY.
ENDMETHOD.
ENDCLASS.
More in sap.ui.unified
- Menu Eventing — Menu with Menu Eventing
- Calendar with navigatable legend — An example of adding navigatable legend to the calendar.
- Complex — File Uploader Example with Parameters
- Color Picker Popover — Example of ColorPicker in a popover using the thin wrapper control sap.ui.unified.ColorPi…
- multiple months — Calendar with more than one month
- Date deselection with shortcut for today — An example of recommended implementation of deselection logic when the calendar is in sin…
- Single Interval Selection — Calendar where the user can select an interval or entire week (either by selecting its we…
- Special Days with Legend — Calendar with special days and legend
- Color Picker - displayMode: Default — Basic example of Color Picker. Note that you have to set the Color Picker mode to HSL to…
- Color Picker - displayMode: Large — Basic example of Color Picker. Note that you have to set the Color Picker mode to HSL to…
- Menu with Selectable Items — Some menu items can be added to groups to allow single or multiple item selection.
- Calendar with aria-haspopup on special day cells — Calendar demonstrating configurable aria-haspopup attribute on individual day cells via D…
On this page