iOS 简约日历控件EBCalendarView的实现代码

本文介绍了iOS 简约日历控件EBCalendarView的实现代码,分享给大家,具体如下:

EBCalendarView日历控件,调用简单,代码简洁。

github地址:https://github.com/woheduole/EBCalendarView

效果图

调用示例

EBCalendarView *calendarView = [[EBCalendarView alloc] initWithFrame:CGRectMake(0, 64, CGRectGetWidth(self.view.bounds), 0)];
  calendarView.delegate = self;
  //calendarView.maxLastMonths = 0;
  //calendarView.maxNextMonths = 0;
  [self.view addSubview:calendarView];
- (void)calendarView:(EBCalendarView*)calendarView didSelectedDate:(NSDate*)date {
  NSLog(@"选中日期:%@", [date stringWithFormat:@"yyyy-MM-dd"]);
}

代码目录

思路

EBCalendarView

_collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:self.flowLayout];
    _collectionView.dataSource = self;
    _collectionView.delegate = self;
    _collectionView.showsVerticalScrollIndicator = NO;
    _collectionView.showsHorizontalScrollIndicator = NO;
    _collectionView.backgroundColor = [UIColor whiteColor];
    [_collectionView registerClass:[EBCalendarDayCell class] forCellWithReuseIdentifier:kEBCalendarViewReuseIdentifier];

代码如下:

_flowLayout.itemSize = CGSizeMake(viewWidth / kEBCalendarViewCellColumn, kEBCalendarViewCellHeight);

通过UICollectionView控件去显示日期数据,设置UICollectionViewFlowLayout的itemSize,高度可以固定,宽度就是用视图的总宽度去除以7。

// 小数向上取整
  NSInteger rows = ceilf(_dates.count / kEBCalendarViewCellColumn);
  self.frame = ({
    CGRect frame = self.frame;
    frame.size.height = kEBCalendarViewWeekViewHeight + kEBCalenderNavigationViewHeight + (rows * kEBCalendarViewCellHeight);
    frame;
  });

切换月份的时候,由于每月的1号所在星期是不一致的,会导致行数不一样,比如一个月是31天,它的1号是星期日,这时候日期会有6行,如果它的1号是星期一,那么它会显示5行,这里会根据行数去动态的改变其高度。

- (NSDate *)dateByAddingMonths:(NSInteger)months {
  NSCalendar *calendar = [NSCalendar currentCalendar];
  NSDateComponents *components = [[NSDateComponents alloc] init];
  [components setMonth:months];
  return [calendar dateByAddingComponents:components toDate:self options:0];
}

月份在累加或累减的时候,通过NSCalendar类直接增加月数,这样就不用自己去处理2018-12点击下个月切换到2019-01或者2019-01点击上个月切换到2018-12的操作了。

EBCalendarModel 数据模型

@property (nonatomic, assign) NSInteger year;
@property (nonatomic, assign) NSInteger month;
@property (nonatomic, assign) NSInteger day;
// 记录选中状态
@property (nonatomic, assign, getter=isSelected) BOOL selected;
// 是否为当天
@property (nonatomic, assign, getter=isToday) BOOL today;
// 将year,month,day转换成NSDate
@property (nonatomic, strong, readonly) NSDate *date;
- (NSDate*)date {
  if (_year == 0 || _month == 0 || _day == 0) {
    return nil;
  }
  return [NSDate dateWithString:[NSString stringWithFormat:@"%zd-%zd-%zd"
              , _year
              , _month
              , _day] format:@"yyyy-MM-dd"];
}

EBCalenderWeekView 周视图

- (void)layoutSubviews {
  [super layoutSubviews];
  [self createWeekView];
}

- (void)setWeeks:(NSArray *)weeks {
  _weeks = weeks;
  [self createWeekView];
}

