1.曜日を表示する

まずは、核となる部分に入る前のウォーミングアップということでカレンダーの一番上にある曜日を表示してみましょう。

weekday.swift

// 曜日は日本表記でなく英語表記でもOK
let dayofweek = ["日","月","火","水","木","金","土"]
var body: some View {
    VStack {
        HStack {
            ForEach(0..<self.dayofweek.count){ index in
                ZStack {
                    RoundedRectangle(cornerRadius:5).frame(width:40,height:40)
                        .foregroundColor(Color.clear)
                    Text(dayofweek[index]) // ここで曜日を表示
                        .font(.system(size:10))
                }
            }
        }
    }
}

VStackやHStack等の説明は今回は皆さん知っているという前提で省略します。

このコードを書き込むとこうなります。綺麗に曜日が一列で表示できましたね。

2.日付を取得する

カレンダーを表示することにおいて最も重要な日付を取得しましょう。今回のカレンダーは開いたら現在の日付を取得して取得した日付のカレンダーを表示する使用です。

AppDelegate.swift

class AppDelegate: UIResponder, UIApplicationDelegate {
    // 現在の日付から年のみを取得
    let year : Int = Calendar.current.component(.year, from: Date())
    // 月のみを取得
    let month : Int = Calendar.current.component(.month, from: Date())
}
// 日は今回使用しないため取得していません。使用する方は取得しましょう！
@State var year : Int = AppDelegate().year
@State var month : Int = AppDelegate().month
let dayofweek = ["日","月","火","水","木","金","土"]
var body: some View {
    VStack {
    Text("\(self.month) \(String(self.year))")
        .font(.system(size: 20))
        HStack {
            ForEach(0..<self.dayofweek.count){ index in
                ZStack {
                    RoundedRectangle(cornerRadius: 5).frame(width:40,height:40)
                        .foregroundColor(Color.clear)
                    Text(dayofweek[index])
                        .font(.system(size:10))
                }
            }
        }
    }
}

1.のコードに追加をして、年と月を表示しましょう。

3.うるう年の判定をする

うるう年の判定もカレンダーを表示する上で重要なことです。判定のコードも短いのでサラッと紹介したいと思います。

leapYear.swift

func LeapYear(year:Int) -> Bool {
    let result =  (year % 400 == 0 || (year % 4 == 0 && year % 100 != 0 )) ? true : false
    return result
}

判定の部分は一行で書きたかったので、今回三項演算子を使用しています。switch文でも書けると思います。

戻り値は、trueがうるう年です。

4.日付から曜日を取得する

2.で取得した日付から当月1日の曜日を取得しましょう。1日目の曜日はカレンダーを表示する上で必要です。

使用するのは、ツェラーの公式という公式です。これは指定した日付が何曜日かを算出するというものです。従って当月1日を指定すれば自ずと曜日が分かります。

zeller.swift

func DayofWeekCalc(year:Int,month:Int,day:Int) -> Int{
    var result : Int = 0
    if month == 1 || month ==  2 { //monthが1,2の時は前年として計算をする
        var changeyear : Int = year
        var changemonth : Int = month
        changeyear -= 1
        changemonth += 12
        result  = (day + (26 * (changemonth + 1))/10 + changeyear + (changeyear / 4) + (5 * (changeyear / 100)) + ((changeyear / 100)/4) + 5) % 7 as Int
    }else{
        result  = (day + (26 * (month + 1))/10 + year + (year / 4) + (5 * (year / 100)) + ((year / 100)/4) + 5) % 7 as Int
    }  
    return result
}

ポイントは、1,2月は前年の続きとして計算することです。戻り値は0~6で、それぞれ日〜土の順になっています。

5.週数を取得する

続きまして、先ほど取得した当月の週数を取得します。週数は、4~6のいずれかとなっています。

week.swift

func GetWeekNumber(year:Int,month:Int) -> Int {
    var result : Int = 0
    if CaseFourWeek(year: year, month: month){
        result = 4
    }else if CaseSixWeek(year: year, month: month){
        result = 6
    }else{
        result = 5
    }
    return result
}

週数4の場合

week.swift

private func CaseFourWeek(year:Int,month:Int) -> Bool {
    let firstdayofweek = DayofWeekCalc(year: year, month: month, day: 1)
    let result = (!LeapYear(year: year) && month == 2 && (firstdayofweek == 0)) ? true : false
    return result
}

週数6の場合

week.swift

private func CaseSixWeek(year:Int,month:Int) -> Bool{
     let firstdayofweek = DayofWeekCalc(year: year, month: month, day: 1)
     let days = DayNumber(year: year, month: month)
     let result = ((firstdayofweek == 6 && days == 30) || (firstdayofweek >= 5 && days == 31)) ? true : false
     return result
}

週数4でも6でもない場合は、週数5と決まるので判定はありません。

