Calendar SwiftUI - admiral-team/admiralui-ios GitHub Wiki
Struct
The component that let users select a date, or a range of dates
Declaration
public struct CalendarView: View
Live example
Overview
Use a calendar view to show users specific dates that have additional information (for example, scheduled events) using decorations that you customize. You can also use a calendar view for users to select one specific date, multiple dates, or no date. Calendar can be two types: vertical and horizontal. Vertical calendar contains month views and it scrollable vertical. Horizontal calendar is complex element, which contains header, week view and month view. Header contains arrows buttons for switching months and button with year for changing year.
Configure a vertical calendar view
For configuration vertical calendar view need set type vertical in constructor, also set CalendarDataSource and CalendarDelegate delegates and after call method reload data.
CalendarView(
type: .vertical,
startDate: startDate,
endDate: endDate,
selectedStartDate: $selectedStartDate,
selectedEndDate: $selectedEndDate,
monthYearDate: Date(),
notActiveAfterDate: Date()
)
.onChange(of: selectedStartDate, perform: { (_) in })
.onChange(of: selectedEndDate, perform: { (_) in })
After you must implementation two property from protocol CalendarDataSource.
var startDate: Date = {
let formatter = DateFormatter()
formatter.dateFormat = "yyyy MM dd"
formatter.timeZone = TimeZone(identifier: "UTC")
let date = formatter.date(from: "2020 12 01") !! fatalError("Invalid date")
return date
}()
var endDate: Date = Date()
If you want set point by bottom in number of month, you need use property pointDates.
CalendarView(
notActiveAfterDate: Date(),
pointDates: [Date()]
)
If you want to set from what date to make inactive dates, then use property notActiveAfterDate. For example, you want that user can't select date in future.
CalendarView(
notActiveAfterDate: Date(),
)
Configure a horizontal calendar view
For configuration horizontal calendar view need set type horizontal in constructor, also set CalendarDataSource and CalendarDelegate delegates and after call method reload data.
CalendarView(
type: .horizontal,
startDate: startDate,
endDate: endDate,
monthYearDate: Date(),
notActiveAfterDate: Date(),
pointDates: [Date()]
)
Horizontal calendar view setting the same as vertical calendar.
Handle date selection
CalendarView(
selectedStartDate: $selectedStartDate,
selectedEndDate: $selectedEndDate,
)
Contribution
You can help us to find bugs or ask us to add features.
- To start
issue
please use ready-made templates. - To make changes to the repository, you need to create a
fork
of the project, make changes to the code and create apull request
in our project. You can read more about this in the Github documentation.