a Fully Customizable Date Range Picker
阿新 • • 發佈:2018-12-27
GLCalendarView是Glow的第二個開源專案,雖然開源的calendar有很多,但是支援range的卻很少,我們對GLCalendarView的定位是date range picker,希望它可以幫助到其他開發者~
Demo
Installation
CocoaPods
如果你使用cocoapods,那麼只需將GLCalendarView
加入PodFile
pod "GLCalendarView", "~> 1.0.0"
Source File
或者可以將 Sources
目錄下的所有檔案拷貝進專案
Usage
- 在storyboard裡放置一個view,或者用程式碼建立,將view的class設定成
GLCalendarView
- 在
viewDidLoad
裡, 對calendar view進行一些設定,例如設定firstDate
和lastDate
- 在
viewWillAppear
裡, 設定需要顯示的ranges,呼叫[calendarView reload];
來重新整理資料
如果要在calendar view裡顯示一些range,需要構造一些GLCalendarDateRange
objects,把它們設定成calendar view的model:
NSDate *today = [NSDate date]; NSDate *beginDate = [GLDateUtils dateByAddingDays:-23 toDate:today]; NSDate *endDate = [GLDateUtils dateByAddingDays:-18 toDate:today]; GLCalendarDateRange *range = [GLCalendarDateRange rangeWithBeginDate:beginDate endDate:endDate]; range.backgroundColor = COLOR_BLUE; range.editable = YES; range.binding = yourModelObject // you can bind your model to the range self.calendarView.ranges = [@[range1] mutableCopy]; [self.calendarView reload];
這裡說明一下binding field,它的作用是允許把自己的model繫結到range上,這樣當range被update的時候,可以很方便地從range上拿到對應的model,然後更新這個model。
calendar view會處理所有的使用者互動,包括新增,修改,和刪除一個range,所有的這些事件都可以通過delegate protocol來監聽:
@protocol GLCalendarViewDelegate <NSObject> - (BOOL)calenderView:(GLCalendarView *)calendarView canAddRangeWithBeginDate:(NSDate *)beginDate; - (GLCalendarDateRange *)calenderView:(GLCalendarView *)calendarView rangeToAddWithBeginDate:(NSDate *)beginDate; - (void)calenderView:(GLCalendarView *)calendarView beginToEditRange:(GLCalendarDateRange *)range; - (void)calenderView:(GLCalendarView *)calendarView finishEditRange:(GLCalendarDateRange *)range continueEditing:(BOOL)continueEditing; - (BOOL)calenderView:(GLCalendarView *)calendarView canUpdateRange:(GLCalendarDateRange *)range toBeginDate:(NSDate *)beginDate endDate:(NSDate *)endDate; - (void)calenderView:(GLCalendarView *)calendarView didUpdateRange:(GLCalendarDateRange *)range toBeginDate:(NSDate *)beginDate endDate:(NSDate *)endDate; @end
可以這樣實現:
- (BOOL)calenderView:(GLCalendarView *)calendarView canAddRangeWithBeginDate:(NSDate *)beginDate
{
// you should check whether user can add a range with the given begin date
return YES;
}
- (GLCalendarDateRange *)calenderView:(GLCalendarView *)calendarView rangeToAddWithBeginDate:(NSDate *)beginDate
{
// construct a new range object and return it
NSDate* endDate = [GLDateUtils dateByAddingDays:2 toDate:beginDate];
GLCalendarDateRange *range = [GLCalendarDateRange rangeWithBeginDate:beginDate endDate:endDate];
range.backgroundColor = [UIColor redColor];
range.editable = YES;
range.binding = yourModel // bind your model to the range instance
return range;
}
- (void)calenderView:(GLCalendarView *)calendarView beginToEditRange:(GLCalendarDateRange *)range
{
// save the range to a instance variable so that you can make some operation on it
self.rangeUnderEdit = range;
}
- (void)calenderView:(GLCalendarView *)calendarView finishEditRange:(GLCalendarDateRange *)range continueEditing:(BOOL)continueEditing
{
// retrieve the model from the range, do some updates to your model
id yourModel = range.binding;
self.rangeUnderEdit = nil;
}
- (BOOL)calenderView:(GLCalendarView *)calendarView canUpdateRange:(GLCalendarDateRange *)range toBeginDate:(NSDate *)beginDate endDate:(NSDate *)endDate
{
// you should check whether the beginDate or the endDate is valid
return YES;
}
- (void)calenderView:(GLCalendarView *)calendarView didUpdateRange:(GLCalendarDateRange *)range toBeginDate:(NSDate *)beginDate endDate:(NSDate *)endDate
{
// update your model if necessary
id yourModel = range.binding;
}
Appearance
GLCalendarView
的 appearance是高度可定製的,可以通過appearance api來設定所有的字型,顏色,邊框等:
[GLCalendarView appearance].rowHeight = 54;
[GLCalendarView appearance].padding = 6;
[GLCalendarView appearance].weekDayTitleAttributes = @{NSFontAttributeName:[UIFont systemFontOfSize:8], NSForegroundColorAttributeName:[UIColor grayColor]};
[GLCalendarView appearance].monthCoverAttributes = @{NSFontAttributeName:[UIFont systemFontOfSize:30]};
[GLCalendarDayCell appearance].dayLabelAttributes = @{NSFontAttributeName:[UIFont systemFontOfSize:20], NSForegroundColorAttributeName:UIColorFromRGB(0x555555)};
[GLCalendarDayCell appearance].monthLabelAttributes = @{NSFontAttributeName:[UIFont systemFontOfSize:8]};
[GLCalendarDayCell appearance].editCoverBorderWidth = 2;
[GLCalendarDayCell appearance].editCoverBorderColor = UIColorFromRGB(0x366aac);
[GLCalendarDayCell appearance].editCoverPointSize = 14;
[GLCalendarDayCell appearance].todayBackgroundColor = UIColorFromRGB(0x366aac);
[GLCalendarDayCell appearance].todayLabelAttributes = @{NSFontAttributeName:[UIFont systemFontOfSize:20]};
[GLCalendarDayCell appearance].rangeDisplayMode = RANGE_DISPLAY_MODE_CONTINUOUS;