wix / react-native-calendars Goto Github PK
View Code? Open in Web Editor NEWReact Native Calendar Components ποΈ π
License: MIT License
React Native Calendar Components ποΈ π
License: MIT License
There is some kind of documentation besides the README.md file?
Hi,
There seems to be quite a lag in the scroll of the CalendarList. What seems to happen is while scrolling between months, the month detail will disappear and the month name will only be displayed. This seems to happen when scrolling quickly through the months.
The second issue with responsiveness is related to selecting days on a calendar. There seems to be quite a lag in the highlighting process while tapping on different days.
Are there any properties I could use to speed this up?
Thanks in advance for all your help.
I'd like to use this component for all date related needs but it looks it is not a practical fit for selecting dates too far in the past such as birthdays since it doesn't have support to select directly month and year. Having to select a date in the 1970's, 1980's, etc. by manually navigating month by month is not UX/time saving friendly.
Is there any plans to allow to select directly year and month?
Thank you in advance for your attention.
What do you think of adding proptypes and flow types for this package?
Need to block only one date or multiple dates !!!! ???
did you consider using FlatList instead of ListView?
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
While theme can change some global properties of the calendar, it does not take into account the text and base styles.
For example:
theme={{
todayTextColor: 'red',
base: { width: 20, height: 20, justifyContent: 'center' },
text: { marginTop: 0, fontSize: 13.5, }
}}
only update the todayTextColor.
Also I noticed there's a default 32 width for the day box in calendar which can also needs to take the value from the theme base style.
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;
Hi, I'm trying to create a CalendarList after I click on a button. So, I decided to navigate the view to FilterDateScreen.js using StackNavigator react-navigation and show a CalendarList.
Here is my Code inside FilterDateScreen.js
<CalendarList onVisibleMonthsChange={(months) => {console.log('now these months are visible', months);}} pastScrollRange={50} futureScrollRange={50} scrollEnabled />
It shows nothing inside FilterDateScreen until I scroll it a bit. I have test it without using any react-navigation StackNavigator and it works fine (no scroll is needed). What am i missing?
When I press a date in the CalendarList component, the date does not get visibly marked. This is due to the CalendarList not rendering it's subcomponents. When I scroll the selected date out of view, and roll it back into view it is visibly marked. This happens with the code below, but also with the example in this repository. This also happens to Calendar, of course, because CalendarList consists of Calendar components.
import React, { Component } from 'react'
import { CalendarList } from 'react-native-calendars'
export default class CalendarsList extends Component {
constructor(props) {
super(props)
this.state = {
today: new Date(),
markedDates: {}
}
}
onDayPress = day => {
const markedDates = this.state.markedDates
const dateString = day.dateString
if (markedDates.hasOwnProperty(dateString)) {
delete markedDates[dateString]
} else {
markedDates[dateString] = { selected: true }
}
this.setState({ markedDates })
}
render() {
const { today, markedDates } = this.state
return (
<CalendarList
minDate={today}
pastScrollRange={0}
futureScrollRange={12}
onDayPress={this.onDayPress}
markedDates={markedDates}
/>
)
}
}
Please review your readme. There are a ton of typos and missing brackets.
Your product is really appreciated though ;)
What do you think of refactor the example to use create-react-native-app, and use react-navigation instead of react-native-navigation
I have this error when running the example:
RCCManager.h file not found
For example, disabled 4th, 7th, 22th in May.
Is there a way to control row height? Something we can set in theme prop?
There is a simple away to disable days before the current day?
Ex.: Disable all days before today
Or there is a milestone to implement that? Thanks.
Currently there is no way to change the locale for months and weekdays. Defaults are in english.
Possible solutions suggestions:
Add a monthNamesHash (or only monthNames) prop that would map the english months to user defined ones. (ex.: { 'January': 'Janvier', 'February': 'FΓ©vrier', ... }). Same thing for weekdays (ex.: { 'Sun': 'Dim', 'Mon': 'Lun', ...}). Then use those hash in CalendarHeader.
Or
Add a locale prop to the calendar component. (ex.: 'en' | 'fr' | 'de' , default: 'en'), add supported locales to XDate configuration, then use the locale when formatting the months and weekdays in CalendarHeader. Example
Is there anyway to override styles of knob of agenda ?
Hello, great component !
Changing the component's theme is not working as intended when using markingType="interactive". Days styles are not applied correctly (dayTextColor, todayTextColor, etc..). Here's two examples with markingType="interactive" and markingType="simple" and with only that prop changed.
markingType="simple"
markingType="interactive"
Here's my code:
<CalendarList
markedDates={markedDates}
onDayPress={this.onPress}
markingType="interactive" // markingType="simple"
theme={{
calendarBackground: '#333248',
textSectionTitleColor: 'white',
dayTextColor: 'white',
todayTextColor: 'white',
selectedDayTextColor: 'white',
monthTextColor: 'white',
selectedDayBackgroundColor: '#333248'
}}
/>
I checked the source code a bit, and if I understand correctly, the days are rendered by a different component if markingType="interactive". I'm guessing this other component is handling the theme prop incorrectly?
I would like to mark all Mondays in the calendar until 2018
I try use react-native-calendars in my android-device, but the component occured a PR in my android-device.
1.I selected 2017-5-24 in the calendar
2.I try slide up or slide down and want to select other Date
3.but the calendar alway return to 2017-5-24
Devices Version: Android4.3/Android 5.1.1
"react": "15.4.2",
"react-native": "^0.41.2",
"react-native-calendars": "^1.2.17",
I need to implement this:
Right now it is not possible because of this key
:
https://github.com/wix/react-native-calendars/blob/master/src/calendar/header/index.js#L83
I will send a pr to use the index
of map
instead
This is a reference to #58.
I am using the prop renderItem={(item, firstItemInDay) => {return ();}}
The callback works, but the problem is that it cuts on the first Item near the date.
My code is this:
renderItem(item,firstItemInDay) {
if(firstItemInDay){
return(
)
}
return (
<TouchableOpacity style={[styles.item, {height: item.height}]}>
{item.start} - {item.end}
{item.full_name}
);
}
Just returning an empty view hides an item that is next to the date.
On my screenshot, next to the date 8Thu there should be another appointment, but for some reason it does not display when using the callback. Am I doing something incorrect?
Thanks
Hello,
Is there an option to display 2 markedDays group for ex:
(1/5/2017 - 10/5/2017) AND (10/5/2017 - 15/5/2017). How can i do that? The 10/5/2017 is end date for the first group and start date for the second. Also is there an option to have a Thumbnail on the start days??
Is there any plan for providing gesture support ? such as swipe down to expand the agenda ?
Possible to set all dates "disabled" except those marked dates configured?
Something similar to https://github.com/wix/react-native-calendars#date-marking, the differences are:
<Calendar
// Collection of dates that have to be marked. Default = {}
markedDates={{
'2012-03-16': {marked: true},
'2012-05-03': {marked: true},
'2012-06-28': {disabled: true}
}}
/>
Using some sample data to pass into the CalendarList component, yet the dates are not marked.
<CalendarList
onDayPress={(day) => { console.log('selected day', day) }}
markedDates={{
'2017-05-24': { selected: true, marked: true },
'2017-05-25': { marked: true },
'2017-05-26': { disabled: true },
}}
/>
There's no way to set a custom font family for the text in the calendars. Maybe add a fontFamily attribute in the theme prop that will be applied to every text styles?
I'm creating a lot of issues... I can make a pull request if you want. Just let me know how you want to implement it.
Hello,
I really appreciate this plugin. It's really amazing. I am just having trouble with adding a plus Icon using the Agenda component. I would like to have a plus Icon rendered once per day. As of now, I am able to get the Icon to display, but the problem is that it displays a plus Icon for every appointment. I know it's in a loop and I probably could get it to work with a bit of logic, but I was wondering if there might be a simpler way of achieving this. Hopefully, I am clear, but I have added . a picture on what I am trying to acheive.
https://blog-setmore.storage.googleapis.com/android_wheely.gif
I'm touching on some days in the calendar, but they are not imediately changing the background colors. It only updates the colors when I change the month back and forth.
`<Calendar
current={minDate}
minDate={minDate}
maxDate={maxDate}
displayLoadingIndicator
onDayPress={this.onDayPress}
markedDates={datesMarked}
theme={{
calendarBackground: '#ffffff',
textSectionTitleColor: '#b6c1cd',
selectedDayBackgroundColor: '#7AD8FB',
selectedDayTextColor: '#ffffff',
todayTextColor: '#7AD8FB',
dayTextColor: '#2d4150',
textDisabledColor: '#d9e1e8',
dotColor: '#7AD8FB',
selectedDotColor: '#ffffff',
base: { width: 20, height: 20, justifyContent: 'center' },
text: { marginTop: 0, fontSize: 8.5, }
}}
hideExtraDays={true}
markingType={'interactive'}
/>
`
Thanks.
On android with RN0.43.4. Just trying out the example.
I was using exactly the same code as the example in AgendaScreen. When I press the date on top of the agenda list, the above error shown.
I've found that only when I touch the Text area the error will occur. Try avoid the text when touching the date and there will be NO error.
Probably related to this http://stackoverflow.com/questions/43674781/undefined-is-not-and-object-evaluating-propsregistrationname
i install version v1.2.15
selectedDayBackgroundColor not work
my current date ={'2017-05-24
'}
<CalendarList
current={this.state.currentDate}
onDayPress={(day) => {console.log('selected day', day)}}
onMonthChange={(month) => {console.log('month changed', month)}}
pastScrollRange={24}
futureScrollRange={24}
theme={{
calendarBackground: '#333248',
textSectionTitleColor: 'white',
dayTextColor: 'white',
todayTextColor: 'white',
selectedDayTextColor: 'green',
monthTextColor: 'white',
selectedDayBackgroundColor: 'green'
}}
/>
Hi! I'm trying to make the selected day a box, with no radius. I'm not sure I can just outright change the styles for this? Can anyone please clarify this in the docs? Thanks!
I'm trying to use an interactive CalendarList, but it doesn't seem to work?
<CalendarList
onDayPress={(day) => { console.log('selected day', day); }}
pastScrollRange={0}
futureScrollRange={12}
scrollEnabled
markingType={'interactive'}
/>
This is all of my code. When I tap a day, it logs properly but nothing in the UI changes. Any ideas?
Hi.awesome lib!
Is there any way to enable us to define the range of the agenda when it expand ? just like only showing one year. Thanks. :-)
I create new project and try to add this component it does not work? But earlier (V 0.44) it is working?
Hey,
Love the calendar! :)
One issue though. I'm trying to implement it so the user can select certain dates for an event they're hosting.
Now, selecting dates works great but unselecting seems to be an issue:
https://www.dropbox.com/s/u95gkubrtrmjul0/calendar-issue.mov?dl=0
I've made a quick video.
My calendar implementation looks like this:
<Calendar
current={'2017-05-16'}
minDate={'2017-05-10'}
maxDate={'2017-05-29'}
firstDay={1}
selected={ this.state.marked }
onDayPress={ day => this.onSelect( day ) }
this.onSelect() just changes the array. The updating for adding/removing dates works correctly however the calendar is not updating accordingly.
Is this something that should be working?
Thanks!
I want to be able to select a start date and end date and then all the dates in between are marked automatically.
I am thinking if we could be able to pass a prop to the calendar component to allow such behaviour or is the functionality currently implemented.
Thanks and Keep up the good work.
I have issue with divider in the middle of the date in set of markedDates. Please see attach.
This is my markedDates:
markedDates={
{'2012-05-20': [{textColor: 'green'}],
'2017-06-07': [{startingDay: true, color: '#d4ff2a', textColor: 'black'}],
'2017-06-08': [{color: '#d4ff2a', textColor: 'black'}],
'2017-06-09': [{color: '#d4ff2a', textColor: 'black'}],
'2017-06-10': [{color: '#d4ff2a', textColor: 'black'}],
'2017-06-11': [{endingDay: true, color: '#d4ff2a', textColor: 'black'}],
'2017-06-20': [{startingDay: true, color: '#d4ff2a', textColor: 'black'}, {endingDay: true, color: '#d4ff2a', textColor: 'black'}]
}
}
My version is:
"react-native-calendars": "^1.4.0",
I have found temporary fix by adding marginRight: -1 and marginLeft: -1 for styles leftFiller and rightFiller in \node_modules\react-native-calendars\src\calendar\day\interactive\style.js
leftFiller: {
height: FILLER_HEIGHT,
flex: 1,
marginRight: -1
},
rightFiller: {
height: FILLER_HEIGHT,
flex: 1,
marginLeft: -1
},
But could you please address this issue in the next releases.
Thank you.
If I select any date where the day or month is below 10 (1st of January 2017 for example), the onDayPress event returns single digits for the day and month properties.
The selected property however, does not accept dates such as "2017-1-1", it needs them to be in the double digit format, for example "2017-01-01".
For my use case, I am saving the selected date and having to manually add the "0" in front of days and months that are below 10, so that I can keep the selected date state, which is not ideal.
const prefixZeroToNumber = number => ((number < 10) ? `` 0${number} `` : number);
I don't know whether the best solution is to change the selected property to accept single digit numbers, or have the onDayPress event parameter output the double digit number, but I feel like this will be a common use case that people will have to work around.
Hi,
How to limit months to show on CalendarList . Like this (5/2017 -> 5/2018)
Thanks.
How to disable a row of days, like all Sundays or all Saturdays?
Hi,
I am very new to React native and working on Calendar App. I really like this calendar Agenda view.
I want to set the today's date on button click in Agenda view or move to a different month -
https://hub.mangoapps.com/sf/ODcxNzZfMTMyNzE0NQ .
Is it possible to set the date?
I must be missing something super simple. But using the example, when I set the markedDates like this:
markedDates={{
'2012-05-21': [{startingDay: true, color: 'blue', selected: true}],
'2012-05-24': [{endingDay: true, color: 'blue', selected: true}]
}}
Why aren't all the days from 5/21 - 5/24 selected and colored in Blue? When I run this all i see is are two days marked.
Thanks again for this component, I think its going to be what i need.
If you select a date with items and then scroll to an empty date the day
prop becomes undefined and causes an error. See screenshot / gif
I'm also unable to set the renderEmptyDate
option within the component, all I see is a loading spinner. We're using the following:
renderEmptyDate={() => { return (<Text>There are no events</Text>) }}
Any help would be appreciated, thanks for your time and effort
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.