Bixby Developer Center

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.

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 master on GitHub

You can run the sample capsule in the Simulator to see how this component displays on different devices, if supported.

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 master on GitHub