joshjhargreaves / react-native-event-calendar Goto Github PK

Maybe it should be my mistake but i'm trying to change some events' color but it remains the same.

This issue relate to duyluonglc/react-native-events-calendar#10
Allow user handle event when presses to header to open date picker or something like that and use goToDate method to scroll to expect date

How to make events draggable like in full calendar?

Hello !

Is it possible to change the display format of the date according to the region ?

and onpress date open picker ?

thanks

We were wanting to use this library in a commercial setting, but we are unable to do so without a license. Is a license going to be added to the repo?

Hey,
when the differ between end to start is too small so the summary not show because the slot is too small,
how can I change it? to increase height of each event to show all details?

hi.
i create my project by using react-native init.
then i copy your src foder code to my demo project and run. but it says error.
how do i fix it?
could you export api ?
thank you.

Dear
This component is very good.
But i hope you can update to only show time in working hours, it is possible or not?

Hi,

Has anyone had any luck in creating a calendar that has events in rendered in specific columns. The use case is for a company's scheduling business. The goal is something very similar to this. But only for one day at a time

My initial idea was to set a x coordinate value to the event. I then change packer.js to render the events based on that. It has worked but margins and paddings tend to make the events either overlap, unevenly spaced or run of the end of the view.

Does anyone have any cleaner options that can work.

how to display 7 day in week

Is it possible to disable the Paging or change the code in a way, that it will change the day properly?

data just display on current day, size not working,

On android, I get this error message:

fontFamily "Helvetica Neue" is not a system font and has not been loaded through Font.loadAsync.

• If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.

• If this is a custom font, be sure to load it with Font.loadAsync.

• node_modules\react-native\Libraries\YellowBox\YellowBox.js:59:8 in error

• node_modules\expo-font\build\Font.js:24:16 in processFontFamily

• ... 24 more stack frames from framework internals

In fact Apple has replaced 'Helvetica' by 'Helvetica Neue' but Google on android prefers 'Robot'.
See also stack overflow question here: https://stackoverflow.com/questions/52069960/console-error-fontfamily-helvetica-neue-is-not-a-system-font-and-has-not-bee

Dear
I try to make new props of this project, how can i upload

<EventCalendar
            start={5}
            end={23}
            format24h={true}
            isShowTopEvent={true} //Shop Top Event or not
            sizeTopEvents={2} // number of events show on TOP
            heightTopEvents={26} // height of event on TOP
//showMoreIcon = {icon} 
            //showLessIcon = {icon}
            dateChanged={_onDateChange}
            eventTapped={_eventTapped}
            events={events}
            width={DEVICE_WIDTH}
            initDate={initDate}
            scrollToFirst={true}
            bottomMenuBottom={50}
            bottomMenuHeight={50}
            isLoading={isLoading}
// render Bottom Menu, can add button to add new calendar or setting
            renderBottomMenu={<View
                style={{flexDirection: "row", alignContent: "center", alignItems: "center", padding: 2}}>
                <View style={{
                    flex: 3,
                    borderWidth: 1,
                    borderColor: "#000000",
                    alignContent: "center",
                    alignItems: "center",
                    padding: 2
                }}><Text>Menu1</Text></View>
                <View style={{
                    flex: 3,
                    borderWidth: 1,
                    borderColor: "#000000",
                    alignContent: "center",
                    alignItems: "center",
                    padding: 2
                }}><Text>Menu1</Text></View>
                <View style={{
                    flex: 3,
                    borderWidth: 1,
                    borderColor: "#000000",
                    alignContent: "center",
                    alignItems: "center",
                    padding: 2
                }}><Text>Menu1</Text></View>
                <View style={{
                    flex: 3,
                    borderWidth: 1,
                    borderColor: "#000000",
                    alignContent: "center",
                    alignItems: "center",
                    padding: 2
                }}><Text>Menu1</Text></View>
            </View>}
        />

Is it possible to only load days where a event is planned?

