acro5piano / react-native-big-calendar

gcal/outlook like calendar component for React Native
https://react-native-big-calendar.vercel.app
MIT License
441 stars 145 forks source link

onPressEvent not working properly #1017

Open Featuredutka opened 7 months ago

Featuredutka commented 7 months ago

I have created two custom event renderers for my component

For month view:


const renderMonthCircular = (data) => {
    if (data.name === events[0].name){
      return (
        <View style={{
          backgroundColor:theme.colors.primary, 
          borderRadius:10, 
          marginTop:'5%',
          height:'70%',
          alignContent:'center',
          alignItems:'center',
          justifyContent:'center'
        }}>
          <Text style={{
            color:'white'
          }}>Termine heute - {events.length}</Text>
        </View>
        )
    }
    return null
  }

For day view:

const renderDay = (data) => {
      console.log(data.end)
      return (
        <TouchableOpacity>
        <Container fluid>
          <View style={{
            backgroundColor:theme.colors.primary, 
            borderRadius:10, 
            // marginTop:'5%',
            height:70,
            alignContent:'center',
            alignItems:'center',
            justifyContent:'center',
            flexDirection:'row'
          }}>
            <Col sm={2}>
              <View style={{flexDirection:'column', justifyContent:'center', alignItems:'center', height:'100%'}}>
                <Text style={{color: '#ffffff', fontSize: 12}}>
                  {dayjs(data.start).format('HH:mm') + ' - ' +  dayjs(data.end).format('HH:mm')}
                </Text>
              </View>
            </Col>

            <Col sm={7}>
              <View style={{flexDirection:'column', justifyContent:'center', alignItems:'center', height:'100%', justifyContent:'space-evenly'}}>
                <View style={{flexDirection:'row', justifyContent:'flex-start', width:'100%'}}>
                  <Col sm={12}>
                    <Text style={{color: '#ffffff', fontSize: 12}}>
                      {data.common.NAME1}
                    </Text>
                  </Col>
                </View>

                <View style={{flexDirection:'row', justifyContent:'flex-start', width:'100%'}}>
                  <Col sm={6}>
                    <Text style={{color: '#ffffff', fontSize: 12}}>
                      {data.common.EBELN}
                    </Text>
                  </Col>

                  <Col sm={3}>
                    <Text style={{color: '#ffffff', fontSize: 12}}>
                      {data.common.ZHOLZ}
                    </Text>
                  </Col>

                  <Col sm={3}>
                    <Text style={{color: '#ffffff', fontSize: 12}}>
                      {data.common.FM + ' FM'}
                    </Text>
                  </Col>
                </View>

                <View style={{flexDirection:'row', justifyContent:'flex-start', width:'100%'}}>
                  <Col sm={6}>
                    <Text style={{color: '#ffffff', fontSize: 12}}>
                      Auftragsnummer
                    </Text>
                  </Col>

                  <Col sm={3}>
                    <Text style={{color: '#ffffff', fontSize: 12}}>
                      {data.common.LOSNR}
                    </Text>
                  </Col>
                </View>
              </View>
            </Col>

            <Col sm={3}>
              <View style={{flexDirection:'column', justifyContent:'center', alignItems:'center', height:'100%', justifyContent:'space-evenly'}}>
                <View style={{flexDirection:'row', justifyContent:'flex-start', width:'100%'}}>
                  <Col sm={12}>
                    <Text style={{color: '#ffffff', fontSize: 12}}>
                      {data.common.REVIER}
                    </Text>
                  </Col>
                </View>

                <View style={{flexDirection:'row', justifyContent:'flex-start', width:'100%'}}>
                  <Col sm={12}>
                    <Text style={{color: '#ffffff', fontSize: 12}}>
                      {data.common.STK + ' Stk.'}
                    </Text>
                  </Col>
                </View>

                <View style={{flexDirection:'row', justifyContent:'flex-start', width:'100%'}}>
                  <Col sm={12}>
                    <Text style={{color: '#ffffff', fontSize: 12}}>
                    </Text>
                  </Col>
                </View>
              </View>
            </Col>
          </View>
        </Container> 
        </TouchableOpacity>

      )
  }

The Calendar component should render elements and choose onEventPress action based on current active view - I am using state to manage that.

Surprisingly enough only the monthly onEventPress works - no matter how I change the structure of the returned daily component - onPress is not doing anything at all - even if I make those custom events identical

Could you please explain if there's a misnderstanding about Calendar component functionality from my side or some kind of error

Calendar component code:


                <Calendar
                    hourRowHeight={50}
                    swipeEnabled={false}
                    renderEvent={
                        calendar_view === 'month' ? renderMonthCircular : 
                        calendar_view === 'day' || calendar_view === 'schedule' ? renderDay : null
                    }
                    style={{
                      flexDirection: 'row',
                    }}
                    locale="de"
                    onPressEvent={calendar_view !== 'month' ? 

                    (event) => {
                      console.log('event fired', event)
                      let transfer_uid = event.uid;
                      props.navigation.navigate('Home', {
                        json_data,
                        angnummer: transfer_uid,
                        lieferant: '',
                        date: '',
                        status: 'all',
                        refresh_block: refresh_block,
                        setRefBlock: setRefBlock,
                        filtered_termin: 1,
                        postfilter_list: [event.name],
                        sync_date
                      });
                    }

                    :

                    (event)=> {
                      console.log(event.start)
                      setCalendarView('day');
                      setTDate(dayjs(event.start));
                      setHeaderDate(
                        dayjs(event.start).format('dddd, DD.MM.YYYY'),
                      );
                      forceUpdate();
                    }
                  }

                    onPressCell={date => {
                      if (calendar_view === 'month') {
                        setCalendarView('day');
                        setTDate(dayjs(date));
                        setHeaderDate(
                          dayjs(date).format('dddd, DD.MM.YYYY'),
                        );
                        forceUpdate();
                      }
                    }}
                    showAllDayEventCell={true}
                    events={events}
                    mode={calendar_view}
                    weekStartsOn={1}
                    height={calendarUpdateHeight()}
                    sortedMonthView={false}
                    showTime={true}
                    date={transfer_date === '' ? dayjs() : transfer_date} // To switch to current date
                    // hourRowHeight={30}
                    theme={{
                      palette: {
                        primary: {
                          main: theme.colors.primary,
                          contrastText: '#fff',
                        },
                      },
                    }}
                    headerContainerStyle={[
                      calendar_view === 'day' ? {display: 'none'} : '',
                      calendar_view === 'month'
                        ? {
                            width: '100%',
                          }
                        : '',
                    ]}
                    bodyContainerStyle={
                      calendar_view === 'month'
                        ? {
                            width: '100%',
                          }
                        : ''
                    }
                    hourStyle={{
                      fontSize: 16,
                    }}
                    dayHeaderStyle={{
                      fontSize: 36,
                    }}
                    dayHeaderHighlightColor={theme.colors.primary}
                  />

EDIT - While in my case it is not painful to migrate all onPressEvent functionality to the TouchableOpacity onPress method I am still curious why it does not work)