Fiori Calendar¶
The Fiori Calendar component offers a visual overview of a week or a month. Users can display agendas, events, or schedules on specific dates. It supports four view types: Week view, Month view, Expandable view, and Scroll view. The Week view shows a week of the calendar, while the Month view shows a month. The Expandable view lets users switch between Week and Month views. The Scroll view provides a vertically scrollable list of months and enables range selection.
Fiori Calendar Week View:
Fiori Calendar Month View:
Fiori Calendar Expandable View:
Fiori Calendar Scroll View:
Using the Fiori Calendar¶
Main API¶
The FioriCalendar composable function is the main entry point for displaying the calendar. The API is as follows:
@Composable
fun FioriCalendar(
modifier: Modifier = Modifier,
state: FioriCalendarState = rememberFioriCalendarState(),
colors: FioriCalendarColors = FioriCalendarDefaults.colors(),
textStyles: FioriCalendarTextStyles = FioriCalendarDefaults.textStyles(),
styles: FioriCalendarStyles = FioriCalendarDefaults.styles(),
headerNavigationIcon: @Composable (() -> Unit)? = null,
headerActions: (@Composable RowScope.() -> Unit)? = {
Row {
FioriCalendarHeaderDefaultActions(state, colors)
}
},
onDateSelectionChanged: ((Date) -> Unit)? = null,
onWeekOrMonthChanged: ((Calendar) -> Unit)? = null,
scrollViewHeightConstraint: Dp = 0.dp
)
This API creates Fiori Calendars with a default configuration. It displays a week view showing the current week with no date selected. The FioriCalendarState class includes a FioriCalendarData object, enabling application developers to modify default values and configure Fiori Calendars according to their requirements. Default values are available for every parameter.
class FioriCalendarState(
val data: FioriCalendarData = FioriCalendarData()
)
A function that remembers the FioriCalendarState is also provided, which can be used when the parameters of the FioriCalendarData class are not expected to change after initialization. See Fiori Calendar With Fiori Calendar Data Class Parameters Unchanged After Initialization (Non-Recomposition).
@Composable
fun rememberFioriCalendarState(
data: FioriCalendarData = FioriCalendarData()
): FioriCalendarState = rememberSaveable(saver = FioriCalendarState.Saver()) {
FioriCalendarState(data)
}
Important
We recommend using rememberFioriCalendarState when the parameters of the FioriCalendarData class are not expected to change after initialization. Using this function remembers the parameters allowing them to survive recomposition and, as a result, any changes made to the parameters after initialization will not take effect. See Fiori Calendar With Fiori Calendar Data Class Parameters Unchanged After Initialization (Non-Recomposition).
val calendarState = rememberFioriCalendarState()
FioriCalendar(state = calendarState)
If changing the parameters after initialization and triggering recomposition is required, use the FioriCalendarState class directly. See Fiori Calendar With Fiori Calendar Data Class Parameters Updated After Initialization (Recomposition).
val calendarState = FioriCalendarState()
FioriCalendar(state = calendarState)
The FioriCalendarData class is defined as follows:
data class FioriCalendarData(
val enabled: Boolean = true,
val locale: Locale = getCurrentLocale(),
val viewType: ViewType = ViewType.WEEK,
val initialExpandableViewType: ViewType = ViewType.WEEK,
val startingDay: StartingDay = StartingDay.SUNDAY,
val startDate: Date = getDefaultStartEndDate(locale, true),
val endDate: Date = getDefaultStartEndDate(locale, false),
val initialVisibleDate: Date = getDayStart(Calendar.getInstance().time, getCurrentLocale()),
val initialSelectedDate: Date = getDayStart(Calendar.getInstance().time, getCurrentLocale()),
val showOutOfMonthDates: Boolean = true,
val showMonthViewInLandscapeMode: Boolean = false,
val isSelectionPersistent: Boolean = false,
val showExpandableDragHandle: Boolean = true,
val dateFormat: String = "d",
val dayFormat: Int = java.util.Calendar.NARROW_FORMAT,
val headerData: HeaderData = HeaderData(),
val primaryCalendar: CalendarType = CalendarType.GREGORIAN,
val secondaryCalendar: CalendarType = CalendarType.OTHER,
val primaryCalendarConversion: ((Date) -> String)? = null,
val secondaryCalendarConversion: ((Date) -> String)? = null,
val legendData: List<LegendData> = ArrayList(),
val specialDates: List<Pair<Date, Int>> = ArrayList(),
val useRangeSelection: Boolean = false,
val initialSelectedRangeStartDate: Date = getDayStart(Calendar.getInstance().time, getCurrentLocale()),
val initialSelectedRangeEndDate: Date = getDayStart(Calendar.getInstance().time, getCurrentLocale()),
val initialDateCleared: Boolean = true,
val isDateDisabled: ((Date) -> Boolean)? = null
)
The HeaderData class has the following signature:
data class HeaderData(
val enabled: Boolean = true,
val title: String? = null,
val subtitle: String? = null,
val headerType: HeaderType = HeaderType.START,
val useDateAsSubtitle: Boolean = false
)
API Parameters¶
Some of the parameters are explained in more detail below.
Locale¶
By default, the Fiori Calendar uses the device's locale to display the dates and months. The locale parameter of the FioriCalendarData class can be used to pass in a different locale.
View¶
The viewType parameter in the FioriCalendarData class lets you set the Calendar view to Week, Month, Expandable, or Scroll. The Week view displays the current week, while the Month view shows the current month. The Expandable view allows users to drag and switch between Week and Month views. The Scroll view provides a vertically scrollable list of months and enables range selection. In the Expandable view type, the initial view defaults to the Week view. To display the Month view initially, set the initialExpandableViewType property to ViewType.MONTH.
Starting Day¶
The Fiori Calendar is displayed with Sunday as the starting day of the week by default. In addition to Sunday, Saturday and Monday can also be set as the starting days. Use the startingDay parameter of the FioriCalendarData class property to set the Starting Day.
Lower and Upper Bound Dates¶
The Fiori Calendar shows weeks or months up to 10 years in the past and future. This can be changed using the startDate and endDate parameters of the FioriCalendarData class.
Initial Visible Date¶
The Fiori Calendar displays the current week or month when it is initialized. It can be configured to show any week or month that a date belongs to using the initialVisibleDate parameter of the FioriCalendarData class. Note, though, that this changes only the initial visible date and not the initial selected date. To also change the selected date, see Initial Selected Date. Additionally, this only updates the visible date on initial launch. To update the visible date after initialization, use the fioriCalendarNavigateToDate() function. See Navigate To Specific Date.
Initial Selected Date¶
On the initial launch of the Fiori Calendar, users can select a date using the initialSelectedDate parameter in the FioriCalendarData class. This parameter sets only the initial selected date, not the initial visible date. For setting the visible date, refer to Initial Visible Date. Remember, this parameter updates the selected date only during the initial launch. To change the selected date after initialization, check Update Selected Date. If the user sets the initialDateCleared parameter to true, the initialSelectedDate parameter is ignored, and the calendar launches without a selected date.
Initial Selected Range Start and End Dates¶
When the Fiori Calendar uses range selection, users can select the range start and end dates during the initial launch. This is done through the initialSelectedRangeStartDate and initialSelectedRangeEndDate parameters of the FioriCalendarData class. Keep in mind that these parameters only set the initial selected range start and end dates, not the initial visible date. For setting the visible date, refer to Initial Selected Date.
These parameters update the selected range start and end dates only during the initial launch. To change these dates after initialization, see Update Selected Date. If the initialDateCleared parameter is set to true, the initialSelectedRangeStartDate and initialSelectedRangeEndDate parameters are ignored, and the Fiori Calendar launches without a selected date range.
Initial Date Cleared¶
By default, the Fiori Calendar doesn't have a selected date. To change this, set the initialDateCleared parameter of the FioriCalendarData class to false. This lets you use the initialSelectedDate, initialSelectedRangeStartDate, and initialSelectedRangeEndDate parameters to set a selected date or date range when the Fiori Calendar launches.
Out-Of-Month Dates¶
In some instances when the Fiori Calendar is being displayed in Month view, a particular month may display dates from the previous or next months if they belong to the first or last week of the currently visible month. In order to hide the dates not belonging to the currently visible month, set the showOutOfMonthDates parameter of the FioriCalendarData class to false.
Month View In Landscape Mode On Phone¶
In the case when the window height is compact, such as most phones in landscape mode, the Fiori Calendar only displays the Week view by default due to space constraints even if it was showing the Month view before in portrait mode. This is also applicable to the Expandable viewType where the drag handle and drag gesture will be turned off so that it cannot be expanded from Week view to Month view. To display the Month view for compact window height as well, set the showMonthViewInLandscapeMode parameter of the FioriCalendarData class to true. When it is set to true, for the Expandable viewType, the drag gesture is only detected on the drag handle and the rest of the view can be used to scroll the screen.
Persist Selected Date¶
By default, the selected date is not persisted. Thus, when the application user changes the week or month, the Fiori Calendar selects a date in the currently visible week or month. If the currently visible week or month shows today's date, then it is selected. If today's date is not visible, in the case of the Week view, it selects the same day of the week as today, while in the case of Month view, it selects the first day of the month. In order to persist the last selected date across week and month changes, set the isSelectionPersistent parameter of the FioriCalendarData class to true.
Day Labels¶
The Fiori Calendar displays the first letter of each day as the day label. To change this behavior, use the dayFormat parameter of the FioriCalendarData class, which accepts the Calendar format to display the days.
Header Data¶
By default, the Fiori Calendar displays a header that shows the currently visible month and year along with the Go To Today, Navigate To Previous Week Or Month, and Navigate To Next Week Or Month buttons. Application developers can also add a navigation icon button using the headerNavigationIcon parameter of the FioriCalendar composable function. They can also change the default buttons by passing their own through the headerActions parameter, which takes composable functions that will be laid out in a row. Application developers can also show a custom title or subtitle using the title and subtitle parameters of the HeaderData class. The title and subtitle can also be aligned differently using the headerType parameter. The header can also be hidden altogether using the enabled parameter. The header UI component is also provided as a separate FioriCalendarHeader composable function. See Fiori Calendar With Separate Header for an example.
Header Actions¶
The default header actions of Go To Today, Navigate To Previous Week Or Month and Navigate To Next Week Or Month buttons are provided as composable functions via the FioriCalendarHeaderDefaultActions composable function. Additionally, the Go To Today button and Navigate To Previous Week Or Month and Navigate To Next Week Or Month buttons are provided as separate composable functions via the FioriCalendarNavigateToTodayButton composable function and FioriCalendarPreviousNextNavigationButtons composable function, respectively. This can be passed to the headerActions parameter of the HeaderData class along with any custom action. See Fiori Calendar Custom Header Actions for an example.
Alternate Calendar¶
The Fiori Calendar displays one set of dates that is based on the Gregorian calendar by default. Hebrew, Islamic, Chinese, and Japanese calendar types are also available. Use the primaryCalendar parameter of the FioriCalendarData class to set the calendar type of the primary calendar. A second set of dates can be displayed by using the secondaryCalendar parameter.
The displayed dates can be customized using a function that converts each date to another value. Use the primaryCalendarConversion and secondaryCalendarConversion parameters of the FioriCalendarData class to specify the conversion functions. The conversion function will only take effect when the respective primaryCalendar or secondaryCalendar parameter is set to CalendarType.OTHER.
Status Indicators¶
Each date can display a status indicator. Use the legendData parameter of the FioriCalendarData class to specify a list of LegendData objects to create status indicators. Use the specialDates parameter of the FioriCalendarData class to specify the dates that should display a status indicator from the legendData list.
Range Selection¶
The Fiori Calendar supports range selection. To enable this feature, set the useRangeSelection parameter of the FioriCalendarData class to true. This setting also forces the Fiori Calendar to use ViewType.SCROLL.
Disabled Dates¶
Users can specify certain dates to be in a disabled state using the isDateDisabled parameter of the FioriCalendarData class. This parameter accepts a function that takes a date and returns a boolean value to indicate whether the date is disabled. By default, the value is null, which means that no dates are disabled.
On Selected Date Changed Callback¶
The onDateSelectionChanged parameter of the FioriCalendar composable function can be used to notify whether any selected date changes have been made by the application user. It returns the new selected date as a Date object in the callback. Note that it is only invoked when the application user taps on a date to select it. It is not invoked when the isSelectionPersistent parameter of the FioriCalendarData class is false and a date is selected by default when the week or month changes. See Selected Date Changed Callback.
On Week Or Month Changed Callback¶
The onWeekOrMonthChanged parameter of the FioriCalendar composable function can be used to notify the application developer of any changes made by the application user to the currently visible week or month, either through the swipe actions, by tapping the navigation buttons in the header, or from any view that invokes the fioriCalendarNavigateToPreviousWeekOrMonth() and fioriCalendarNavigateToNextWeekOrMonth() functions. It returns the new week or month visible as a Calendar object in the callback. See Week Or Month Changed Callback.
Scroll View Height¶
When using ViewType.SCROLL, users can set the height of the scrollable view with the scrollViewHeightConstraint parameter. The default value is 0.dp, meaning it uses the entire screen height.
Colors and Text Styles¶
The colors and textStyles parameters of the FioriCalendar composable function can be used to customize the various colors and text styles used in the Fiori Calendar. The required values can be passed to the FioriCalendarDefaults.colors() and the FioriCalendarDefaults.textStyles() composable functions. For a complete list of the attributes that can be changed and their corresponding parameters, click on the following links:
Also see Fiori Calendar With Custom Colors And Text Styles for example usage.
Additional APIs¶
There are additional APIs provided that are described below:
Navigation¶
APIs are provided to navigate to today's date, to a specific date, to the previous week or month and to the next week or month. They are fioriCalendarNavigateToToday(), fioriCalendarNavigateToDate(), fioriCalendarNavigateToPreviousWeekOrMonth() and fioriCalendarNavigateToNextWeekOrMonth(), respectively. See Navigate To Today, Navigate To Specific Date, Navigate To Previous And Next Week Or Month for information on how to use them.
Update Selected Date¶
You can update the selected date using the fioriCalendarUpdateSelectedDate() function. Use this function to change the selected date after the Fiori Calendar's initial launch. When working with range selection, the start and end dates of the selected range depend on the order of calls to this function. This order should mimic the actions of tapping on the dates within the Fiori Calendar. For guidance on using the fioriCalendarUpdateSelectedDate() function, see Updating the Selected Date. To update the initial selected date, refer to Initial Selected Date.
Currently Visible Calendar Month And Year¶
The month and year of the calendar that is currently visible to the user can be retrieved using the fioriCalendarGetMonth() and the fioriCalendarGetYear() functions, respectively. Alternatively, the On Week Or Month Changed Callback can also be used.
Switch Expandable View Type¶
For the Expandable viewType, the Calendar uses a custom modifier called Modifier.expandableDragModifier to detect the drag gesture of the application user to switch between Week and Month views. The application developer may also switch between the views programmatically using the fioriCalendarSwitchExpandableViewType() function. See Fiori Calendar Custom Header Actions for an example usage of the function.
Code Samples¶
Default Fiori Calendar¶
This code snippet demonstrates the simplest use of the Fiori Calendar, initialized with default values. It creates a Fiori Calendar in week view, displaying the current week with no date selected.
Column(
horizontalAlignment = Alignment.CenterHorizontally
) {
FioriCalendar()
}
Fiori Calendar With Fiori Calendar Data Class Parameters Unchanged After Initialization (Non-Recomposition)¶
This code snippet demonstrates how to initialize the FioriCalendar composable function with the FioriCalendarData class parameters not expected to change after initialization. It uses the rememberFioriCalendarState function to remember the class parameters and does not trigger recomposition even if they are changed later.
Column(
horizontalAlignment = Alignment.CenterHorizontally
) {
val calendarState = rememberFioriCalendarState(
data = FioriCalendarData(
viewType = ViewType.MONTH,
startingDay = StartingDay.MONDAY,
showMonthViewInLandscapeMode = true,
isSelectionPersistent = true,
headerData = HeaderData(title = "Non-Recomposable Fiori Calendar")
)
)
FioriCalendar(
state = calendarState
)
}
Fiori Calendar With Fiori Calendar Data Class Parameters Updated After Initialization (Recomposition)¶
This code snippet demonstrates how to initialize the FioriCalendar composable function when the FioriCalendarData class parameters are expected to change after initialization. It uses the FioriCalendarState class directly, since changing any parameter of the FioriCalendarData class will trigger recomposition and update the Fiori Calendar with the new values. In the following code, clicking on the Change to Week View or the Change to Month View buttons will update the viewType variable passed to the viewType parameter of the FioriCalendarState class and trigger recomposition and render the Fiori Calendar again with the new value. Similar behavior can achieved for all the parameters of the FioriCalendarData class except for the initialVisibleDate and the initialSelectedDate parameters. Updating these two parameters will not trigger recomposition. In order to update the visible date and the selected date, use the fioriCalendarNavigateToDate() function and the fioriCalendarUpdateSelectedDate() function, respectively.
Column(
horizontalAlignment = Alignment.CenterHorizontally
) {
var viewType by rememberSaveable { mutableStateOf(ViewType.WEEK) }
val calendarState = FioriCalendarState(
data = FioriCalendarData(
viewType = viewType,
startingDay = StartingDay.MONDAY,
showMonthViewInLandscapeMode = true,
isSelectionPersistent = true,
headerData = HeaderData(title = "Recomposable Fiori Calendar")
)
)
val scope = rememberCoroutineScope()
FioriCalendar(
state = calendarState
)
Row {
FioriTextButton(
buttonContent = FioriButtonContent(title = "Change to Week View"),
onClick = { scope.launch { viewType = ViewType.WEEK } }
)
Spacer(modifier = Modifier.width(8.dp))
FioriTextButton(
buttonContent = FioriButtonContent(title = "Change to Month View"),
onClick = { scope.launch { viewType = ViewType.MONTH } }
)
}
}
Selected Date Changed Callback¶
This code snippet demonstrates how the onDateSelectionChanged parameter of the FioriCalendar composable function can be used to get notified when the application user selects a date by tapping on it.
val scope = rememberCoroutineScope()
val snackbarHostState = remember { SnackbarHostState() }
Scaffold(
snackbarHost = { SnackbarHost(snackbarHostState) },
content = {
Column(
horizontalAlignment = Alignment.CenterHorizontally
) {
val formatter = SimpleDateFormat("dd MMMM yyyy", getCurrentLocale())
val onSelectionChanged: (Date) -> Unit = {
val date = formatter.format(it)
scope.launch {
snackbarHostState.showSnackbar("$date selected")
}
}
FioriCalendar(
onDateSelectionChanged = onSelectionChanged,
)
}
}
)
Week Or Month Changed Callback¶
This code snippet demonstrates how the onWeekOrMonthChanged parameter of the FioriCalendar composable function can be used to get notified when the application user changes the currently visible week or month either through swipe actions, by tapping the navigation buttons in the header, or from any view that invokes the fioriCalendarNavigateToPreviousWeekOrMonth() and fioriCalendarNavigateToNextWeekOrMonth() functions.
val scope = rememberCoroutineScope()
val snackbarHostState = remember { SnackbarHostState() }
Scaffold(
snackbarHost = { SnackbarHost(snackbarHostState) },
content = {
Column(
horizontalAlignment = Alignment.CenterHorizontally
) {
val calendarState = rememberFioriCalendarState(
data = FioriCalendarData(
viewType = ViewType.MONTH
)
)
val onWeekOrMonthChanged: (Calendar) -> Unit = {
val month = it.getDisplayName(Calendar.MONTH, Calendar.LONG, getCurrentLocale())
scope.launch {
snackbarHostState.showSnackbar("Month changed to $month")
}
}
FioriCalendar(
state = calendarState,
onWeekOrMonthChanged = onWeekOrMonthChanged
)
}
}
)
Navigate To Previous And Next Week Or Month¶
This code snippet demonstrates how to use the fioriCalendarNavigateToPreviousWeekOrMonth() and fioriCalendarNavigateToNextWeekOrMonth() functions to navigate to the previous and next week or month. It replaces the default navigation buttons in the header with separate buttons below the Fiori Calendar that invoke those functions when they are clicked by the user.
Column(
horizontalAlignment = Alignment.CenterHorizontally
) {
val calendarState = rememberFioriCalendarState()
FioriCalendar(
headerActions = {
FioriCalendarNavigateToTodayButton(calendarState)
},
state = calendarState
)
Spacer(modifier = Modifier.height(16.dp))
Row {
FioriTextButton(
buttonContent = FioriButtonContent(title = "Navigate to Previous Week"),
onClick = { scope.launch { fioriCalendarNavigateToPreviousWeekOrMonth(calendarState) } }
)
Spacer(modifier = Modifier.width(8.dp))
FioriTextButton(
buttonContent = FioriButtonContent(title = "Navigate to Next Week"),
onClick = { scope.launch { fioriCalendarNavigateToNextWeekOrMonth(calendarState) } }
)
}
}
Navigate To Today¶
This code snippet demonstrates how to use the fioriCalendarNavigateToToday() function to navigate back to the week or month containing today's date. It replaces the default today button in the header with a separate button below the Fiori Calendar that invokes the function clicked by the user.
Column(
horizontalAlignment = Alignment.CenterHorizontally
) {
val calendarState = rememberFioriCalendarState()
val scope = rememberCoroutineScope()
FioriCalendar(
headerActions = {
FioriCalendarPreviousNextNavigationButtons(calendarState)
},
state = calendarState
)
Spacer(modifier = Modifier.height(16.dp))
FioriTextButton(
buttonContent = FioriButtonContent(title = "Go To Today"),
onClick = { scope.launch { fioriCalendarNavigateToToday(calendarState) } }
)
}
Navigate To Specific Date¶
This code snippet demonstrates how to use the fioriCalendarNavigateToDate() function to navigate to the week or month that a specific date belongs to. Note that when the isSelectionPersistent parameter of FioriCalendarData is false, this function does not select the specified date but will navigate to the week/month that date is in and select the date based on the same behavior observed when isSelectionPersistent parameter is false. In order to select it as well, call fioriCalendarUpdateSelectedDate() after this function, passing in the same date.
Column(
horizontalAlignment = Alignment.CenterHorizontally
) {
val locale = getCurrentLocale()
// getCalendar() implementation can be found in the Util.kt file for Fiori Calendar
val calendar = getCalendar(locale)
calendar.set(2022, 6, 4)
val calendarState = rememberFioriCalendarState()
val scope = rememberCoroutineScope()
FioriCalendar(
headerActions = {
FioriCalendarPreviousNextNavigationButtons(calendarState)
},
state = calendarState
)
Spacer(modifier = Modifier.height(16.dp))
FioriTextButton(
buttonContent = FioriButtonContent(title = "Go To Week/Month Of July 4 2022"),
onClick = { scope.launch { fioriCalendarNavigateToDate(calendarState, calendar.time) } }
)
}
Updating the Selected Date¶
This code snippet demonstrates how to use the fioriCalendarUpdateSelectedDate() function to update the selected date. If the selected date is beyond the startDate or endDate parameters of the FioriCalendarData class, the startDate or endDate is selected, respectively. Note that this does not navigate to the week or month the selected date belongs to. In order to do that, first call the fioriCalendarNavigateToDate() function passing the selected date and then call this function with the same date.
Column(
horizontalAlignment = Alignment.CenterHorizontally
) {
val locale = getCurrentLocale()
// getCalendar() implementation can be found in the Util.kt file for Fiori Calendar
val calendar = getCalendar(locale)
calendar.set(Calendar.DAY_OF_MONTH, 9)
val calendarState = rememberFioriCalendarState()
val scope = rememberCoroutineScope()
FioriCalendar(
state = calendarState
)
Spacer(modifier = Modifier.height(16.dp))
FioriTextButton(
buttonContent = FioriButtonContent(title = "Select 9th Of This Month"),
onClick = { scope.launch { fioriCalendarUpdateSelectedDate(calendarState, calendar.time) } }
)
}
Fiori Calendar Custom Header Actions¶
This code snippet demonstrates how to add a custom action to the header section of the Fiori Calendar. It hides the expandable drag handle and adds a button in the header to switch between the Week and Month views when Expandable view type is selected using the fioriCalendarSwitchExpandableViewType() function.
Column(
horizontalAlignment = Alignment.CenterHorizontally
) {
var iconResId by rememberSaveable { mutableIntStateOf(R.drawable.ic_sap_icon_expand) }
val updateIconResId: () -> Unit = {
iconResId = if (iconResId == R.drawable.ic_sap_icon_expand) {
R.drawable.ic_sap_icon_collapse
} else {
R.drawable.ic_sap_icon_expand
}
}
val calendarState = rememberFioriCalendarState(
data = FioriCalendarData(
showExpandableDragHandle = false
)
)
val scope = rememberCoroutineScope()
FioriCalendar(
headerActions = {
FioriStandardIconButton(
icon = FioriIcon(
iconType = IconType.RESOURCE,
resId = iconResId
),
onClick = {
scope.launch {
fioriCalendarSwitchExpandableViewType(calendarState)
updateIconResId()
}
}
)
FioriCalendarHeaderDefaultActions(calendarState)
},
state = calendarState
)
}
Fiori Calendar With Header As Screen App Bar¶
This code snippet demonstrates how to use the Fiori Calendar with its header as the screen's App Bar.
Scaffold(
content = {
Column(
modifier = Modifier
.padding(it)
.verticalScroll(rememberScrollState())
) {
val calendarState = rememberFioriCalendarState(
FioriCalendarData(
viewType == ViewType.MONTH,
headerData = HeaderData(
headerType = HeaderType.CENTER,
title = "Calendar App Bar",
useDateAsSubtitle = true
)
)
)
FioriCalendar(
headerNavigationIcon = {
FioriStandardIconButton(
icon = FioriIcon(
iconType = IconType.RESOURCE,
resId = R.drawable.ic_sap_icon_arrow_left
),
onClick = { navController.navigateUp() }
)
},
headerActions = {
FioriCalendarPreviousNextNavigationButtons(calendarState)
},
state = calendarState
)
}
}
)
Fiori Calendar Inside Navigation Drawer¶
This code snippet demonstrates how to use the Fiori Calendar inside a Navigation Drawer.
val scope = rememberCoroutineScope()
var viewType by rememberSaveable { mutableStateOf(ViewType.WEEK) }
val showMonthView = getWindowSizeHeight() != WindowHeightSizeClass.Compact
val scrollState = rememberScrollState()
val drawerState = rememberDrawerState(DrawerValue.Closed)
val navigationItems = mutableListOf(
FioriDrawerItemData(
type = DrawerItemType.DestinationButton,
destination = FioriNavigationItemData(
selectedIcon = FioriIcon(
iconType = IconType.RESOURCE,
resId = R.drawable.ic_sap_icon_horizontal_grip,
contentDescription = "Week View"
),
unselectedIcon = FioriIcon(
iconType = IconType.RESOURCE,
resId = R.drawable.ic_sap_icon_horizontal_grip,
contentDescription = "Week View"
),
label = "Week View",
onClick = {
viewType = ViewType.WEEK
scope.launch {
drawerState.close()
}
},
selected = viewType == ViewType.WEEK|| (!showMonthView && viewType != ViewType.EXPANDABLE)
)
),
FioriDrawerItemData(
type = DrawerItemType.DestinationButton,
destination = FioriNavigationItemData(
selectedIcon = FioriIcon(
iconType = IconType.RESOURCE,
resId = R.drawable.ic_sap_icon_grid,
contentDescription = "Month View"
),
unselectedIcon = FioriIcon(
iconType = IconType.RESOURCE,
resId = R.drawable.ic_sap_icon_grid,
contentDescription = "Month View"
),
label = "Month View",
onClick = {
viewType = ViewType.MONTH
scope.launch {
drawerState.close()
}
},
selected = viewType == ViewType.MONTH
)
),
FioriDrawerItemData(
type = DrawerItemType.DestinationButton,
destination = FioriNavigationItemData(
selectedIcon = FioriIcon(
iconType = IconType.RESOURCE,
resId = R.drawable.ic_sap_icon_expand,
contentDescription = "Expandable View"
),
unselectedIcon = FioriIcon(
iconType = IconType.RESOURCE,
resId = R.drawable.ic_sap_icon_expand,
contentDescription = "Expandable View"
),
label = "Expandable View",
onClick = {
viewType = ViewType.EXPANDABLE
scope.launch {
drawerState.close()
}
},
selected = viewType == ViewType.EXPANDABLE
)
)
)
if (!showMonthView) {
navigationItems.removeAt(1)
}
val navigationDrawerData = FioriDrawerData(
headline = "Fiori Calendar",
navigationItems = navigationItems
)
FioriModalNavigationDrawer(
scrollState = scrollState,
drawerState = drawerState,
drawerData = navigationDrawerData,
content = {
Scaffold(
topBar = {
TopAppBar(
title = {
Text(text = "Calendar Nav Drawer")
},
navigationIcon = {
IconButton(onClick = {
if (drawerState.isClosed) {
scope.launch {
drawerState.open()
}
} else {
scope.launch {
drawerState.close()
}
}
}) {
Icon(
imageVector = Icons.Default.Menu,
contentDescription = "Toggle Drawer"
)
}
}
)
},
content = {
Column(modifier = Modifier
.padding(it)) {
FioriCalendar(
state = FioriCalendarState(
FioriCalendarData(
viewType = viewType
)
)
)
}
}
)
}
)
Fiori Calendar With Custom Colors And Text Styles¶
This code demonstrates how to customize the colors and text styles of the Fiori Calendar.
Column(
horizontalAlignment = Alignment.CenterHorizontally
) {
val calendarState = rememberFioriCalendarState(
data = FioriCalendarData(
viewType == ViewType.MONTH
)
)
FioriCalendar(
state = calendarState,
colors = FioriCalendarDefaults.colors(
headerContainerColor = MaterialTheme.fioriHorizonAttributes.SapFioriColorSemanticInformativeBackground,
dateLayoutBackgroundColor = MaterialTheme.fioriHorizonAttributes.SapFioriColorAccentBackground9,
buttonContainerColor = MaterialTheme.fioriHorizonAttributes.SapFioriColorSemanticInformativeBackground,
buttonContentColor = MaterialTheme.fioriHorizonAttributes.SapFioriColorT4,
dateLabelTextColor = MaterialTheme.fioriHorizonAttributes.SapFioriColorT7,
weekLabelTextColor = MaterialTheme.fioriHorizonAttributes.SapFioriColorT3,
dateLabelSelectedColor = MaterialTheme.fioriHorizonAttributes.SapFioriColorAccent4,
dateLabelSelectedStrokeColor = MaterialTheme.fioriHorizonAttributes.SapFioriColorAccent4,
dateLabelTodayTextColor = MaterialTheme.fioriHorizonAttributes.SapFioriColorT7,
dateLabelPrevTextColor = MaterialTheme.fioriHorizonAttributes.SapFioriColorBorderDefault
),
textStyles = FioriCalendarDefaults.textStyles(
weekLabelTextStyle = FioriCalendarDefaults.textStyles().weekLabelTextStyle().copy(
fontWeight = FontWeight.Bold
)
)
)
}
Fiori Calendar With Separate Header¶
This code demonstrates how the Fiori Calendar header can be displayed separately from the Fiori Calendar component. This is accomplished by setting the enabled parameter of the HeaderData class to false and using the FioriCalendarHeader composable function along with the FioriCalendar composable function. The code below also adds a custom view between the header and the calendar body.
Column(
horizontalAlignment = Alignment.CenterHorizontally
) {
val calendarState = rememberFioriCalendarState(
FioriCalendarData(
headerData = HeaderData(enabled = false)
)
)
val locale = getCurrentLocale()
var visibleMonth by rememberSaveable {
// getCalendar() implementation can be found in the Util.kt file for Fiori Calendar
mutableStateOf(getCalendar(locale).getDisplayName(Calendar.MONTH, Calendar.LONG, locale))
}
val sdf = SimpleDateFormat("yyyy", locale)
var visibleYear by rememberSaveable {
mutableStateOf(sdf.format(getCalendar(locale).time))
}
val onWeekOrMonthChanged: (Calendar) -> Unit = { cal ->
visibleMonth = cal.getDisplayName(Calendar.MONTH, Calendar.LONG, locale)
visibleYear = sdf.format(cal.time)
}
val formatter = SimpleDateFormat("dd MMMM yyyy", getCurrentLocale())
val onSelectionChanged: (Date) -> Unit = { selectedDate ->
val selectedCalendar = getCalendar(locale)
selectedCalendar.time = selectedDate
visibleMonth = selectedCalendar.getDisplayName(Calendar.MONTH, Calendar.LONG, locale)
visibleYear = sdf.format(selectedCalendar.time)
}
FioriCalendarHeader(
state = calendarState,
title = "$visibleMonth $visibleYear",
actions = {
FioriCalendarPreviousNextNavigationButtons(calendarState)
}
)
Row(modifier = Modifier.fillMaxWidth()) {
FioriTextButton(
buttonContent = FioriButtonContent(
title = "Back to Today",
icon = FioriIcon(R.drawable.ic_sap_icon_sys_back),
displayIconAtStart = true
),
onClick = {
scope.launch {
fioriCalendarNavigateToToday(state = calendarState)
}
}
)
Spacer(modifier = Modifier.weight(1f))
FioriTextButton(
buttonContent = FioriButtonContent(
title = "Add Notes",
icon = FioriIcon(R.drawable.ic_sap_icon_add_coursebook),
displayIconAtStart = true
),
onClick = {
scope.launch {
snackbarHostState.showSnackbar("Add your notes")
}
}
)
}
FioriCalendar(
onWeekOrMonthChanged = onWeekOrMonthChanged,
onSelectionChanged = onSelectionChanged,
state = calendarState
)
}
Fiori Calendar With Disabled Dates¶
This code snippet shows how to disable specific dates in the Fiori Calendar.
val disabledDates = ArrayList<Date>()
// getCalendar() implementation can be found in the Util.kt file for Fiori Calendar
val cal = getCalendar(getCurrentLocale())
cal.set(cal.get(Calendar.YEAR), cal.get(Calendar.MONTH), 3)
disabledDates.add(cal.time)
cal.set(cal.get(Calendar.YEAR), cal.get(Calendar.MONTH), 10)
disabledDates.add(cal.time)
cal.set(cal.get(Calendar.YEAR), cal.get(Calendar.MONTH), 15)
disabledDates.add(cal.time)
cal.set(cal.get(Calendar.YEAR), cal.get(Calendar.MONTH), 21)
disabledDates.add(cal.time)
cal.set(cal.get(Calendar.YEAR), cal.get(Calendar.MONTH), 27)
disabledDates.add(cal.time)
val isDateDisabled: (Date) -> Boolean = {
var isDisabled = false
val currentCal = getCalendar(getCurrentLocale(), CalendarType.GREGORIAN)
currentCal.time = it
val disabledCal = getCalendar(getCurrentLocale(), CalendarType.GREGORIAN)
for (date in disabledDates) {
disabledCal.time = date
if (isSameDate(currentCal, disabledCal)) {
isDisabled = true
}
}
isDisabled
}
val isDateDisabled2: (Date) -> Boolean = {
val currentCal = getCalendar(getCurrentLocale(), CalendarType.GREGORIAN)
currentCal.time = it
currentCal.get(Calendar.DAY_OF_WEEK) == Calendar.FRIDAY
}
Column(
horizontalAlignment = Alignment.CenterHorizontally
) {
// Fiori Calendar with disabled dates on the 3rd, 10th, 15th, 21st, and 27th of the current month
FioriCalendar(
state = FioriCalendarState(
data = FioriCalendarData(
isDateDisabled = isDateDisabled
)
)
)
// Fiori Calendar with disabled dates on Fridays
FioriCalendar(
state = FioriCalendarState(
data = FioriCalendarData(
isDateDisabled = isDateDisabled2
)
)
)
}