- (void)createWeekView {
  CGFloat viewWidth = CGRectGetWidth(self.bounds)
  , viewHeight = CGRectGetHeight(self.bounds);
  if (_weeks.count == 0 || viewHeight == 0) return;
  [self.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];
  NSInteger weekCount = _weeks.count;
  CGFloat weekWidth = viewWidth / weekCount;
  for (int n = 0; n < weekCount; n ++ ) {
    NSString *week = _weeks[n];
    UILabel *weekLabel = [[UILabel alloc] initWithFrame:CGRectMake(weekWidth * n, 0, weekWidth, viewHeight)];
    weekLabel.font = [UIFont systemFontOfSize:14];
    weekLabel.textColor = [UIColor colorWithHexString:@"333333"];
    weekLabel.textAlignment = NSTextAlignmentCenter;
    weekLabel.text = week;
    [self addSubview:weekLabel];
  }
}

根据传入的参数weeks动态添加UILabel显示周数据。

EBCalenderNavigationView 月份导航视图

- (void)changeMonthAction:(UIButton*)button {
  BOOL isNextMonth = NO;
  if ([button isEqual:_nextMonthButton]) {
    // 下个月
    isNextMonth = YES;
  }
  if ([self.delegate respondsToSelector:@selector(calenderNavigationViewDidChangeMonth:isNextMonth:)]) {
    [self.delegate calenderNavigationViewDidChangeMonth:self isNextMonth:isNextMonth];
  }
}

这里面主要就显示左右箭头和中间的年月显示,左右箭头是两个UIButton,在点击它们的时候通过代理把动作给传到EBCalendarView视图。

UIColor+EBAdd 颜色辅助类

+ (UIColor *)colorWithHexString:(NSString *)hexString {
  NSScanner *scanner = [NSScanner scannerWithString:hexString];
  unsigned hexNum;
  if (![scanner scanHexInt:&hexNum]) return nil;
  return [UIColor colorWithRGBHex:hexNum];
}

+ (UIColor *)colorWithRGBHex:(UInt32)hex {
  int r = (hex >> 16) & 0xFF;
  int g = (hex >> 8) & 0xFF;
  int b = (hex) & 0xFF;

  return [UIColor colorWithRed:r / 255.0f
              green:g / 255.0f
              blue:b / 255.0f
              alpha:1.0f];
}

代码中颜色都是用的16进制的颜色值,纯属个人习惯。

NSDate+EBAdd 日期辅助类

// 该方法来源自YYKit
- (NSInteger)year;

// 该方法来源自YYKit
- (NSInteger)month;

// 该方法来源自YYKit
- (NSInteger)day;

// 该方法来源自YYKit
- (NSInteger)weekday;

// 该方法来源自YYKit
- (BOOL)isToday;

// 当前月有多少天
- (NSUInteger)numberOfDaysInMonth;

// 该方法来源自YYKit
- (NSString *)stringWithFormat:(NSString *)format;

// 该方法来源自YYKit
- (NSDate *)dateByAddingMonths:(NSInteger)months;

// 该方法来源自YYKit
+ (NSDate *)dateWithString:(NSString *)dateString format:(NSString *)format;

