![見出し画像](https://assets.st-note.com/production/uploads/images/81902200/rectangle_large_type_2_9899db82be580e935b198a04c37201d6.png?width=800)
New SwiftUI - WWDC22- MultiDatePicker
ドキュメントにある以下コードを実行してみます。(Xcode beta版で実行)
struct ContentView: View {
@State private var dates: Set<DateComponents> = []
var body: some View {
MultiDatePicker("Dates Available", selection: $dates)
}
}
![](https://assets.st-note.com/img/1656813543881-QmmIzJ1wmG.png)
これだけでカレンダーが表示されます。
あとはカスタマイズをしていきます。
MultiDatePicker("Dates Available", selection: $dates ,in: .now...)
.frame(height:200)
として表示してみると
![](https://assets.st-note.com/img/1656883316585-Mj7emHr38a.png)
7/4のスクリーンショットですが4日以前は色が薄くなっています。そして"frame"の設定で表示部分をコンパクトにできます。
あとは指定の日をクリックしてその日を取得します。
@Environment(.calendar) var calender
変数宣言して計算プロパティで日付を取得します。
var summary:String{
dates.compactMap{compornents in
calender.date(from:compornents)?.formatted(date:.long,time:.omitted)
}.formatted()
}
あとはVStackでカレンダーと縦に並べて表示させます。
VStack{
MultiDatePicker("Dates Available", selection: $dates,in: .now...)
.frame(height:400)
Text(summary)
}
実行すると
![](https://assets.st-note.com/img/1657106555343-sbXYbXzOmX.png)
日にちをタップすると下にその日付データが表示されます。
この記事が気に入ったらサポートをしてみませんか?