React Native Calendar Components ๐Ÿ—“๏ธ ๐Ÿ“†

Overview

React Native Calendars ๐Ÿ—“๏ธ ๐Ÿ“†

Version Build Status

This module includes various customizable React-Native calendar components.

The package is both Android and iOS compatible.

Try it out

You can run example module by performing these steps:

$ git clone [email protected]:wix/react-native-calendars.git
$ npm install
$ react-native run-ios

You can check example screens source code in example module screens

This project is compatible with Expo/CRNA (without ejecting), and the examples have been published on Expo

Installation

$ npm install --save react-native-calendars

The solution is implemented in JavaScript so no native module linking is required.

Usage

import {Calendar, CalendarList, Agenda} from 'react-native-calendars';

All parameters for components are optional. By default the month of current local date will be displayed.

Event handler callbacks are called with calendar objects like this:

{
  day: 1,      // day of month (1-31)
  month: 1,    // month of year (1-12)
  year: 2017,  // year
  timestamp,   // UTC timestamp representing 00:00 AM of this date
  dateString: '2016-05-13' // date formatted as 'YYYY-MM-DD' string
}

Parameters that require date types accept YYYY-MM-DD formated date-strings, JavaScript date objects, calendar objects and UTC timestamps.

Calendars can be localized by adding custom locales to LocaleConfig object:

import {LocaleConfig} from 'react-native-calendars';

LocaleConfig.locales['fr'] = {
  monthNames: ['Janvier','Fรฉvrier','Mars','Avril','Mai','Juin','Juillet','Aoรปt','Septembre','Octobre','Novembre','Dรฉcembre'],
  monthNamesShort: ['Janv.','Fรฉvr.','Mars','Avril','Mai','Juin','Juil.','Aoรปt','Sept.','Oct.','Nov.','Dรฉc.'],
  dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
  dayNamesShort: ['Dim.','Lun.','Mar.','Mer.','Jeu.','Ven.','Sam.'],
  today: 'Aujourd\'hui'
};
LocaleConfig.defaultLocale = 'fr';

Calendar

Basic parameters

