Fetch Data To React Native Calendar Agenda

Question

i'm making an that has calendar in it, and i want to populate the calendar with data from the database. the data from database looks like this:

"meeting": [
        {
            "id": "",
            "company_id": "",
            "meeting_type_id": "",
            "title": "zoom meeting",
            "place": "zoom",
            "description": "lorem ipsum",
            "link": "zoom.com",
            "date_time": "2021-06-20 08:03:00",
            "status": 1,
            "created_at": null,
            "updated_at": null
        }
    ]

what i'm trying to do is add the marked dates from database to the calendar. this what i've done so far but the marked dates do not appeared.

renderMeeting() {
    let panels = [];
    Object.keys(this.props.meeting).map((key, index) => {
      panels.push(
        <View key={index} style={styles.itemContainer}>
          <TouchableOpacity>
            <Text>{this.props.meeting.date_time}</Text>
            <Text>{this.props.meeting.title}</Text>
          </TouchableOpacity>
        </View>,
      );
    });
  }

  renderItems() {
    let items = [];
    this.props.meeting.map((key, index) => {
      items[this.props.meeting.date_time] = {
        name: this.props.meeting.title,
      };
    });
  }
  
  render(){
    let markedDay = {};
    this.props.meeting.map(item => {
      markedDay[item.date_time] = {
        selected: true,
        marked: true,
        selectedColor: 'purple',
      };
    });
    return(
      <Agenda
          items={this.renderItems()}
          renderItem={this.renderMeeting()}
          renderEmptyDate={() => <View />}
          markedDates={this.props.meeting.date_time}
       />
    )
  }

Yasmine091 · Answer 1 · 2022-01-24T13:22:55.300

It's because your dates are not formatted the right way, and the markingType property is missing.

Your date items look like this :

{ 
  "2021-06-20 08:03:00": {
        selected: true,
        marked: true,
        selectedColor: 'purple',
      },
  //...
}

Instead they should be formatted this way :

{ 
  "2022-06-20": : {
        selected: true,
        marked: true,
        selectedColor: 'purple',
      },
  //...
}

You must add the markerType property for the markers to appear too, you can try these :

markingType={"dot"} // For a signle dot per date
markingType={"multi-dot"} // For multiple dots per date

Also you could change the structure of the json meeting, so you separate date_time into 2 properties, date & time :

"meeting": [
        {
            "id": "",
            "company_id": "",
            "meeting_type_id": "",
            "title": "zoom meeting",
            "place": "zoom",
            "description": "lorem ipsum",
            "link": "zoom.com",
            "date": "2021-06-20", // SEPARATED DATE
            "time": "08:03:00", // SEPARATED TIME
            "status": 1,
            "created_at": null,
            "updated_at": null
        }
    ]

Then you'll have to replace every date_time property for the date one, and the markers will appear.

And no worries if you need the full date, you can always concatenate date and time.

I hope this is helpful!

Fetch Data To React Native Calendar Agenda

1 Answers1