6.日数を取得する

最後に取得するのは、当月の日数です。日数に関しては詳しい説明は要らないと思いますので、早速コードをご覧ください。

currentMonth.swift

func DayNumber(year:Int,month:Int) -> Int{
    var result : Int = 0
        
    switch month {
    case 1,3,5,7,8,10,12:
        result = 31
    case 4,6,9,11:
        result = 30
    case 2:
        if LeapYear(year: year){
            result = 29
        }else{
            result = 28
        }
    default: break
    }   
    return result
}

7.実際にカレンダーを表示する

カレンダー表示に必要なパーツは揃ったので、そろそろ表示をしていきます。表示方法は多数あると思いますが、今回紹介するのはほんの一例です。

CalendarView

CalendarView

calendarView.swift

struct CalendarView: View {
    @State var year : Int = AppDelegate().year
    @State var month : Int = AppDelegate().month
    let dayofweek = ["日","月","火","水","木","金","土"]
    var body: some View {
        ZStack{
            VStack {
                Text("\(self.month) \(String(self.year))")
                    .font(.system(size: 20))
                Spacer().frame(height:50)
                
                HStack {
                    ForEach(0..<self.dayofweek.count){ index in
                        ZStack {
                            RoundedRectangle(cornerRadius: 5).frame(width:40,height:40)
                                .foregroundColor(Color.clear)
                            Text(dayofweek[index])
                                .font(.system(size:10))
                        }
                    }
                }
                Spacer()
                // カレンダーの月を進める・戻るボタン
                HStack {
                    Button(action: {
                        self.LastMonth()
                    }, label: {
                        Text("Back")
                    })
                    Button(action: {
                        self.NextMonth()
                    }, label: {
                        Text("Next")
                    })
                }
            }
            VStack {
                Spacer().frame(height:115)
                CalendarList(year: $year, month: $month, 
week: CalendarModel().GetWeekNumber(year: self.year, month: self.month), 
start: CalendarModel().DayofWeekCalc(year: self.year, month: self.month, day: 1), days: CalendarModel().DayNumber(year: self.year, month: self.month))
                Spacer()
            }
        }
    }
    func NextMonth(){
        if self.month != 12{
            self.month += 1
        }else if self.month == 12{
            self.year += 1
            self.month = 1
        }
    }
        
    func LastMonth(){
        if self.month != 1{
            self.month -= 1
        }else if self.month == 1{
            self.year -= 1
            self.month = 12
        }
    }
}

実際にカレンダーの中を表示しているのは下記のCalendarListです。

CalendarList

CalendarList

struct CalendarList: View {
    @Binding var year : Int
    @Binding var month : Int
    var startdaynumber : Int
    var weeknumber : Int
    var days : Int
    var middleweek : Int
    var lastweeknumber : Int
    let column = 7
    