<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)}}
  // Handler which gets executed on day long press. Default = undefined
  onDayLongPress={(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}
  // Show week numbers to the left. Default = false
  showWeekNumbers={true}
  // Handler which gets executed when press arrow icon left. It receive a callback can go back month
  onPressArrowLeft={subtractMonth => subtractMonth()}
  // Handler which gets executed when press arrow icon right. It receive a callback can go next month
  onPressArrowRight={addMonth => addMonth()}
  // Disable left arrow. Default = false
  disableArrowLeft={true}
  // Disable right arrow. Default = false
  disableArrowRight={true}
  // Disable all touch events for disabled days. can be override with disableTouchEvent in markedDates
  disableAllTouchEventsForDisabledDays={true}
  // Replace default month and year title with custom one. the function receive a date as parameter.
  renderHeader={(date) => {/*Return JSX*/}}
  // Enable the option to swipe between months. Default = false
  enableSwipeMonths={true}
/>

Date marking

Disclaimer: Make sure that markedDates param is immutable. If you change markedDates object content but the reference to it does not change calendar update will not be triggered.

Dot marking

<Calendar
  // Collection of dates that have to be marked. Default = {}
  markedDates={{
    '2012-05-16': {selected: true, marked: true, selectedColor: 'blue'},
    '2012-05-17': {marked: true},
    '2012-05-18': {marked: true, dotColor: 'red', activeOpacity: 0},
    '2012-05-19': {disabled: true, disableTouchEvent: true}
  }}
/>

You can customize a dot color for each day independently.

Multi-Dot marking

Use markingType={'multi-dot'} if you want to display more than one dot. Both the <Calendar/> and <CalendarList/> support multiple dots by using dots array in markedDates prop. The property color is mandatory while key and selectedColor are optional. If key is omitted then the array index is used as key. If selectedColor is omitted then color will be used for selected dates.

const vacation = {key:'vacation', color: 'red', selectedDotColor: 'blue'};
const massage = {key:'massage', color: 'blue', selectedDotColor: 'blue'};
const workout = {key:'workout', color: 'green'};

<Calendar
  markedDates={{
    '2017-10-25': {dots: [vacation, massage, workout], selected: true, selectedColor: 'red'},
    '2017-10-26': {dots: [massage, workout], disabled: true}
  }}
  markingType={'multi-dot'}
/>

Period marking

<Calendar
  // Collection of dates that have to be colored in a special way. Default = {}
  markedDates={{
    '2012-05-20': {textColor: 'green'},
    '2012-05-22': {startingDay: true, color: 'green'},
    '2012-05-23': {selected: true, endingDay: true, color: 'green', textColor: 'gray'},
    '2012-05-04': {disabled: true, startingDay: true, color: 'green', endingDay: true}
  }}
  // Date marking style [simple/period/multi-dot/custom]. Default = 'simple'
  markingType={'period'}
/>

Multi-period marking

CAUTION: This marking is only fully supported by the <Calendar/> component because it expands its height. Usage with <CalendarList/> might lead to overflow issues.

<Calendar
  markedDates={{
    '2017-12-14': {
      periods: [
        {startingDay: false, endingDay: true, color: '#5f9ea0'},
        {startingDay: false, endingDay: true, color: '#ffa500'},
        {startingDay: true, endingDay: false, color: '#f0e68c'}
      ]
    },
    '2017-12-15': {
      periods: [
        {startingDay: true, endingDay: false, color: '#ffa500'},
        {color: 'transparent'},
        {startingDay: false, endingDay: false, color: '#f0e68c'}
      ]
    }
  }}
  // Date marking style [simple/period/multi-dot/custom]. Default = 'simple'
  markingType='multi-period'
/>

Custom marking allows you to customize each marker with custom styles.

<Calendar
  // Date marking style [simple/period/multi-dot/single]. Default = 'simple'
  markingType={'custom'}
  markedDates={{
    '2018-03-28': {
      customStyles: {
        container: {
          backgroundColor: 'green'
        },
        text: {
          color: 'black',
          fontWeight: 'bold'
        }
      }
    },
    '2018-03-29': {
      customStyles: {
        container: {
          backgroundColor: 'white',
          elevation: 2
        },
        text: {
          color: 'blue'
        }
      }
    }
  }}
/>

NEW! While we still don't support multi marking type, we add the possibility to combine between period and simple.

<Calendar
  markingType={'period'}
  markedDates={{
    '2012-05-15': {marked: true, dotColor: '#50cebb'},
    '2012-05-16': {marked: true, dotColor: '#50cebb'},
    '2012-05-21': {startingDay: true, color: '#50cebb', textColor: 'white'},
    '2012-05-22': {color: '#70d7c7', textColor: 'white'},
    '2012-05-23': {color: '#70d7c7', textColor: 'white', marked: true, dotColor: 'white'},
    '2012-05-24': {color: '#70d7c7', textColor: 'white'},
    '2012-05-25': {endingDay: true, color: '#50cebb', textColor: 'white'},
  }}
/>

Keep in mind that different marking types are not compatible. You can use just one marking style for a calendar.

Displaying data loading indicator

The loading indicator next to the month name will be displayed if <Calendar/> has displayLoadingIndicator prop and the markedDates collection does not have a value for every day of the month in question. When you load data for days, just set [] or special marking value to all days in markedDates collection.

Customizing look & feel

<Calendar
  // Specify style for calendar container element. Default = {}
  style={{
    borderWidth: 1,
    borderColor: 'gray',
    height: 350
  }}
  // Specify theme properties to override specific styles for calendar parts. Default = {}
  theme={{
    backgroundColor: '#ffffff',
    calendarBackground: '#ffffff',
    textSectionTitleColor: '#b6c1cd',
    textSectionTitleDisabledColor: '#d9e1e8',
    selectedDayBackgroundColor: '#00adf5',
    selectedDayTextColor: '#ffffff',
    todayTextColor: '#00adf5',
    dayTextColor: '#2d4150',
    textDisabledColor: '#d9e1e8',
    dotColor: '#00adf5',
    selectedDotColor: '#ffffff',
    arrowColor: 'orange',
    disabledArrowColor: '#d9e1e8',
    monthTextColor: 'blue',
    indicatorColor: 'blue',
    textDayFontFamily: 'monospace',
    textMonthFontFamily: 'monospace',
    textDayHeaderFontFamily: 'monospace',
    textDayFontWeight: '300',
    textMonthFontWeight: 'bold',
    textDayHeaderFontWeight: '300',
    textDayFontSize: 16,
    textMonthFontSize: 16,
    textDayHeaderFontSize: 16
  }}
/>

Customize days titles with disabled styling

<Calendar
    theme={{
     textSectionTitleDisabledColor: '#d9e1e8'
    }}
    disabledDaysIndexes={[0, 6]}
    markedDates={{
    ...this.getDisabledDates('2012-05-01', '2012-05-30', [0, 6])
    }}
/>

Advanced styling

If you want to have complete control over the calendar styles you can do it by overriding default style.js files. For example, if you want to override <CalendarHeader/> style first you have to find stylesheet id for this file:

https://github.com/wix/react-native-calendars/blob/master/src/calendar/header/style.js#L4

In this case it is stylesheet.calendar.header. Next you can add overriding stylesheet to your theme with this id.

https://github.com/wix/react-native-calendars/blob/master/example/src/screens/calendars.js#L56

theme={{
  arrowColor: 'white',
  'stylesheet.calendar.header': {
    week: {
      marginTop: 5,
      flexDirection: 'row',
      justifyContent: 'space-between'
    }
  }
}}

Disclaimer: Issues that arise because something breaks after using stylesheet override will not be supported. Use this option at your own risk.

Overriding day component

If you need custom functionality not supported by current day component implementations you can pass your own custom day component to the calendar.

<Calendar
  style={[styles.calendar, {height: 300}]}
  dayComponent={({date, state}) => {
    return (
      <View>
        <Text style={{textAlign: 'center', color: state === 'disabled' ? 'gray' : 'black'}}>
          {date.day}
        </Text>
      </View>
    );
  }}
/>

The dayComponent prop has to receive a RN component or a function that receive props. The dayComponent will receive such props:

  • state - disabled if the day should be disabled (this is decided by base calendar component).
  • marking - markedDates value for this day.
  • date - the date object representing this day.

Tip: Don't forget to implement shouldComponentUpdate() for your custom day component to make the calendar perform better

If you implement an awesome day component please make a PR so that other people could use it :)

