rghorbani/react-native-general-calendars

React Native Calendar Components 📆

react-native-general-calendars's Issues

feature request: add time picker to library

It's would be great if your library has time picker.

Issue with re-render

After onDayPress and changing component state, the calendar list does not re-render.

Video example
https://monosnap.com/file/XIqCU55VnNFNtsqnsf5hs5WZ9J52EY

I try'ed in several ways to paste the code in a way that you could see, but looks like github WYSYWYG is not prepared to accept code 🌊

`

onDayPress(date) {
console.log('Selected day : ')
console.log(date)
const selectedDate = date.dateString

    let marked = true
    if (this.state.markedDates[selectedDate]) {
        // Already in marked dates, so reverse current marked state
        marked = !this.state.markedDates[selectedDate].selected
    }

    // Create a new object using object property spread since it should be immutable
    // Reading: https://davidwalsh.name/merge-objects
    const updatedMarkedDates = { ...this.state.markedDates, ...{ [selectedDate]: { 'selected': marked } } }

    this.setState({
        selectedDate: selectedDate,
        markedDates: updatedMarkedDates,
    })
}`

DatePicker

Can you show me how can I use DatePicker?
How can I set default value?

npm ERR! code ELIFECYCLE

E:\manager>npm install react-native-general-calendars

> [email protected] postinstall E:\manager\node_modules\react-native-interactable
> ln -sf lib/{ios,android} .