    init(year:Binding<Int>,month:Binding<Int>,week:Int,start:Int,days:Int){
        self._year = year
        self._month = month
        self.weeknumber = week
        self.startdaynumber = start
        self.days = days
        self.middleweek = (days - (7 - start)) / 7
        self.lastweeknumber = (days - (7 - start)) % 7
    }
    var body: some View {
        // 1週
        VStack {
            HStack {
                if self.startdaynumber != 0{
                    ForEach(0..<self.startdaynumber,id:\.self){ index in
                        ZStack{
                            RoundedRectangle(cornerRadius: 5).frame(width:40,height:40)
                                .foregroundColor(Color.clear)
                            Text("")
                                .font(.system(size: 20))
                                .foregroundColor(.black)
                        }
                    }
                }
                ForEach(0..<(self.column-self.startdaynumber),id:\.self){ index in
                    ZStack{
                        RoundedRectangle(cornerRadius: 5).frame(width:40,height:40)
                            .foregroundColor(Color.clear)
                        Text("\(index+1)")
                            .font(.system(size: 20))
                            .foregroundColor(.black)
                    }
                }
            }
            // 2週
            HStack{
                ForEach(0..<self.column,id:\.self){ index in
                    ZStack{
                        RoundedRectangle(cornerRadius: 5).frame(width:40,height:40)
                            .foregroundColor(Color.clear)
                        Text("\((self.column-self.startdaynumber)+1+index)")
                            .font(.system(size: 20))
                            .foregroundColor(.black)
                    }
                }
            }
            
            // 3週
            HStack{
                ForEach(0..<self.column,id:\.self){ index in
                    ZStack{
                        RoundedRectangle(cornerRadius: 5).frame(width:40,height:40)
                            .foregroundColor(Color.clear)
                        Text("\(((7-self.startdaynumber)+1+index)+7)")
                            .font(.system(size: 20))
                            .foregroundColor(.black)
                    }
                }
            }
            
            // 4,5,6週
            if self.weeknumber == 4{
                
                HStack{
                    if self.lastweeknumber != 0{
                        ForEach(0..<self.lastweeknumber,id:\.self){ index in
                            ZStack{
                                RoundedRectangle(cornerRadius: 5).frame(width:40,height:40)
                                    .foregroundColor(Color.clear)
                                Text("\(((7-self.startdaynumber)+1+index)+14)")
                                    .font(.system(size: 20))
                                    .foregroundColor(.black)
                            }
                        }
                    }else{
                        ForEach(0..<7,id:\.self){ index in
                            ZStack{
                                RoundedRectangle(cornerRadius: 5).frame(width:40,height:40)
                                    .foregroundColor(Color.clear)
                                Text("\(((7-self.startdaynumber)+1+index)+14)")
                                    .font(.system(size: 20))
                                    .foregroundColor(.black)
                            }
                        }
                    }
                }
            }else if self.weeknumber == 5{
                HStack{
                    ForEach(0..<self.column,id:\.self){ index in
                        ZStack{
                            RoundedRectangle(cornerRadius: 5).frame(width:40,height:40)
                                .foregroundColor(Color.clear)
                            Text("\(((7-self.startdaynumber)+1+index)+14)")
                                .font(.system(size: 20))
                                .foregroundColor(.black)
                        }
                    }
                }
                HStack{
                    if self.lastweeknumber != 0{
                        ForEach(0..<self.lastweeknumber,id:\.self){ index in
                            ZStack{
                                RoundedRectangle(cornerRadius: 5).frame(width:40,height:40)
                                    .foregroundColor(Color.clear)
                                Text("\(((7-self.startdaynumber)+1+index)+21)")
                                    .font(.system(size: 20))
                                    .foregroundColor(.black)
                            }
                        }
                        
                        ForEach(0..<(7-self.lastweeknumber),id:\.self){ index in
                            ZStack{
                                RoundedRectangle(cornerRadius: 5).frame(width:40,height:40)
                                    .foregroundColor(Color.clear)
                                Text("")
                                    .font(.system(size: 20))
                                    .foregroundColor(.black)
                          
                            }
                        }
                    }else{
                        ForEach(0..<7,id:\.self){ index in
                            ZStack{
                                RoundedRectangle(cornerRadius: 5).frame(width:40,height:40)
                                    .foregroundColor(Color.clear)
                                Text("\(((7-self.startdaynumber)+1+index)+21)")
                                    .font(.system(size: 20))
                                    .foregroundColor(.black)
                            }
                        }
                    }
                    
                }
            }else if self.weeknumber == 6{
                HStack{
                    ForEach(0..<self.column,id:\.self){ index in
                        ZStack{
                            RoundedRectangle(cornerRadius: 5).frame(width:40,height:40)
                                .foregroundColor(Color.clear)
                            Text("\(((7-self.startdaynumber)+1+index)+14)")
                                .font(.system(size: 20))
                                .foregroundColor(.black)
                        }
                    }
                }
                HStack{
                    ForEach(0..<self.column,id:\.self){ index in
                        ZStack{
                            RoundedRectangle(cornerRadius: 5).frame(width:40,height:40)
                                .foregroundColor(Color.clear)
                            Text("\(((7-self.startdaynumber)+1+index)+21)")
                                .font(.system(size: 20))
                                .foregroundColor(.black)
                        }
                    }
                }
                HStack{
                    if self.lastweeknumber != 0{
                        ForEach(0..<self.lastweeknumber,id:\.self){ index in
                            ZStack{
                                RoundedRectangle(cornerRadius: 5).frame(width:40,height:40)
                                    .foregroundColor(Color.clear)
                                Text("\(((7-self.startdaynumber)+1+index)+28)")
                                    .font(.system(size: 20))
                                    .foregroundColor(.black)
                            }
                        }
                        if self.lastweeknumber != 0{
                            ForEach(0..<(7-self.lastweeknumber),id:\.self){ index in
                                ZStack{
                                    RoundedRectangle(cornerRadius: 5).frame(width:40,height:40)
                                        .foregroundColor(Color.clear)
                                    Text("")
                                        .font(.system(size: 20))
                                        .foregroundColor(.black)
                                }
                            }
                        }
                    }else{
                        ForEach(0..<self.lastweeknumber,id:\.self){ index in
                            ZStack{
                                RoundedRectangle(cornerRadius: 5).frame(width:40,height:40)
                                    .foregroundColor(Color.clear)
                                Text("\(((7-self.startdaynumber)+1+index)+28)")
                                    .font(.system(size: 20))
                                    .foregroundColor(.black)
                            }
                        }
                    }
                }
            }
        }
    }
}

以上で完成です！
長々と拙いソースをご覧頂きありがとうございました。
至らない部分が多いと思いますが、温かい目で見ていただけると幸いです。