The style for the <View> component used to render event items is calculated separately from the style for the <TouchableOpacity> component used to make the event handle touches, so as a result, parts of the view don't respond to presses. It would be pretty helpful to allow the entire visible area to be touchable, for a more intuitive user experience. Not sure if it's just a matter of making the entire view a touchable component instead (rather than view with a touchable as a child), or whether that would have bad side-effects. This could also be added with a new prop for whether to make the entire component touchable or not (so that current functionality wouldn't be altered, unless that prop was specified). Happy to open a PR if this would be ok.

Hi, i am not able to use of headerStyle props in this calendar,
i have to change the calendar header and body color dynamically.so please help me on ASAP.

i am unable to use onRef and _goToDate. Created reference but can't find _goToDate. Documentation not clear on how to use them

I want to get a changed date in the Event calendar but can't find any properties for that. There is no callback function for the changed date. Can you please suggest to me how can I achieve it?

• Warning: Failed child context type: Invalid child context virtualizedCell.cellKey of type number supplied to CellRenderer, expected string.

• Warning: componentWillReceiveProps is deprecated and will be removed in the next major version. Use static getDerivedStateFromProps instead. Please update the following components: DayView

Is there any workaround to show first event in timeline besides using scrollToFirst props? or to current time?

Only 1 day is visible when i move to other the View stay blank.

Hi
Is it possible to set an event over multiple days?
Thank you for any response!

Hello

I've been using this package for the project I am working on, but have needed some features that it does not have (some that have been brought up as issues). I have added these in my own fork of this, without any breaking changes from what I can tell. I would very much like to share these additions to this repo.

Additions include:

• Setting ref to EventCalendar to call methods (onRef prop)
• Ability to set header to upper case (upperCaseHeader prop)
• Callback for tapping / swiping to change date (dateChanged prop)
• Specify start and end times to show part of a day (start & end props)
• Override previous / next button icons by specifying own element (headerIconLeft & headerIconRight props)
• Method call to go to a specified date (_goToDate method)
• Override event background color by specifying the color attribute in the event object

You can view the updated readme.md here: https://github.com/RetroSGJacobs/react-native-event-calendar

it would be nice if when accessed directly focus on the red line, do you know how we can do it ?

Hi. Is it possible to drag and drop the diary event?
Thanks In Advance...

@duyluonglc I see on the iOS simulator, when swiping in either direction, sometimes I see blank screens. It looks to me like this is because we are using the onMomentumScrollEnd and setState to set the current date.

I think we might be able to achieve the same result without using setState and instead have VirtualizedList 'ask' for the items we wish to render for the given day/index in the calendar.

What do you think @duyluonglc ?

Anyone Know why i am getting this warning?
Here is my Package JSON
{
"name": "myApp",
"version": "0.1.0",
"private": true,
"devDependencies": {
"react-native-scripts": "1.14.0",
"jest-expo": "~27.0.0",
"react-test-renderer": "16.3.1"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "jest"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"expo": "^27.0.1",
"react": "16.3.1",
"react-native": "~0.55.2",
"react-native-events-calendar": "^1.0.8",
"react-native-material-cards": "^1.0.9",
"react-native-material-ui": "^1.30.1",
"react-native-vector-icons": "^5.0.0",
"react-navigation": "^2.9.3"
}
}
and here is the code snippet
import React from 'react';
import { StyleSheet, View , Text, SafeAreaView, Dimensions, ListView} from 'react-native';
import BottomNavigation from './utils/bottomNav'
import title from './utils/setTitle'
import EventCalendar from 'react-native-events-calendar'

const events = [
{ start: '2017-09-07 00:30:00', end: '2017-09-07 01:30:00', title: 'Dr. Mariana Joseph', summary: '3412 Piedmont Rd NE, GA 3032' },
{ start: '2017-09-07 01:30:00', end: '2017-09-07 02:20:00', title: 'Dr. Mariana Joseph', summary: '3412 Piedmont Rd NE, GA 3032' },
{ start: '2017-09-07 04:10:00', end: '2017-09-07 04:40:00', title: 'Dr. Mariana Joseph', summary: '3412 Piedmont Rd NE, GA 3032' },
{ start: '2017-09-07 01:05:00', end: '2017-09-07 01:45:00', title: 'Dr. Mariana Joseph', summary: '3412 Piedmont Rd NE, GA 3032' },
{ start: '2017-09-07 14:30:00', end: '2017-09-07 16:30:00', title: 'Dr. Mariana Joseph', summary: '3412 Piedmont Rd NE, GA 3032' },
{ start: '2017-09-08 01:20:00', end: '2017-09-08 02:20:00', title: 'Dr. Mariana Joseph', summary: '3412 Piedmont Rd NE, GA 3032' },
{ start: '2017-09-08 04:10:00', end: '2017-09-08 04:40:00', title: 'Dr. Mariana Joseph', summary: '3412 Piedmont Rd NE, GA 3032' },
{ start: '2017-09-08 00:45:00', end: '2017-09-08 01:45:00', title: 'Dr. Mariana Joseph', summary: '3412 Piedmont Rd NE, GA 3032' },
{ start: '2017-09-08 11:30:00', end: '2017-09-08 12:30:00', title: 'Dr. Mariana Joseph', summary: '3412 Piedmont Rd NE, GA 3032' },
{ start: '2017-09-09 01:30:00', end: '2017-09-09 02:00:00', title: 'Dr. Mariana Joseph', summary: '3412 Piedmont Rd NE, GA 3032' },
{ start: '2017-09-09 03:10:00', end: '2017-09-09 03:40:00', title: 'Dr. Mariana Joseph', summary: '3412 Piedmont Rd NE, GA 3032' },
{ start: '2017-09-09 00:10:00', end: '2017-09-09 01:45:00', title: 'Dr. Mariana Joseph', summary: '3412 Piedmont Rd NE, GA 3032' }
]

class HomeScreen extends React.Component {
constructor(props){
super(props)
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
events: ds.cloneWithRows(events)._dataBlob.s1,
}
}

static navigationOptions = title('Agenda')

render() {
console.log(this.state.events);
const width= Dimensions.get('window')
return (


<EventCalendar
events={this.state.events}
width={width.width}
initDate={'2017-09-08'}
/>

<BottomNavigation active={{active: this.props.navigation.getParam('active', 'agenda')}} navigate={this.props.navigation.navigate} />

);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'space-between',
},
safeArea: {
flex: 5,
}
});
export default HomeScreen;