'ln' is not recognized as an internal or external command,
operable program or batch file.
npm WARN [email protected] requires a peer of eslint@^3.17.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react-native@^0.51 || ^0.52 || ^0.53 || ^0.54 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react-native-web@* but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react@^0.14.6 || ^15.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @expo/[email protected] (node_modules\@expo\ngrok-bin-freebsd-ia32):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @expo/[email protected]: wanted {"os":"freebsd","arch":"ia32"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @expo/[email protected] (node_modules\@expo\ngrok-bin-darwin-ia32):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @expo/[email protected]: wanted {"os":"darwin","arch":"ia32"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @expo/[email protected] (node_modules\@expo\ngrok-bin-darwin-x64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @expo/[email protected]: wanted {"os":"darwin","arch":"x64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @expo/[email protected] (node_modules\@expo\ngrok-bin-freebsd-x64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @expo/[email protected]: wanted {"os":"freebsd","arch":"x64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @expo/[email protected] (node_modules\@expo\ngrok-bin-linux-arm):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @expo/[email protected]: wanted {"os":"linux","arch":"arm"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @expo/[email protected] (node_modules\@expo\ngrok-bin-linux-ia32):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @expo/[email protected]: wanted {"os":"linux","arch":"ia32"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @expo/[email protected] (node_modules\@expo\ngrok-bin-linux-arm64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @expo/[email protected]: wanted {"os":"linux","arch":"arm64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @expo/[email protected] (node_modules\@expo\ngrok-bin-sunos-x64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @expo/[email protected]: wanted {"os":"sunos","arch":"x64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @expo/[email protected] (node_modules\@expo\ngrok-bin-linux-x64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @expo/[email protected]: wanted {"os":"linux","arch":"x64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @expo/[email protected] (node_modules\@expo\ngrok-bin-win32-ia32):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @expo/[email protected]: wanted {"os":"win32","arch":"ia32"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: `ln -sf lib/{ios,android} .`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\shaha\AppData\Roaming\npm-cache\_logs\2018-07-02T10_08_25_856Z-debug.log

upon npm install
could you please address this Mr. Ghorbani ?

this is my package.json file :

"dependencies": {
    "@types/react": "^16.4.6",
    "@types/react-native": "^0.55.26",
    "download": "^7.0.0",
    "expo": "^27.0.1",
    "mobx": "^4.3.1",
    "mobx-react": "^5.2.3",
    "native-base": "^2.6.1",
    "parse": "^1.11.1",
    "react": "^16.4.1",
    "react-native": "~0.55.2",
    "react-native-animatable": "^1.3.0",
    "react-native-elements": "^0.19.1",
    "react-native-router-flux": "^4.0.0-beta.31"
  }
}

this calendar is not designed for selecting Birthday ??

hello

is possible to surf between years fast in this Calendar ??

my user wanna select birthday but how with this component ???

<CalendarList // Calendar type (gregorian, jalaali). Default = gregorian type='jalaali' onDayPress={(day, localDay) => this.onDateChange(day)} // 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} />

jalaali wrong result

@rghorbani type="gregorian" works well but , jalaali is not

<Calendar
  type="jalaali"
  onDayPress={(day, localDay) => {console.log('selected day', day.dateString, localDay.dateString)}}
  onDayLongPress={(day, localDay) => {console.log('selected day', day.dateString, localDay.dateString)}}
/>

logged console is :

selected day ۰۶۲۱-۰۳-۲۱ ۰۰۰۰-۰۱-۰۱

undefined is not an object (evaluating 'ToolbarAndroid.propTypes')

This error is shown when I upgrade react-native version to 0.61.1

next & previous month issue

Dear Reza
When I have configured type="jalaali" in the calendar component, In some situations, next month stop working.
I have traced code and found below expression in updateMonth method cause unwanted response:
if (day.format('YYYY MM') === this.state.currentMonth.format('YYYY MM')) { return; }
when I removed above code in updateMonth my problem was solved.
Could you say what is this code for?

OnDayPress selected date is not highlighted

When try to select the other date its not get highlighted even current date

Error while running command npm install

I am trying to run provided example but gives this error while executing npm install command
npm ERR! code EUNSUPPORTEDPROTOCOL
npm ERR! Unsupported URL Type "link:": link:..

Requiring unknown module "./locale/fa"

Android 4.2.2 in release mode i got this runTime error:
com.facebook.react.common.JavascriptException: Requiring unknown module "./locale/fa"., stack:

"react-native-general-calendars": "^1.8.0",
"react-native": "0.51.0",

 <Calendar
                    type='jalaali'
                    hideExtraDays={true}
                    onDayPress={this.onDateChoose}
                    theme={{
                        textSectionTitleColor: '#b6c1cd',
                        selectedDayBackgroundColor: '#2b8ce5',
                        todayTextColor: '#2b8ce5',
                        dayTextColor: '#2d4150',
                        monthTextColor: '#0037a9',
                        textDayFontFamily: 'IRANSansMobileFaNum',
                        textMonthFontFamily: 'IRANSansMobileFaNum',
                        textDayHeaderFontFamily: 'IRANSansMobileFaNum',
                        textDayFontSize: fontSize36,
                        textMonthFontSize: fontSize36,
                        textDayHeaderFontSize: 12
                    }}
                />

agenda support?

I can not use agenda with type="jalaali" and it is english. Is agenda supported?

same as https://github.com/wix/react-native-calendars

How is this lib different from https://github.com/wix/react-native-calendars?

افزودن agenda

سلام و خیلی متشکر از زحمتی که کشیدی بابت شمسی کردن تقویم این کامپوننت

اگر ممکن هست زود تر agenda رو هم اضافه کن

error: bundling failed: SyntaxError: Unexpected reserved type (any, string, func, Boolean )

File Name : AuthSignUpContainer.js:

error: bundling failed: SyntaxError: Unexpected reserved type any. (14)
error: bundling failed: SyntaxError: Unexpected reserved type func. (16)

13 | type Props = {

14 | AuthSignUpReducer: PropTypes.any,
| ^
15 | authSignUpReset: PropTypes.func,
16 | authSignUpDismissMessages: PropTypes.func,
17 | };

Element type is invalid

Description

After updating react-native to 0.61.4, the following error appears:

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Reproducible Demo

import { Calendar } from 'react-native-general-calendars';

const Component = () => {
  return (
    <Calendar
      markedDates={{ '2012-05-17': { marked: true } }}
    />
  );
};

Environment

• react-native 0.61.4 (Expo SDK 36.0.0)
• react-native-general-calendars 1.11.0

How to use localization?

I can not change calendar localization, please provide more detail on this subject, in your wiki.

where exactly I must put this code?

import Moment from 'moment';

Moment.locales('fr', {
  months : 'janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre'.split('_'),
    monthsShort : 'janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.'.split('_'),
    monthsParseExact : true,
    weekdays : 'dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi'.split('_'),
    weekdaysShort : 'dim._lun._mar._mer._jeu._ven._sam.'.split('_'),
    weekdaysMin : 'Di_Lu_Ma_Me_Je_Ve_Sa'.split('_'),
    weekdaysParseExact : true,
});

Update on the Unexpected reserved type string (26:30) error ?

Hello I would like to know if there are any update on this issue with RN 0.62.2 ?

Thank you a lot for your package

node_modules\react-native-common\src\components\other\SegmentedControl.js: Unexpected reserved type string (26:30)

  24 |   static propTypes: {
  25 |     values: PropTypes.array,
> 26 |     selectionColor: PropTypes.string,
     |                               ^
  27 |     selectedIndex: PropTypes.number,
  28 |     onChange: PropTypes.func,
  29 |     titleStyle: PropTypes.any,

Jalaali calendar does not work correctly when "current" props set by jalaali date

Here is my code,
when I set correspond gregorian date or not set the current props, calendar is working properly and it set to current date of system in jalaali mode. but it doesn't when I manually set the date in props.

export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
          <Calendar
              type="jalaali"
              current="1397-05-28"
              onDayPress={(day, localDay) => {console.log('selected day', day, localDay)}}
              // Handler which gets executed when press arrow icon left. It receive a callback can go back month
              onPressArrowLeft={substractMonth => substractMonth()}
              // Handler which gets executed when press arrow icon left. It receive a callback can go next month
              onPressArrowRight={addMonth => addMonth()}
              style={{
                  borderWidth: 1,
                  borderColor: 'black',
                  height: 350
              }}
              // Specify theme properties to override specific styles for calendar parts. Default = {}
              theme={{
                  backgroundColor: '#ffffff',
                  calendarBackground: '#ffffff',
                  textSectionTitleColor: '#b6c1cd',
                  selectedDayBackgroundColor: '#00adf5',
                  selectedDayTextColor: '#ffffff',
                  todayTextColor: '#00adf5',
                  dayTextColor: '#2d4150',
                  textDisabledColor: '#d9e1e8',
                  dotColor: '#00adf5',
                  selectedDotColor: '#ffffff',
                  arrowColor: 'orange',
                  monthTextColor: 'blue',
                  textDayFontFamily: 'monospace',
                  textMonthFontFamily: 'monospace',
                  textDayHeaderFontFamily: 'monospace',
                  textMonthFontWeight: 'bold',
                  textDayFontSize: 16,
                  textMonthFontSize: 16,
                  textDayHeaderFontSize: 16
              }}
          />
      </View>
    );
  }
}

for more details, I bring here result of onDayPress function.

result of press on day 1

'selected day', { year: 1397,
                   month: 5,
                   day: 21,
                   timestamp: -18069955200000,
                   dateString: '1397-05-21' }, { year: 776,
                   month: 3,
                   day: 1,
                   timestamp: -18069955200000,
                   dateString: '0776-03-01' }

result of press on day 15

'selected day', { year: 1397,
                   month: 6,
                   day: 4,
                   timestamp: -18068745600000,
                   dateString: '1397-06-04' }, { year: 776,
                   month: 3,
                   day: 15,
                   timestamp: -18068745600000,
                   dateString: '0776-03-15' }

Is it a bug or I am doing something wrong in my code?

install your libarary but it has error

error: bundling failed: SyntaxError: D:\mobileProject\sample_project\node_modules\react-native-jalali-date-picker-rtl\WeekDaysLabels.js: Unexpected reserved type number (24:27)

22 | class WeekDaysLabels extends React.Component {
23 | static propTypes: {

24 | screenWidth: PropTypes.number,
| ^
25 | textStyle: Text.propTypes.style
26 | };

in react native 0.61

Support Typescript

Hi. Do you have any plans to support typescript? thanks.

Unexpected reserved type string

I upgraded to react-native 0.59.10 but bundling is failed:

`react-native-common\src\components\SegmentedControl.js: Unexpected reserved type string (20:30)

18 | static propTypes: {
19 | values: PropTypes.array,

20 | selectionColor: PropTypes.string,
| ^
21 | selectedIndex: PropTypes.number,
22 | onChange: PropTypes.func,
23 | titleStyle: PropTypes.any,
at Object.raise (@react-native-community\cli\node_modules\metro-react-native-babel-transformer\node_modules@babel\parser\lib\index.js:7012:17)`

null is not an object

installed library with react-native 61.2 , and userd sample
but gets error

below is the code

import * as React from 'react';
import { View, TouchableOpacity, Image, Text, StyleSheet } from 'react-native';
import { Calendar, CalendarList, Agenda } from 'react-native-general-calendars';

class App extends React.Component {
constructor() {
super()

}

render() {
return (



);
}
}
export default App;
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 40,
},
});

horizontal CalendarList problem with modal

The vertical version works just fine inside my <Modal> without any weird behavior.
But when i set horizontal={true}, at first the Calendar gets rendered for a brief moment and i can see it but then it suddenly disappears.

Here's my code:

import React, { Component } from 'react';
import { Modal, View, ... } from 'react-native';
import { Container, Button, ... } from 'native-base';

class Archive extends Component<Props> {
  ...
  render() {
    return (
      <Container>
         <View>
           <Modal
              animationType="fade"
              transparent={true}
              visible={this.state.modalToDateVisible}
              onRequestClose={() => {
              this.setState({modalToDateVisible:false})
            }}>
            <View style={{alignItems:'center', justifyContent:'center', flex: 1, flexDirection: 'column', backgroundColor:'rgba(0, 0, 0, 0.5)'}}>
              <View style={{width:'95%', backgroundColor:'#F6F7F9', padding: 20 }}>
                <CalendarList
                  horizontal={true}
                  pagingEnabled={true}
                  type='jalaali'
                />
                <View style={{marginTop:20}}>
                  <Button onPress={()=>this.closeToDateModal()}
                    <Text style={{fontSize:20}}>Close</Text>
                  </Button>
                </View>
              </View>
            </View>
         ...
     );
   }
}

i tried :

• changing its parent from <View> to horizontal <ScrollView>
• all permutation of styling (absolute fill parent, zIndex and other stuff)

BTW: it works outside my Modal and the normal <Calendar> works too.

Thanks in advance

How to get selected day name?

Persian digits and fonts ?

is it possible to have Persian font's like for weeks and month and Persian digits for days ?

How to use `RN-General-Calendars` for Shamsi/Jalali Date ?

Hello and say Thank u for this powerful package.
I've just develop a reservation application for Android and IOS.
I need a clean and fast datePicker like this package, but i want to use Shamsi/Jalali date.
How can i set RN-General-Calendars to jalali moment ?

how to access to Start and END date

i want to send start and end date to server
how to give start and end from calendar?

selected Day Color is not changed when select a day

when i select a day color not change

listview has been removed from react native

Hi,
I got this error while use this library.

Selected Date Style

I can't seem to get the current selected date to show a blue (or any color) dot around the date. My code is:

`
class AddChildForm extends Component<Props, State> {
constructor(props) {
super(props);
this.state = { dob: new Date(), dobModal: true };
}

handleDateChange = (dob) => {
this.setState({ dob, dobModal: false });
}

handleDOBModal = () => {
this.setState({ dobModal: true });
}

render() {
const { name, dob, gender, dobModal } = this.state;

return (
  <KeyboardAvoidingView behavior="position" enabled contentContainerStyle={styles.keyboardContainer}>
    <View style={styles.bottomHalfContainer}>
      <View style={styles.formContainer}>
        {/* DOB MODAL */}
        <Modal
          animationType="slide"
          transparent={false}
          visible={dobModal}
        >
          <View style={{ marginTop: 22, flex: 1 }}>
            <Calendar
              markingStyle="period"
              monthFormat="MMMM YYYY"
              current={dob}
              onDayPress={this.handleDateChange}
              firstDay={1}
            />
          </View>
        </Modal>
      </View>
    </View>
  </KeyboardAvoidingView>
);

}
}
`

The currently selected date doesn't seem to work with no styles defined or with this:

theme={{ textSectionTitleColor: '#b6c1cd', selectedDayBackgroundColor: '#00adf5', selectedDayTextColor: '#ffffff', }}

error when install react-native-general-calendars

hi
when install react-native-general-calendars
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: ln -sf lib/{ios,android} .
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

How to change year

Thanks for this great component but how the year can be picked?