Something wrong with end property of React Native Big Calendar

Question

I'm trying to make a calendar of event using react-native-big-calendar
when i believe it's suppose to work with both start and end time, but somehow it's not work when i uncomment the end property
here are the codes:

const events = [
  {
    title: 'Meeting',
    start: new Date(2020, 5, 20, 10, 0),
    // end: new Date(2020, 5, 20, 22, 30),
  },
  {
    title: 'Coffee break',
    start: new Date(2020, 1, 14, 15, 45),
    // end: new Date(2020, 1, 14, 16, 30),
  },
  {
    title: 'Repair my car',
    start: new Date(2020, 5, 20, 7, 45),
    // end: new Date(2020, 5, 20, 13, 30),
  },
]
class BookingListScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
    }
  }
  render() {
    console.log('logged by phuognn start: ', new Date(2020, 5, 20, 10, 0));
    console.log('logged by phuognn end: ',new Date(2020, 5, 20, 22, 30));  
    return (
      <View style={{ flex: 1 }}>
        <Calendar

          height={Dimensions.get('window').height}
          style={styles.calendar}
          events={events}
          height={600}
          eventCellStyle={{ backgroundColor: 'blue' }}
        />
      </View>

    );
  }
}

if I uncomment the end property of events, the calendar show no event. Wonder why?

Sébastien · Accepted Answer · 2021-03-21 16:23:16Z

1

The end property is required on the type BaseEvent. So you must specify it!

node_modules\react-native-big-calendar\build\interfaces.d.ts

export interface BaseEvent {
    start: Date;
    end: Date;
    title: string;
}

If what you're looking for is an event which lasts all day, use event's time.

const events = [
  {
    title: 'Meeting',
    start: new Date(2020, 1, 11, 0, 0),
    end: new Date(2020, 1, 12, 0, 0),
  }
]

answered Mar 21, 2021 at 16:23

Sébastien

1,9781 gold badge17 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Something wrong with end property of React Native Big Calendar

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related