CalendarList

<CalendarList/> is scrollable semi-infinite calendar composed of <Calendar/> components. Currently it is possible to scroll 4 years back and 4 years to the future. All parameters that are available for <Calendar/> are also available for this component. There are also some additional params that can be used:

<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}
  // Enable or disable vertical scroll indicator. Default = false
  showScrollIndicator={true}
  ...calendarParams
/>

Horizontal CalendarList

You can also make the CalendarList scroll horizontally. To do that you need to pass specific props to the CalendarList:

<CalendarList
  // Enable horizontal scrolling, default = false
  horizontal={true}
  // Enable paging on horizontal, default = false
  pagingEnabled={true}
  // Set custom calendarWidth.
  calendarWidth={320}
  ...calendarListParams
  ...calendarParams
/>

Agenda

An advanced Agenda component that can display interactive listings for calendar day items.

<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 has 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': [{name: 'item 1 - any js object'}],
    '2012-05-23': [{name: 'item 2 - any js object', height: 80}],
    '2012-05-24': [],
    '2012-05-25': [{name: 'item 3 - any js object'}, {name: '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 fires when the calendar is opened or closed
  onCalendarToggled={(calendarOpened) => {console.log(calendarOpened)}}
  // 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 what should be rendered instead of ActivityIndicator
  renderEmptyData = {() => {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}
  }}
  // If disabledByDefault={true} dates flagged as not disabled will be enabled. Default = false
  disabledByDefault={true}
  // If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the refreshing prop correctly.
  onRefresh={() => console.log('refreshing...')}
  // Set this true while waiting for new data from a refresh
  refreshing={false}
  // Add a custom RefreshControl component, used to provide pull-to-refresh functionality for the ScrollView.
  refreshControl={null}
  // Agenda theme
  theme={{
    ...calendarTheme,
    agendaDayTextColor: 'yellow',
    agendaDayNumColor: 'green',
    agendaTodayColor: 'red',
    agendaKnobColor: 'blue'
  }}
  // Agenda container style
  style={{}}
/>

Authors

See also the list of contributors who participated in this project.

Contributing

Pull requests are most welcome! Please npm run test and npm run lint before push. Don't forget to add a title and a description that explain the issue you're trying to solve and your suggested solution. Screenshots and gifs are very helpful.

Issues
  • Agenda loading forever.

    Agenda loading forever.

    I created an <Agenda /> component with the code below, but the agenda show an spin loading forever. I created the project with create-react-native-app.

    import React, { Component } from 'react';
    import { connect } from 'react-redux';
    import { Facebook, WebBrowser } from 'expo';
    import { Linking } from 'react-native';
    import { Card, CardSection, Button } from './common';
    import { loginWithFacebook } from '../actions';
    import { Agenda } from 'react-native-calendars';
    
    @connect(null, { loginWithFacebook })
    class LoginStudent extends Component {
      static navigationOptions = {
        title: 'Login Student',
      };
    
      render() {
        return (
          <Agenda 
            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'}],
    	}} 
            loadItemsForMonth={(mongh) => {console.log('trigger items loading')}}
            onDayPress={(day)=>{console.log('day pressed')}}
    				selected={'2012-05-16'} 
            renderItem={item => <View />}
            renderDay={(day, item) => <View />}
            renderEmptyDate={() => <View />}
            rowHasChanged={(r1, r2) => (r1.text !== r2.text)}
            hideKnob={true}
            theme={{}}
            style={{}}
           />
        );
      }
    }
    
    export default LoginStudent;
    
    Question 
    opened by ercpereda 44
  • Agenda scroll up doesn't roll back to previous week

    Agenda scroll up doesn't roll back to previous week

    When I scroll my Agenda down, it will roll over to the next week when you hit a date that is in that week. But then when I try to scroll up, it doesn't roll back to the previous week and any previous week events are not visible anymore.

    Have to go into Calendar List and select the date in previous week.

    Feature request 
    opened by Rc85 27
  • Fix dayProps for custom dayComponent

    Fix dayProps for custom dayComponent

    merge-candidate 
    opened by nnnnoel 24
  • (Agenda) Fix rendering of previous/ future calendars by removing initialScrollIndex

    (Agenda) Fix rendering of previous/ future calendars by removing initialScrollIndex

    Resolves #468 & #425

    Removes initialScrollIndex prop on the Flatlist within CalendarList.

    Through testing, it was conflicting with either calling scrollToOffset or scrollToDay (called by Agenda).

    Also, migrate to getDerivedStateFromProps, and remove usage of deprecated componentWillReceiveProps API

    Agenda 
    opened by chrismllr 23
  • CalenderList in Agenda component doesn't show / render current week until scroll or choosing another date

    CalenderList in Agenda component doesn't show / render current week until scroll or choosing another date

    Description

    On initial load of the Agenda component the CalendarList component on top doesn't show until I scroll the items rendered below in the scrollview or after opening the CalendarList via the knob and manually selecting a date. Important to mention this happened only in iOS devices and it happened to the included Agenda example too (https://github.com/wix/react-native-calendars/blob/master/example/src/screens/agenda.js).

    Expected Behavior

    The CalendarList should show the week of the current selected date without user interaction on initial load

    Observed Behavior

    The CalendarList doesn't show at all until user interacts. Observed only in iOS.

    Environment

    1. iOS Simulator iPhone 6:
    2. iPhone's 7, X:

    Screenshot

    simulator screen shot - iphone 6 - 2018-03-27 at 19 32 30

    Thanks.

    Bug report 
    opened by chaimPaneth 20
  • make calendar collapsible

    make calendar collapsible

    Description

    I want to control whether the Calendar Component is collapsed just like Agenda(show only one week instead of one month, and there is a button to show the full view of it when collapsed). But It seems that we are not given such API.

    Environment

    Please run these commands in the project folder and fill in their results:

    Thanks in advance :)

    stale 
    opened by begoat 19
  • Compatibility with react-native-web

    Compatibility with react-native-web

    Hey there! ๐Ÿ™‹ This calendar module looks awesome. We would like to use it in our react-native-web project but are running into an issue because of the .ios and .android file extensions for some of the assets. My suggestion is to provide a default for these assets so our Webpack build can resolve them.

    The files that are giving us trouble are:

    • src/calendar/img/previous.png
    • src/calendar/img/next.png
    • src/agenda/style.js

    If you add these files, then we should be good to go! The only question now is whether we use iOS or Android styling as the default for the web - what do you all think?

    cc @kkemple

    opened by peggyrayzis 18
  • calendar view not refreshing

    calendar view not refreshing

    I have the problem that the calendar view doesnt refresh though my events which i give in markedDates change. I have to mention that i created my own Day component for that. Maybe there is the problem (maybe with ShouldComponentUpdate, the description is not very clear on that) but i dont think so.

    Thanks for every response on this!!

    opened by apppro123 18
  • How to show current month's name in Agenda component

    How to show current month's name in Agenda component

    Is there a way of showing the current month when the component is in Agenda mode? Showing only the week of the currently selected day is not enough to give the proper context to the user, in my opinion.

    stale 
    opened by dani-mp 18
  • Disabled days => disable onPress?

    Disabled days => disable onPress?

    Currently when a calendar item is marked as disabled, it's still possible to press on it.

    Is it a mistake or intended behavior?

    If it is intended, can we permit to disable press as well?

    Feature request 
    opened by slorber 17
  • Update agenda.tsx

    Update agenda.tsx

    The documentations is wrong Since XDATE is trying to parse ISO dates as strings we should pass

    a date object like so: new Date().toISOString(). and not like in the example

    opened by eladgel 0
  • Upgrade to RN66

    Upgrade to RN66

    Upgrade to RN66 I had to bump rnn as well, please verify that everything works as expected WOAUILIB-2388

    opened by lidord-wix 0
  • Feature: Allow the user to select a week via a checkbox + clicking the knob in expandableCalendar

    Feature: Allow the user to select a week via a checkbox + clicking the knob in expandableCalendar

    Hi !

    I needed in my app a way to select a week through the calendar so it can give me back the week number. I made a small feature to do so, here is an example

    ezgif-5-f484b1e1c3

    This PR also include the "TODO", clickable knob in expandable calendar. I also added a callback in case the developer wants to do something when the knob is clicked.

    Here it is: ezgif-5-e3a2a5a0b7

    opened by riamon-v 0
  • Support initial scroll to current time

    Support initial scroll to current time

    Add scrollToNow prop in Timeline components

    opened by ethanshar 0
  • Selected date properties do not work

    Selected date properties do not work

    Description

    When a date is clicked, the selected date doesnt change its style as this gif shows https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/calendar.gif?raw=true

    Expected Behavior

    Clicked on a button and the selected style didn't change at all

    Observed Behavior

    Here's my code:

            <Calendar
              onDayPress={day => {
                console.log('selected day', day);
              }}
              theme={{
                backgroundColor: '#ffffff',
                calendarBackground: '#ffffff',
                textSectionTitleColor: '#b6c1cd',
                textSectionTitleDisabledColor: '#d9e1e8',
                selectedDayBackgroundColor: '#00adf5',
                selectedDayTextColor: '#ffffff',
                todayTextColor: '#00adf5',
                dayTextColor: '#2d4150',
                textDisabledColor: '#d9e1e8',
                dotColor: '#00adf5',
                selectedDotColor: '#ffffff',
                arrowColor: 'orange',
                disabledArrowColor: '#d9e1e8',
                monthTextColor: 'blue',
                indicatorColor: 'blue',
                textDayFontFamily: 'monospace',
                textMonthFontFamily: 'monospace',
                textDayHeaderFontFamily: 'monospace',
                textDayFontWeight: '300',
                textMonthFontWeight: 'bold',
                textDayHeaderFontWeight: '300',
                textDayFontSize: 16,
                textMonthFontSize: 16,
                textDayHeaderFontSize: 16
              }}
              >
             
             
            </Calendar>
    

    Environment

    Please run these commands in the project folder and fill in their results: โ””โ”€โ”€ [email protected] โ”œโ”€โ”ฌ @react-navigation/[email protected] โ”‚ โ”œโ”€โ”ฌ @react-navigation/[email protected] โ”‚ โ”‚ โ””โ”€โ”€ [email protected] deduped โ”‚ โ””โ”€โ”€ [email protected] deduped โ”œโ”€โ”ฌ @react-navigation/[email protected] โ”‚ โ””โ”€โ”€ [email protected] deduped โ”œโ”€โ”ฌ @react-navigation/[email protected] โ”‚ โ”œโ”€โ”ฌ [email protected] โ”‚ โ”‚ โ””โ”€โ”€ [email protected] deduped โ”‚ โ””โ”€โ”€ [email protected] deduped โ”œโ”€โ”ฌ @react-navigation/[email protected] โ”‚ โ””โ”€โ”€ [email protected] deduped โ”œโ”€โ”ฌ @react-navigation/[email protected] โ”‚ โ””โ”€โ”€ [email protected] deduped โ”œโ”€โ”ฌ [email protected] โ”‚ โ”œโ”€โ”ฌ [email protected] โ”‚ โ”‚ โ””โ”€โ”€ [email protected] deduped โ”‚ โ””โ”€โ”€ [email protected] deduped โ”œโ”€โ”ฌ react-na[email protected] โ”‚ โ”œโ”€โ”ฌ [email protected] โ”‚ โ”‚ โ””โ”€โ”€ [email protected] deduped โ”‚ โ””โ”€โ”€ [email protected] deduped โ”œโ”€โ”ฌ [email protected] โ”‚ โ””โ”€โ”€ [email protected] deduped โ”œโ”€โ”ฌ [email protected] โ”‚ โ””โ”€โ”€ [email protected] deduped โ”œโ”€โ”ฌ [email protected] โ”‚ โ””โ”€โ”€ [email protected] deduped โ””โ”€โ”ฌ [email protected] โ””โ”€โ”ฌ @react-native-community/[email protected] โ””โ”€โ”€ [email protected] deduped

    Also specify:

    Running on a Xiaomi RedMi Note 8

    opened by gustavo-galaverna 0
  • Infra/use infinite list for week cal

    Infra/use infinite list for week cal

    I created a new implementation for WeekCalendar. Instead of refactoring the existing one I created a new file in the same folder (new.tsx)

    • I refactored the component into a Function Component
    • I'm getting the ExpandableCalendar context using useContext hook instead of the asCalendarConsumer
    • I replaced FlatList with our new InfiniteList component
    • I moved the week days names into a separate sub component (WeekDaysNames.tsx)
    • I didn't use the existing presenter cause it contains too much logic I didn't need anymore, the only thing I needed I copied to the new.tsx file - this is temporary, eventually I'll create a new presenter instead of the one we have today.

    At the moment only the WeekCalendar example screen is using the new implementation, Other components still use the old implementation. Gradually, we'll move to the new one when we feel safe with it.

    opened by ethanshar 0
  • Customize Agenda CalendarList Height and Orientation

    Customize Agenda CalendarList Height and Orientation

    Is there a prop in the agenda component to customize the CalendarList to make it horizontal, and/or give it a custom height? If not, would it be possible to hide the CalendarList in the Agenda?

    opened by pchen03 0
  • Infra/docs site

    Infra/docs site

    Adding doc site to the repo

    opened by Inbal-Tish 0
  • Timeline not supporting locale

    Timeline not supporting locale

    Description

    <Timeline format24h={false} is not supporting locale time values. Always showing AM and PM in time.

    This is happening because of https://github.com/wix/react-native-calendars/blob/master/src/timeline/TimelineHours.tsx#L40

    timeText = !format24h ? `${i} AM` : `${i}:00`;
    

    Expected Behavior

    Should change AM & PM based on locale.

    Screenshots

    Screenshot 2022-01-03 at 1 53 37 PM

    opened by saravanakumargn 0
  • issue with moment library import

    issue with moment library import

    Description

    Is it really necessary to keep the moment library inside the project? It seems like XDate does the job just fine and moment library is kinda heavy (Adds ~600kb to my project).

    Also, there is currently an issue with the way react-native-calendars imports it, and its possible for webpack to fail compilation because of the getMoment function.

    Expected Behavior

    Since moment is an optional library, I expect builds not to break if the moment is missing from node_modules.

    Observed Behavior

    I am using react-native-calendars in a react-native-web project and webpack compilation breaks because of this function.

    export const getMoment = () => {
      if (!moment) {
        moment = require('moment');
      }
    
      return moment;
    };
    

    We should at least wrap the moment = require('moment'); in try/catch to prevent webpack from failing.

    For anyone facing the same issue, for now, I am adding the following to my webpack.config file to avoid the crashes and the warnings but it still requires some work for our team to ensure that moment is not accidentally installed and bundled in.

    externals: {
        'moment': "require('moment')",
      },
    
    opened by Saikedo 0
