自定义日历视图

时间:2018-04-10 10:31:02

标签: ios swift uicollectionview calendarview

我想为我的应用开发自定义calendarView。我想我可以用这样的<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <RelativeLayout android:layout_width="match_parent" android:layout_height="40dp" android:background="@color/black" android:padding="5dp"> <ImageView android:id="@+id/toolbar_default_img_menu" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentStart="true" android:layout_alignParentLeft="true" android:layout_centerVertical="true" android:padding="5dp" android:src="@drawable/add_btn" /> <TextView android:id="@+id/toolbar_default_textview_title" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_toRightOf="@+id/toolbar_default_img_menu" android:layout_toLeftOf="@+id/toolbar_default_img_search" android:text="@string/app_name" android:textColor="@color/white" android:textSize="15sp" /> <ImageView android:id="@+id/toolbar_default_img_search" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_toLeftOf="@+id/toolbar_default_img_filter_tag" android:padding="5dp" android:src="@drawable/add_btn" /> <ImageView android:id="@+id/toolbar_default_img_filter_tag" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_toLeftOf="@+id/toolbar_default_img_filter" android:padding="5dp" android:src="@drawable/add_btn" /> <ImageView android:id="@+id/toolbar_default_img_filter" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentEnd="true" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:padding="5dp" android:src="@drawable/add_btn" /> </RelativeLayout> </RelativeLayout> 来做到这一点:
enter image description here

我试过这个简单的事情:

UICollectionView

通过这个我得到这样简单的Collection View:

enter image description here

现在我想知道如何根据日历安排工作日以及这需要什么样的数据源......

谢谢..

1 个答案:

答案 0 :(得分:1)

变量:

var weeks = 0
var items = [[Date]]()
lazy var dateFormatter: DateFormatter = {
    let formatter  = DateFormatter()
    formatter.dateFormat = "yyyy-MM-dd"
    return formatter
}()

设定日历的功能:

    func setCalendar() {
        let cal = Calendar.current
        let components = (cal as NSCalendar).components([.month, .day,.weekday,.year], from: date)
        let year =  components.year
        let month = components.month
        let months = dateFormatter.monthSymbols
        let monthSymbol = (months![month!-1])
        lblMonth.text = "\(monthSymbol) \(year!)"

        let weekRange = (cal as NSCalendar).range(of: .weekOfMonth, in: .month, for: date)
        let dateRange = (cal as NSCalendar).range(of: .day, in: .month, for: date)
        weeks = weekRange.length
        totalDaysInMonth = dateRange.length

        let totalMonthList = weeks * 7
        var dates = [Date]()
        var firstDate = dateFormatter.date(from: "\(year!)-\(month!)-1")!
        let componentsFromFirstDate = (cal as NSCalendar).components([.month, .day,.weekday,.year], from: firstDate)
        firstDate = (cal as NSCalendar).date(byAdding: [.day], value: -(componentsFromFirstDate.weekday!-1), to: firstDate, options: [])!

        for _ in 1 ... totalMonthList {
            dates.append(firstDate)
            firstDate = (cal as NSCalendar).date(byAdding: [.day], value: +1, to: firstDate, options: [])!
        }
        let maxCol = 7
        let maxRow = weeks
        items.removeAll(keepingCapacity: false)
        var i = 0
//        print("-----------\(monthSymbol) \(year!)------------")
        for _ in 0..<maxRow {
            var colItems = [Date]()
            for _ in 0..<maxCol {
                colItems.append(dates[i])
                i += 1
            }
//            print(colItems)
            items.append(colItems)
        }
//        print("---------------------------")
    }  

代表职能:

extension AvailabilityCalenderViewController: UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {

func numberOfSections(in collectionView: UICollectionView) -> Int {
    return weeks
}

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return 7
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "calendarCell", for: indexPath) as! calendarCell
    cell.layer.borderColor = UIColor.black.cgColor
    cell.layer.borderWidth = 0.5
    cell.configureCell(date: items[indexPath.section][indexPath.row])
    return cell
}

func collectionView(_ collectionView: UICollectionView,
                    layout collectionViewLayout: UICollectionViewLayout,
                    minimumInteritemSpacingForSectionAt section: Int) -> CGFloat{
    return 0.0
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    return CGSize(width: collectionView.frame.size.width / 7.0, height: collectionView.frame.size.height / 5)
}
}

自定义集合查看单元格:

    class calendarCell: UICollectionViewCell {

    var date: Date!

    @IBOutlet weak var lblDate: UILabel!

    func configureCell(date: Date){
        self.strDate = date
        let cal = Calendar.current
        let components = (cal as NSCalendar).components([.day], from: date)
        let day = components.day!

        self.lblDate.text = "\(String(describing: day))"  
    }    
}

结果:

enter image description here