Bixby Developer Center

Guides
References

calendar

optional

Generates a full-screen view of an interactive component that lets users select a date or a range of dates from a calendar.

Each calendar view is per month and you can scroll between months, depending on the range of allowed dates for the user to choose from.

Note

In order to use this component, you must have viv.time imported in your capsule.

Examples

input-view {
match: viv.core.BaseDateInterval (timeOff) {
to-input: RequestPTO (action)
}

message (When do you want to take PTO?)

render {
calendar {
initial-value (now().date) // today is the default, so this isn't required
allow-range (true) // support date-intervals
restrictions {
block-past-dates (true) // block selection of days before today
}
}
}
}

View on GitHub

Here is how calendar appears on different devices:

MobileWatchTV (Expanded View)Fridge
Single date selected:
calendar
Date range selected:
calendar
Watch does not support this componentSingle date selected:
calendar
Date range selected:
calendar
Single date selected:
calendar
Date range selected:
calendar
Note

The look and feel of this Views component might differ between devices, specifically with respect to spacing. Mobile, tablet, and fridge devices are similar in design, for example, but have varying resolution and spacing specifications.

Additionally, due to screen limitations on some devices, this component might not render and the user interaction is a voice-only experience.

Usage

The following example renders a calendar that lets a user choose a DepartureDate:

input-view {
match: DepartureDate (this)
render {
calendar {
restrictions {
block-past-dates (true)
}
}
}
}

The following example renders an input-view for a user to choose a range of dates for timeOff, which is of type BaseDateInterval:

input-view {
match: viv.core.BaseDateInterval (timeOff) {
to-input: RequestPTO (action)
}

message (When do you want to take PTO?)

render {
calendar {
initial-value (now().date) // today is the default, so this isn't required
allow-range (true) // support date-intervals
restrictions {
block-past-dates (true) // block selection of days before today
}
}
}
}

View on GitHub

Child Keys

allow-range
optional
Boolean
initial-value
optional
Sets the date or dates initially selected in the calendar component
restrictions
optional
Restricts the selectable values in the input-view
submit-button
optional
Enables you to customize the text of the submit button for certain components
type
optional
Changes the default from BaseDate to chosen type in the Calendar component