All Projects → FaiChou → react-native-slideable-calendar-strip

FaiChou / react-native-slideable-calendar-strip

Licence: other
A react native calendar strip that support swipe!

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to react-native-slideable-calendar-strip

WeekToDoWeb
WeekToDo is a free minimalist weekly planner app focused on privacy. Schedule your tasks and projects with to do lists and a calendar. Available for Windows, Mac, Linux or online.
Stars: ✭ 48 (-44.19%)
Mutual labels:  calendar
weather-calendar-feed
Display yr.no weather (supports the entire Earth) forecasts with highly customizable Event titles in your Google Calendar, Android phone, iPhone, Outlook or other iCalendar app
Stars: ✭ 16 (-81.4%)
Mutual labels:  calendar
docker-sogo
Run sogo in a docker container.
Stars: ✭ 20 (-76.74%)
Mutual labels:  calendar
finql
A quantitative finance toolbox
Stars: ✭ 21 (-75.58%)
Mutual labels:  calendar
SPStorkController
Now playing controller from Apple Music, Mail & Podcasts Apple's apps.
Stars: ✭ 2,515 (+2824.42%)
Mutual labels:  swipe
calendar-view-plugin
Jenkins Calendar View Plugin: Shows past and future builds in a calendar view
Stars: ✭ 17 (-80.23%)
Mutual labels:  calendar
iflux2
Reactive state container (based on immutable) for React or ReactNative, inspired by mapreduce.
Stars: ✭ 50 (-41.86%)
Mutual labels:  reactnative
rc-year-calendar
Official React wrapper for the year-calendar widget
Stars: ✭ 27 (-68.6%)
Mutual labels:  calendar
HBHybridCollectionView
Instead for SwipeTableView when using collection view.
Stars: ✭ 14 (-83.72%)
Mutual labels:  swipe
KosherCocoa
My Objective-C port of KosherJava. KosherCocoa enables you to perform sunrise-based and sunset-based calculations for Jewish prayer and calendar.
Stars: ✭ 49 (-43.02%)
Mutual labels:  calendar
WLAppleCalendar
Make AppleCalendar using JTAppleCalendar library.🎉
Stars: ✭ 34 (-60.47%)
Mutual labels:  calendar
react-native-input-bar
Fully customizable, beautifully designed Input Bar for React Native
Stars: ✭ 32 (-62.79%)
Mutual labels:  reactnative
github-now
Automatically generate your GitHub user profile page
Stars: ✭ 140 (+62.79%)
Mutual labels:  calendar
react-native-infinite-calendar
WIP: React native port of react-infinite-calendar
Stars: ✭ 43 (-50%)
Mutual labels:  calendar
laravel-fullcalendar-scheduler
Laravel Fullcalendar scheduler component
Stars: ✭ 21 (-75.58%)
Mutual labels:  calendar
wepy-com-calendar
一个基于wepy的日历组件,内置多套皮肤,可启用打卡功能
Stars: ✭ 33 (-61.63%)
Mutual labels:  calendar
yuanful-ui
(微信小程序插件) yuanful-ui是一套可添加到微信小程序内直接使用的免费功能插件,无需重复开发,为用户提供更丰富的服务。
Stars: ✭ 30 (-65.12%)
Mutual labels:  calendar
ionic4-datepicker
Ionic 4 Datepicker component
Stars: ✭ 78 (-9.3%)
Mutual labels:  calendar
calendar-link
📅 Calendar link generator for popular services
Stars: ✭ 193 (+124.42%)
Mutual labels:  calendar
OmniList
开源的时间管理App,基于Material Design设计
Stars: ✭ 61 (-29.07%)
Mutual labels:  calendar

react-native-slideable-calendar-strip Build Status npm juejin license

Live Calendar Demo.mp4

Feature

  1. Support pull down gesture
  2. Support go today
  3. Support support marked date
  4. Support Chinese lunar
  5. Support current week of this year (W21)
  6. Support both Date and Date string ('2018-01-01') types
  7. Support customized start of week

How to use

Install package:

npm install --save react-native-slideable-calendar-strip
# or
yarn add react-native-slideable-calendar-strip

Import to your app:

import CalendarStrip from 'react-native-slideable-calendar-strip';

Use the component:

<CalendarStrip
  isChinese
  showWeekNumber
  showChineseLunar
  selectedDate={this.state.selectedDate}
  onPressDate={(date) => {
    this.setState({ selectedDate: date });
  }}
  onPressGoToday={(today) => {
    this.setState({ selectedDate: today });
  }}
  onSwipeDown={() => {
    alert('onSwipeDown');
  }}
  markedDate={['2018-05-04', '2018-05-15', '2018-06-04', '2018-05-01']}
  weekStartsOn={1} // 0,1,2,3,4,5,6 for S M T W T F S, defaults to 0
/>

API

API name Desc
selectedDate The current selected date, Required.
onPressDate Press date callback, Optional, (date) => {}
onPressGoToday Press gotoday button callback, Optional, (today) => {}
markedDate Marked highlighted date array, Optional, ['2018-01-01', '2018-02-01']
onSwipeDown Swipe down gesture callback, Optional, () => {}
isChinese Show Chinese Week or not, default false,
showChineseLunar Show Chinese Lunar or not, default false,
showWeekNumber Show week number or not, default false,
weekStartsOn Set start of week, Optional, defaults to 0, 0 1 2 3 4 5 6 for S M T W T F S
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].