Skip to main content
All CollectionsOnboarding.Online FAQAll screen types customization
Screen: Title/Subtitle/Calendar
Screen: Title/Subtitle/Calendar

Study the layout and functions of the screen containing the calendar

L
Written by Leanid Yuryeu
Updated over 11 months ago

Screen identification in the theme template

The distinctive visual feature of this screen in the range of screens in the theme template is the presence of the calendar.

The default design of the Title/Subtitle/Calendar screen contains the following parameters:

  1. Title and Subtitle

  2. Switched off Header

  3. Calendar presence

  4. Calender depicts 3 months in the screen only: previous, current, and future.

  5. No tables with a selection

  6. No colored icons

List of parameters presented in Screen: Title/Subtitle/Calendar

  • Background

  • Basic Configuration

  • Navigation Bar/Header

  • Title

  • Subtitle

  • Calendar

  • Footer Button

📢 Please note that all parameters can be customized and switched off or on depending on your app design.

Here, you may see where these parameters are displayed in the screen precisely.


Screen peculiarities and functions

1. Navigation bar, or Header parameter display with Calendar

By default, the Navigation Bar, or Header, is not displayed in the screen; however, it can be easily switched on or off by checking/unchecking the boxes at your discretion. It consists of 3 parameters to be customized:

  1. Back Button

  2. Page indicator

  3. Skip Button

These buttons can be entitled differently, if required, in the corresponding field. Moreover, each parameter contains its own customization tools.

2. Title/Subtitle parameters display with Calendar

To save some space in the screen, you may also work with the text lines by removing Title or Subtitle parameters or even both. To remove those parameters, the text itself should be deleted in the corresponding parameter field below:

Please pay attention to how the screen design changes in such cases:

No Title
Subtitle

Title

No Subtitle

No Title

No Subtitle

3. Footer parameter display with Calendar

In the Footer parameter, you may either switch on the Button1 or/and Button2 button or switch them off (both or only one per your choice).

Footer Button

No Log in Button

Footer Button

Log in Button

No Footer Button

Log in Button

No Footer Button

No Log in Button

All the settings can be adjusted and customized in the Settings sign of the corresponding button field.

4. Screen Background display with Calendar

Before customizing the Calendar parameter itself, there are possibilities to install the required design for the whole screen.

Color Background

Image Background

Video Background

⚠️ The Background parameter does not merge or affect the Calendar background, as these are 2 separate settings for customization.

Calendar Functionality

⚠️ Please note The difference between calendar functionality on iOS SDK and web2app:

  • On iOS users can select only previous dates from the current day

  • On web2app users can select only the next dates started today

And there are some differences between settings options functionality on both platforms:

Background Color

⚠️ This feature works for both iOS and web2app

By default, the Calendar does not have a background color switched on, which means the Calendar background obtains the installed parameters of the screen background. However, the Calendar can be highlighted with its background color.

⚠️ Please note the Calendar Background can be changed only in color while no images or videos are available for that tool.

Please study the difference between the switched-off and switched-on backgrounds for the Calendar.

Screen Background: Image

Calendar Background: off

Screen Background: Image

Calendar Background: on

Header background color

⚠️ This feature works for both iOS and web2app

Like a Calendar background color, the header background color in the Calendar parameter is not switched on by default.

The Header background color includes the bar with the abbreviations of weekdays depicted on top of the Calendar.

Header background color: off

Header background color: on

Header label

⚠️ This feature works only for web2app

The Header Label tool in the Calendar parameter helps set the text font, its size, text alignment, and color (of text and of background either) for the weekdays only.

📢 Please note that if you need to customize the weekends in the calendar, you should work with the Header weekend label tool!

Header weekend label

⚠️ This feature works only for web2app

The same customization can be applied to the weekend days to set up the appropriate text font, size, text alignment, and color (of text and of background either).

📢 Please note that if you need to customize the weekdays in the calendar, you should work with the Header label tool!

Month label

⚠️ This feature works only for web2app

There is a possibility to install the required design for the months' field in the calendar screen by customizing the text font, size, text alignment, and color (of text and of background either).

📢 Please note the settings can be applied only to all months despite the current one since it requires the Current month label customization.

Current month label

⚠️ This feature works only for web2app

To highlight the current month in the calendar, please focus on the Current Month Label, where the settings of the text font, size, text alignment, and color (of text and of background either) for the current month are available.

📢 Please note this parameter customization is not applicable for the rest of the months in the calendar. 

Weekend label

⚠️ This feature works only for web2app

To differentiate the weekend dates from the weekday dates, you should install the settings for the weekend label where you set up the text font, size, text alignment, and color (of text and of background either).

Selected weekend label

⚠️ This feature works only for web2app

To customize the selected days of weekends, pay attention to the parameter the Selected weekend label, where you will find settings for the text font, size, text alignment, and color (of text and of background either). The unselected and selected checkboxes of weekend color design and their form are placed in a separate field and settings sign as depicted in the screenshot.

Past label

⚠️ This feature works on both iOS and Web2app with some differences:

For iOS: If you change the text color and checkbox type for the Past label - the text style and checkbox will be changed for each part day - including weekdays and weekend

For web2app: The separate customization for the previous month is possible in the Past label parameter of the calendar, where you can set up the weekday design only, not weekends.

Today label

⚠️ This feature works on both iOS and Web2app

The separate field for the current day of the calendar is embedded for customization, where you can design the same settings as in the previous calendar parameters: the text font, size, text alignment, and color (of text and of background either).

Today selected label

⚠️ This feature works on both iOS and Web2app

To customize the settings for the current selected label, set up the necessary settings in the Today selected label, where you can also specify the color and form of the selected/unselected checkbox.

Future label

⚠️ This feature works on both iOS and Web2app

To highlight the future weekdays only in the calendar, please focus on the parameter of the future label.

Future selected label

⚠️ This feature works on Web2app only

The future weekdays can also be customized in design in the Future selected label parameter where you can find all the same necessary settings.

Did this answer your question?