React Native日历日程组件

这次介绍的这个React Native日历日程组件名叫react-native-calendars,是纯JS开发,可以适配IOS和安卓双平台。使用方便,功能强大,可以通过配置自定义样式和主题,更重要的是它支持日程显示。下面我们来看看这个组件的使用方法。

安装

npm install --save react-native-calendars

因为是纯JS的,所以不需要link,执行完就可以了。

使用

react-native-calendars主要包含三种子组件,分别是 Calendar(日历), CalendarList(日历列表), Agenda(日程),可以根据实际需要选择使用。下面我们分别介绍这三种组件的使用示例。

Calendar(日历)

示例代码

<Calendar
  // Initially visible month. Default = Date()
  current={'2012-03-01'}
  // Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
  minDate={'2012-05-10'}
  // Maximum date that can be selected, dates after maxDate will be grayed out. Default = undefined
  maxDate={'2012-05-30'}
  // Handler which gets executed on day press. Default = undefined
  onDayPress={(day) => {console.log('selected day', day)}}
  // Month format in calendar title. Formatting values: http://arshaw.com/xdate/#Formatting
  monthFormat={'yyyy MM'}
  // Handler which gets executed when visible month changes in calendar. Default = undefined
  onMonthChange={(month) => {console.log('month changed', month)}}
  // Hide month navigation arrows. Default = false
  hideArrows={true}
  // Replace default arrows with custom ones (direction can be 'left' or 'right')
  renderArrow={(direction) => (<Arrow />)}
  // Do not show days of other months in month page. Default = false
  hideExtraDays={true}
  // If hideArrows=false and hideExtraDays=false do not switch month when tapping on greyed out
  // day from another month that is visible in calendar page. Default = false
  disableMonthChange={true}
  // If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.
  firstDay={1}
  // Hide day names. Default = false
  hideDayNames={true}
/>

CalendarList(日历列表)

示例代码

<CalendarList
  // Callback which gets executed when visible months change in scroll view. Default = undefined
  onVisibleMonthsChange={(months) => {console.log('now these months are visible', months);}}
  // Max amount of months allowed to scroll to the past. Default = 50
  pastScrollRange={50}
  // Max amount of months allowed to scroll to the future. Default = 50
  futureScrollRange={50}
  // Enable or disable scrolling of calendar list
  scrollEnabled={true}
  ...calendarParams
/>

Agenda(日程)

示例代码

<Agenda
  // the list of items that have to be displayed in agenda. If you want to render item as empty date
  // the value of date key kas to be an empty array []. If there exists no value for date key it is
  // considered that the date in question is not yet loaded
  items={
    {'2012-05-22': [{text: 'item 1 - any js object'}],
     '2012-05-23': [{text: 'item 2 - any js object'}],
     '2012-05-24': [],
     '2012-05-25': [{text: 'item 3 - any js object'},{text: 'any js object'}],
    }}
  // callback that gets called when items for a certain month should be loaded (month became visible)
  loadItemsForMonth={(month) => {console.log('trigger items loading')}}
  // callback that gets called on day press
  onDayPress={(day)=>{console.log('day pressed')}}
  // callback that gets called when day changes while scrolling agenda list
  onDayChange={(day)=>{console.log('day changed')}}
  // initially selected day
  selected={'2012-05-16'}
  // Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
  minDate={'2012-05-10'}
  // Maximum date that can be selected, dates after maxDate will be grayed out. Default = undefined
  maxDate={'2012-05-30'}
  // Max amount of months allowed to scroll to the past. Default = 50
  pastScrollRange={50}
  // Max amount of months allowed to scroll to the future. Default = 50
  futureScrollRange={50}
  // specify how each item should be rendered in agenda
  renderItem={(item, firstItemInDay) => {return (<View />);}}
  // specify how each date should be rendered. day can be undefined if the item is not first in that day.
  renderDay={(day, item) => {return (<View />);}}
  // specify how empty date content with no items should be rendered
  renderEmptyDate={() => {return (<View />);}}
  // specify how agenda knob should look like
  renderKnob={() => {return (<View />);}}
  // specify your item comparison function for increased performance
  rowHasChanged={(r1, r2) => {return r1.text !== r2.text}}
  // Hide knob button. Default = false
  hideKnob={true}
  // By default, agenda dates are marked if they have at least one item, but you can override this if needed
  markedDates={{
    '2012-05-16': {selected: true, marked: true},
    '2012-05-17': {marked: true},
    '2012-05-18': {disabled: true}
  }}
  // agenda theme
  theme={{
    ...calendarTheme,
    agendaDayTextColor: 'yellow',
    agendaDayNumColor: 'green',
    agendaTodayColor: 'red',
    agendaKnobColor: 'blue'
  }}
  // agenda container style
  style={{}}
/>

说明

react-native-calendars组件的GitHub 地址:https://github.com/wix/react-native-calendars,更多的配置和使用方法请点击查看原文查看GitHub上的文档以及示例代码。

原文发布于微信公众号 - ReactNative开发圈(ReactNative-Circle)

原文发表时间:2017-11-02

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏跟着阿笨一起玩NET

jQuery的编码标准和最佳实践

不知道在哪里看到了这篇关于jQuery编码的文章,挺实用的,恰好最近在研究jQuery的基础知识,今天打开收藏夹来翻译一下,原文的英语不难,但是内容很实用,可能...

672
来自专栏前端儿

前端神器之Sublime Text2/3简单明了使用总结

第一:也是最重要的,它占内存很小(就如同notepad++那般迅速打开,所以那款其实也不错~)。一般IDE比如WebStorm(它也是一款神器来着),Aptan...

1222
来自专栏小狼的世界

Vimperator:玩酷你的Firefox

First there was a Navigator, then there was an Explorer. Later it was time for a...

1264
来自专栏何俊林

Android TV开发总结(三)构建一个TV app的焦点控制及遇到的坑

前言:关于《TV Metro界面(仿泰捷视频TV版)源码解析》由于都是相关代码,就不发公众号了,有兴趣的可以看链接:http://blog.csdn.net/h...

33710
来自专栏进击的君君的前端之路

HTML知识点整理

2074
来自专栏数据结构笔记

Django搭建博客(八):进阶:form与 model配合使用

在我们的后台管理页面中需要一个表单来提交和修改博客,按照上一篇讲的,我们可以这么使用:

1513
来自专栏深度学习思考者

Python编辑器--Ulipad

windows下Python的IDE选择:http://blog.csdn.net/cserchen/article/details/7036435 本人结合使...

3475
来自专栏Python爬虫与数据挖掘

如何利用CSS选择器抓取京东网商品信息

前几天小编分别利用Python正则表达式、BeautifulSoup选择器、Xpath选择器分别爬取了京东网商品信息,今天小编利用CSS选择器来为大家展示一下如...

1374
来自专栏happyJared

IDEA快捷键拆解系列(四):View篇

  以下是关于View导航项及其每一子项的拆解介绍,其中,加粗部分的选项是博主认为比较重要的。

1141
来自专栏hrscy

iOS 9 Storyboard 教程(二上)介绍Segue静态单元格(static cell)

Add Player 最终的设计看上去像下面这样:#接第一部分: 原帖地址 简书地址

2781

扫码关注云+社区

领取腾讯云代金券