如何将 FSCalendar 数据从 UIKIT 传递到 SwiftUI

Question

我是一名设计师，并尝试开发一个待办事项列表应用程序。 在应用程序中，用户在日历中选择一天，它将显示所选日期的待办事项列表。 但是我如何将选定的日期从 FSCalendar(UIKIT) 传递到待办事项列表(SwiftUI)？

非常感谢！

我在 github 中的应用演示： https://github.com/ElvishR/FSCalendar-To-Do-List-Test.git

内容视图：

import SwiftUI
import Foundation

class UserData: ObservableObject{
    @Published var name = "Helsdfsflo"
}


struct ContentView: View {
    @ObservedObject var userData = UserData()
    var body: some View {
        
        Text(userData.name)
        Button(action:{
            print(self.userData.name)
        }){
            Text(" click to show the selected date")
        }
        CalendarModuleView()
            .frame(width: .infinity, height: 300.0, alignment: .center)
    }
}

日历视图

import SwiftUI
import FSCalendar

class CalendarModule: UIViewController, FSCalendarDelegate {
    
    var calendar = FSCalendar()
    var formatter = DateFormatter()
    var SelectedDate = ""
    
    let integration = UserData()
    


    fileprivate lazy var dateFormatter: DateFormatter = {
        let formatter = DateFormatter()
        formatter.dateFormat = "yyyy/MM/dd"
        return formatter
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        calendar.delegate = self
    }
    
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        initCalendar()
        view.addSubview(calendar)
    }
    
    private func initCalendar() {
        calendar.frame = CGRect(x: 0, y: 0, width: view.frame.size.width, height: 300.0)
        calendar.appearance.todayColor = UIColor.systemGreen   
        calendar.appearance.selectionColor = UIColor.systemBlue
    }
    
    //selected day
        func calendar(_ calendar: FSCalendar, didSelect date: Date, at monthPosition: FSCalendarMonthPosition){
       // Do the same inside this function and you should be fine
        formatter.dateFormat = "yyyy-MM-dd"
        SelectedDate = formatter.string(from: date)
        ContentView().userData.name = formatter.string(from: date)
        print(ContentView().userData.name)
        print("calendar did select date \(self.formatter.string(from: date))")
        
      
    }
    
    func calendar(calendar: FSCalendar!, didSelectDate date: NSDate!) {
        formatter.dateFormat = "yyyy-MM-dd"
        SelectedDate = formatter.string(from: date as Date)
        print("(self.formatter.string(from: date))")
    }
   
}

APP截图 enter image description here

Answer 1

使用UIViewRepresentable 协议将 UIView 类与 SwiftUI 绑定。 这是一个演示：

struct CalendarModuleView: UIViewRepresentable {
    
    @Binding var selectedDate: Date?
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    func makeUIView(context: Context) -> FSCalendar {
        let calendar = FSCalendar()
        calendar.delegate = context.coordinator
        calendar.appearance.todayColor = UIColor.systemGreen
        calendar.appearance.selectionColor = UIColor.systemBlue
        return calendar
    }
    
    func updateUIView(_ uiView: FSCalendar, context: Context) {
        
    }
    
    class Coordinator: NSObject, FSCalendarDelegate {
        
        var parent: CalendarModuleView
        
        init(_ calender: CalendarModuleView) {
            self.parent = calender
        }
        
        func calendar(_ calendar: FSCalendar, didSelect date: Date, at monthPosition: FSCalendarMonthPosition) {
            self.parent.selectedDate = date
        }
    }
}

您的内容视图

class UserData: ObservableObject{
    @Published var name = "Helsdfsflo"
    @Published var date: Date?
}


struct ContentView: View {
    
    @ObservedObject private var userData = UserData()
    
    static let taskDateFormat: DateFormatter = {
        let formatter = DateFormatter()
        formatter.dateFormat = "yyyy-MM-dd"
        return formatter
    }()
    
    var body: some View {
        
        Text(userData.name)
        if userData.date != nil {
            Text("Task due date: \(userData.date!, formatter: Self.taskDateFormat)")
        }
        
        Button(action:{
            print(self.userData.name)
        }){
            Text(" click to show the selected date")
        }
        CalendarModuleView(selectedDate: $userData.date)
            .frame(height: 300.0, alignment: .center)
    }
}