Releases(v1.1276.0)
  • v1.1276.0(Jan 19, 2022)

    Fixed

    • ExpandableCalendar - Context type by @ethanshar in https://github.com/wix/react-native-calendars/pull/1748
    • ExpandableCalendar - fix Android bottom padding. by @Inbal-Tish in https://github.com/wix/react-native-calendars/pull/1755
    • Resolve export of prop types error by @jdpnielsen in https://github.com/wix/react-native-calendars/pull/1745
    • Fix type import error by @connectdotz in https://github.com/wix/react-native-calendars/pull/1752

    Changed

    • HorizontalList - Convert to InfiniteList by @ethanshar in https://github.com/wix/react-native-calendars/pull/1750

    Added

    • TimelineList - new component by @ethanshar in https://github.com/wix/react-native-calendars/pull/1747
    • TimelineList - Support passing showNowIndicator by @ethanshar in https://github.com/wix/react-native-calendars/pull/1754

    Infra

    • Release script - fix git tagging command by @Inbal-Tish in https://github.com/wix/react-native-calendars/pull/1746

    New Contributors

    • @jdpnielsen made their first contribution in https://github.com/wix/react-native-calendars/pull/1745
    • @connectdotz made their first contribution in https://github.com/wix/react-native-calendars/pull/1752

    Full Changelog: https://github.com/wix/react-native-calendars/compare/1.1274.0...v1.1276.0

    Source code(tar.gz)
    Source code(zip)
  • v1.1275.0(Jan 5, 2022)

    Fixed

    • Agenda - types fix.

    Changed

    • Agenda - make the touchable area of the calendar's knob full-width.

    Added

    • CalendarHeader - customHeaderTitle prop.
    • Timeline - support background press for creating new events.
    • Timeline - date prop to return in press events.
    • Timeline - support now indicator and fix UI for timeline grid.

    Infra

    • Timeline - refactor.
    • Removing XDate type.
    • Expose calendar utils under CalendarUtils namespace.

    New Contributors

    • @kei95 made their first contribution in https://github.com/wix/react-native-calendars/pull/1730

    Full Changelog: https://github.com/wix/react-native-calendars/compare/1.1273.0...v1.1275.0

    Source code(tar.gz)
    Source code(zip)
  • 1.1274.0(Dec 14, 2021)

    Fixed

    • Release script
    • Release tags
    • Componentโ€™s display name.
    • ExpandableCalendar, Provider, AgendaList - change XDate type to string.
    Source code(tar.gz)
    Source code(zip)
  • 1.1271.0(Dec 14, 2021)

  • 1.1272.0(Dec 14, 2021)

    Added

    • ExpandableCalendar - Add closeOnDayPress prop (PR #1673).
    • new theme prop - weekVerticalMargin to control week row margin (PR #1682).
    • Calendar - add 'initialDate' prop to allow reset the calendar with new date.

    Fixed

    • README - 'try it out' section missing steps (PR #1624).
    • Day - fix accessibility label localization (PR #1694).
    • Agenda - renders only for the first item of the day (PR #1699).
    • ExpandableCalendar - Only hide extra days when vertical and open (PR #1705).
    • ts configuration.

    Changed

    • Replacing lodash 'invoke' with optional chaining.
    • Removing JS 'Date' as a type.
    • Calendar and CalendarList - removing unused parameter doNotTriggerListeners from updateMonth().
    • input.js - renaming velocityTracker.
    • test.js - renaming testUtils and removing from a folder.
    Source code(tar.gz)
    Source code(zip)
  • v1.17.0(Feb 1, 2018)

  • v1.11.0(Nov 17, 2017)

  • v1.10.0(Nov 16, 2017)

    Breaking changes:

    Interactive marking now is called 'period' marking and structure of marking has become more nested:

       markedDates={
        {'2012-05-20': {periods: [{textColor: 'green'}]},
         '2012-05-22': {periods: [{startingDay: true, color: 'green'}]},
         '2012-05-23': {periods: [{endingDay: true, color: 'green', textColor: 'gray'}]},
         '2012-05-04': {disabled: true, periods: [{startingDay: true, color: 'green'}, {endingDay: true, color: 'green'}]}
        }}
    
    Source code(tar.gz)
    Source code(zip)
  • v1.6.0(Sep 14, 2017)

  • v1.4.0(Jun 12, 2017)

  • v1.2.18(May 29, 2017)

  • v1.2.17(May 26, 2017)

    • Add onDayChange prop to Agenda #31

    • Added compatibility for react-native-web #2

    • Add possibility to provide custom arrow components #28

    • Fix agenda header day alignment #22

    Source code(tar.gz)
    Source code(zip)
  • v1.2.15(May 22, 2017)

  • v1.2.13(May 18, 2017)

  • v1.2.12(May 15, 2017)

  • v1.2.11(May 14, 2017)

  • v1.2.10(May 12, 2017)

Owner
Wix.com
Open-sourcing useful pieces of code
Wix.com
๐Ÿ“† React Native Module for iOS and Android Calendar Events

React Native Calendar Events A React Native module to help access and save events to iOS and Android calendars. Getting started This package assumes t

Will McMahan 771 Jan 20, 2022
React-Native cross-platform, calendar component.

React Native Calendar Datepicker Description This project aims at providing developers with a cross-platform, highly customizable, calendar date picke

Vlad-Doru Ion 85 Jan 9, 2022
๐Ÿ“† React Native Calendar

React Native Calendar ?? Installation npm install react-native-calendario --save Using yarn yarn add react-native-calendario Usage import { Calendar }

Alejandro Maggi 292 Jan 9, 2022
A simple material-themed calendar for react native android

react-native-calendar-android A simple material-themed calendar for react native android Installation Android npm install --save react-native-calendar

Tu Do 41 Dec 11, 2021
An awesome and cross-platform React Native date picker and calendar component for iOS and Android

react-native-common-date-picker An awesome and cross-platform React Native date picker and calendar component for iOS and Android. This package is des

chenlong 68 Jan 17, 2022
A component to select period from calendar like Airbnb

react-native-calendar-select A date picker component like Airbnb. You can select a date period from the calendar modal. Examples iOS Examples Android

WyTiny 291 Jan 11, 2022
A calendar component supporting dragging.

DraggableCalendar A calendar component supporting dragging operation. 1. Examples Download the repository, cd the examples directory, and run it on si

SmallStone 95 Dec 14, 2021
Date Dialog for Hijri calendar for android

react-native-hijri-date-picker-android #This Module version is experimental, if you found any issues, kindly submit. Getting started Versions For Reac

Codelab 13 Jul 11, 2019
Awesome react-native cell components! From a Cell to more complex & awesome components.

RN Cell Components RN 0.60+ and up? Support for RN 0.60 is limited as the moment due to compatibility issues specially the deprecated ListView. Suppor

Jovanni Lo 175 Dec 28, 2021
A standard interface for your scrollable React Native components, making it easier to compose components.

ScrollableMixin ScrollableMixin lets your scrollable React Native components conform to a standard interface, making it easier to compose components.

Expo 93 Aug 18, 2019
A standard interface for your scrollable React Native components, making it easier to compose components.

react-native-scrollable-decorator The @scrollable decorator lets your scrollable React Native components conform to a standard interface, making it ea

Expo 38 Apr 3, 2019
PicPay Application using React Native, Expo, @react-navigation/native, @react-navigation/bottom-tabs, expo-linear-gradient and styled-components

React Native - PicPay Aplicaรงรฃo PicPay usando React Native, Expo, @react-navigation/native, @react-navigation/bottom-tabs, expo-linear-gradient e styl

Osvaldo Kalvaitir Filho 18 Jan 12, 2022
Beautifully crafted off canvas menu components for react native applications. Built on top of react-native's Animated library.

react-native-off-canvas-menu Beautifully crafted off canvas menu components for react native applications. Features - Gesture Support Orientation Comp

Provash Shoumma 404 Dec 30, 2021
react-native-webp adds support for WebP images for react-native components.

react-native-webp adds support for WebP images for react-native components. Installation npm install react-native-webp --save rnpm link (or manually a

Daniel Basedow 68 Jun 3, 2021
Based on pure JS scripts, without relying on native, no need for react-native link, Title / Header / Tabs / Sticky / Screen components can be flexibly configured, among which Tabs / Sticky can slide When it reaches the top, it will be topped.

react-native-scrollable-tabview English | ็ฎ€ไฝ“ไธญๆ–‡ Based on pure JS scripts, without relying on native, no need for react-native link,Title / Header / Tab

null 117 Jan 10, 2022
Highly customizable material design components for React Native

React Native Material UI (iOS and Android supported) Highly customizable material design components for React Native! Documentation Getting Started Us

Jiล™รญ Otรกhal 3.7k Jan 7, 2022
victory components for react native

Victory Native Usage Install victory-native: $ npm install victory-native --save Install react-native-svg: $ npm install react-native-svg --save Link

Formidable 2k Jan 13, 2022
An inline wrapper for calling out React Native components via tooltip

React Native Walkthrough Tooltip React Native Walkthrough Tooltip is a fullscreen modal that highlights whichever element it wraps. When not visible,

Jason Gaare 387 Jan 15, 2022
Semantic layout components for React Native

react-native-layout Semantic JSX layout components for react-native This library contains multiple easy-to-use react-native layout components which br

Christoph Jerolimov 56 Oct 20, 2021