This looks awesome! Any chance you'll be publishing a new version to npm some time soon? Seems like there have been a lot of changes lately that aren't in the version on npm. I guess it's not that big a deal, since it's possible to work around by using the github address for the dependency, just curious.

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

I have added the new feature: onTitlePress

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-events-calendar/src/EventCalendar.js b/node_modules/react-native-events-calendar/src/EventCalendar.js
index 4b27dc2..7efa4ea 100644
--- a/node_modules/react-native-events-calendar/src/EventCalendar.js
+++ b/node_modules/react-native-events-calendar/src/EventCalendar.js
@@ -79,7 +79,8 @@ export default class EventCalendar extends React.Component {
       virtualizedListProps,
       events,
       initDate,
-      formatHeader
+      formatHeader,
+      onTitlePress
     } = this.props
     return (
       <View style={[this.styles.container, { width }]}>
@@ -87,7 +88,9 @@ export default class EventCalendar extends React.Component {
           <TouchableOpacity onPress={() => this._goToPage(this.state.index - 1)}>
             <Image source={require('./back.png')} style={this.styles.arrow} />
           </TouchableOpacity>
-          <Text style={this.styles.headerText}>{this.state.date.format(formatHeader || 'DD MMMM YYYY')}</Text>
+          <TouchableOpacity onPress={onTitlePress}>
+            <Text style={this.styles.headerText}>{this.state.date.format(formatHeader || 'DD MMMM YYYY')}</Text>
+          </TouchableOpacity>
           <TouchableOpacity onPress={() => this._goToPage(this.state.index + 1)}>
             <Image source={require('./forward.png')} style={this.styles.arrow} />
           </TouchableOpacity>

This issue body was partially generated by patch-package.

I can't find the files mentioned so I can't try to fix the error,
anybody got an idea?

I use the exact code from the example

Hello! I am using the library but when I do the compilation it brings me the data only on the iOS platform on the Android platform it shows nothing! Attached captures, do you know why it is?

hi Josh firstly thanks for your effort,

I do not see the same results as you,
and I do not know why ?

Hi. Is it possible to drag and drop the diary event?

Thanks In Advance...

Have any more guidance for the API documentation? I could really use this package, and don't know how to enter events.

Running 'yarn flow' in repository root yields a tonne of errors.
Find and fix the cause of issues.