Calendar is not changing its View with selected month and year

[vinayakvinayam]

i have 2 drop downs of month and year, i will select them and pass to the getList Function. when i pass the month and year and press submit button i am receiving the data but the calendar should change as per the selected month and year its

import React, { Component } from 'react'; import { View, Picker,Button, StyleSheet} from 'react-native'; import CalendarPicker from 'react-native-calendar-picker'; import moment from 'moment'; import OfflineNotice from './OfflineNotice' import { mainUrl } from '../routes/AppRoutes'; import AsyncStorage from '@react-native-community/async-storage';

export default class AttendanceScreen extends Component { constructor(props){ super(props); this.state = { getList: [], getMonth: [], getYear:[], year: '', month: '' } this.getList = this.getList.bind(this) this._mapDatesFunction = this._mapDatesFunction.bind(this) this.getMonth = this.getMonth.bind(this) this.getYear =this.getYear.bind(this) }

componentWillMount() { // this.getList(), this.getMonth(), this.getYear() }

componentDidMount(){ this.getList }

getMonth = async () => { try { const token = await AsyncStorage.getItem('authToken'); if (token) fetch(mainUrl + '/common/getMonth', { method: "GET", headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', 'Authorization': Bearer ${token}, }, }).then((response) => response.json()) .then((res) => { // console.log(res) if (res.status_code === 200) { this.setState({ getMonth:res.data.month }) } else { alert('Oops!!! Something Went Wrong') } }) .done() } catch (error) { } }

getYear = async () => { try { const token = await AsyncStorage.getItem('authToken'); if (token) fetch(mainUrl + '/common/getYear', { method: "GET", headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', 'Authorization': Bearer ${token}, }, }).then((response) => response.json()) .then((res) => { // console.log(res) if (res.status_code === 200) { this.setState({ getYear:res.data.year }) } else { alert('Oops!!! Something Went Wrong') } }) .done() } catch (error) { } }

getList = async () => { try { const token = await AsyncStorage.getItem('authToken'); if (token) fetch(mainUrl + '/employeeAttendance/list', { method: "POST", headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', 'Authorization': Bearer ${token}, }, body: JSON.stringify({ 'year' :this.state.year, 'month' : this.state.month }) }).then((response) => response.json()) .then((res) => { // console.log(res) if (res.status_code === 200) { this.setState({ getList: res.data.employeeAttendance}); } else { alert('Oops!!! No Record found this Month') } }) .done() } catch (error) { } }

_mapDatesFunction = (getList) => getList.map(emp => ( { date: moment(emp.attendanceDate), style: {backgroundColor: emp.attendanceType.name === "Present" ? "green" : "red"}, textStyle: {color: 'white'}, } ));

render() { console.log(this.state) const {getList} = this.state; return (

this.setState({month: itemValue})} > { this.state.getMonth.map((month) => )} this.setState({year: itemValue})} > { this.state.getYear.map((year) => )}

        <Button 
        title="Submit"
        onPress={this.getList}
        />
        <CalendarPicker
          todayTextStyle={{fontWeight: 'bold', color: 'white'}}
          todayBackgroundColor={'grey'}
          customDatesStyles={this._mapDatesFunction(getList)}
        />
  </View>
);

} }

const styles = StyleSheet.create({ container: { height: '100%', width: '100%' } })

[peacechen]

CalendarPicker defaults to opening to today's date & month. If you'd like it to show a different month, use the initialDate prop. https://github.com/stephy/CalendarPicker#calendarpicker-props

You'll need to assemble the selected month & year into a [Moment] Date object and pass it to initialDate.

[AurangsEmpire]

How can we change the year or month directly with the refs?

[AurangsEmpire]

Hello Guys, I have done it with: initialDate={new Date(this.state.selectedYear, this.state.selectedMonth, 1)} Hope this will help anyone else.

Remember to -1 with the value of month because January's value is 0 in these props. this.setState({ selectedMonth: value - 1 })

[vinayakvinayam]

Thanks a Lot @AurangsEmpire your solution is working. You saved my time