小结:UICollectionView很强大的一个控件,通过UICollectionViewFlowLayout去重写布局,可以实现很多酷炫的功能。这里的日历控件只是设置了item的宽高,属于很基础的使用。其中需要注意两点:1.每个月的1号是属于周几,然后去设置它的起始位置;2.每个月有多少天。app类型不一样也会导致日历控件实际呈现方式不一样,基本逻辑都一样,无非就是一些细微的控制。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • iOS自定义日历控件的简单实现过程

    因为程序要求要插入一个日历控件,该空间的要求是从当天开始及以后的六个月内的日历,上网查资料基本上都说只要获取两个条件(当月第一天周几和本月一共有多少天)就可以实现一个简单的日历,剩下的靠自己的简单逻辑就OK了,下面开始自己从开始到完成的整个过程 1.首先做NSDate类目,扩展一些方法让日期之间转换更加方便 #import <Foundation/Foundation.h> @interface NSDate (LYWCalendar) #pragma mark - 获取日 - (NSInte

  • iOS 简约日历控件EBCalendarView的实现代码

    本文介绍了iOS 简约日历控件EBCalendarView的实现代码,分享给大家,具体如下: EBCalendarView日历控件,调用简单,代码简洁. github地址:https://github.com/woheduole/EBCalendarView 效果图 调用示例 EBCalendarView *calendarView = [[EBCalendarView alloc] initWithFrame:CGRectMake(0, 64, CGRectGetWidth(self.view

  • layui-laydate时间日历控件使用方法详解

    本文实例为大家分享了laydate时间日历控件的使用方法,供大家参考,具体内容如下 layui下载地址:http://www.layui.com/ 此控件可使用layui或者独立版的layDate,两者初始化有些不同 在 layui 模块中使用layui.code <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layDate快速使用</title&

  • JS学习之一个简易的日历控件

    这个日历控件类似于园子用的日历,如下图: 这种日历控件实现起来不难,下面简单分析下我的思路: 首先,是该控件的可配置项: 复制代码 代码如下: ... settings: { firstDayOfWeek: 1, baseClass: "calendar", curDayClass: "curDay", prevMonthCellClass: "prevMonth", nextMonthCellClass: "nextMonth&quo

  • javascript实现日历控件(年月日关闭按钮)

    经常使用google的朋友一定对google绚丽的日历控件记忆犹新吧,那我们也来实现一个,虽然功能和效果比不上,但重要的是实现的过程. 下面是要实现的html结构: <div id="a"><div id="head"><span id="yface">年:<select id="year"></select></span><span id=&quo

  • 修改js Calendar日历控件 兼容IE9/谷歌/火狐

    修改Calendar日历控件 兼容IE9,谷歌,火狐. 只是能用,出现的位置有所不同,希望有高手再帮我改改吧,谢谢 一. 复制代码 代码如下: this.iframe = window.frames("meizzCalendarIframe"); 修改为 复制代码 代码如下: this.iframe = window.frames["meizzCalendarIframe"]; 二. 复制代码 代码如下: var a = (arguments.length==0)

  • .net mvc页面UI之Jquery博客日历控件实现代码

    一.效果图 二.页面文件 页面上需要添加<div id="cal"></div>标记. 三.JS代码 复制代码 代码如下: // JavaScript 日历 $(document).ready(function () { //当前时间 $now = new Date();                      //当前的时间 $nowYear = $now.getFullYear();          //当前的年 $nowMonth = $now.get

  • 日历控件和天气使用分享

    感谢气象局的天气预报: <iframe allowtransparency="true" frameborder="0" width="292" height="98" scrolling="no" src="http://tianqi.2345.com/plugin/widget/index.htm?s=1&z=1&t=0&v=0&d=2&bd=1&

  • ASP.NET中日历控件和JS版日历控件的使用方法(第5节)

    今天小编带大家以做任务的形式了解ASP.NET中日历控件的使用方法,主要任务内容: 1.添加一个日历,设置日期以蓝色的完整名称显示,周末以黄色背景红色文字显示,而当前日期使用绿色背景显示,用户可以选择一天.一周或整个月,被选的天/周/月使用灰色背景色来显示.当选中一个日期后,把时间显示在下面的一个文本框中,效果如图所示: 2.设计一个注册页面,使用js日历控件帮助用户输入出生日期.效果如图所示: 学习项目一  Calendar日历控件 1.在站点下创建一个Calendar页面,并在页面上拖放一个

  • 一起学写js Calender日历控件

    最近看了一下关于js日期的一些函数,突然想到了日历控件,于是试着写了一个,作为后台程序员的我水平有限,大家抱着学习的态度看看我写的这个例子吧,一起学习进步! 首先一个常用的日期函数: Date(year,month,day) var   date=new  Date(); 获取年份 var   year=this.date.getFullYear(); 获取月份,这里是月索引所以要+1 var   month=this.date.getMonth()+1; 获取当天是几号 var   day=t

随机推荐