How to Create Custom Calendar in React Native

How to create custom calendar in React Native?

There are couple of ways to make your custom calendar

1. You can download libraries[not install] and then edit their code to make your own library and add it to your component.(preferred way)

2. Or you can make your layout for days, weeks , months, etc and use scroll-view to make it swipe-able. Most of libraries also uses scroll-view.

Creating a calendar component in react native

You should set the state like below

function changeMonth(n) {
    setState({
       activeDate: new Date(state.activeDate.setMonth(state.activeDate.getMonth() + n))
      });
  }

When you do it using the current way you are setting a callback function which does not have a getFullYear function.

react-native-calendar : apply custom multi marking with popup

You need to add the marked date to your _markedDates object. On day press show modal and when the user clicks x save the marked date, with selected types in dots array.

state = {
  _markedDates: this.initialState,
  isOpen: false,
  isDisabledOne: false,
  isDisabledTwo: false,
  isDisabledThree: false,
  isOpen: false,
  selectedDay: ''
};

saveDay = () => {
  const dots = [];
  let selected = true;
  const {
    isDisabledOne,
    isDisabledTwo,
    isDisabledThree,
    _markedDates,
    selectedDay
  } = this.state;

  if (isDisabledOne) {
    dots.push(vacation);
  }

  if (isDisabledTwo) {
    dots.push(massage);
  }

  if (isDisabledThree) {
    dots.push(workout);
  }

  if (_markedDates[selectedDay]) {
    selected = !_markedDates[selectedDay].selected;
  }

  const clone = { ..._markedDates };

  clone[selectedDay] = { dots, selected };

  this.setState({
    isOpen: false,
    _markedDates: clone,
    isDisabledOne: false,
    isDisabledTwo: false,
    isDisabledThree: false,
  });
};


const BContent = () => (
  <Button
    title="X"
    onPress={this.saveDay}
    style={[styles.btn, styles.btnModal]}
  />
);

onDaySelect

onDaySelect = day => {
  const _selectedDay = moment(day.dateString).format(_format);

  this.setState({
    selectedDay: _selectedDay,
    isOpen: true
  });
};

DEMO

react-native-calendars jump to a selected month

Solved this issue by adding both props key and current

Prop key triggers re-rendering

  const CalendarScreen = () => {
      const [current, setCurrent] = useState('2020-01-01');

  return(
        <Calendar
          current={current}
          key={current}
          customHeader={CalendarHeaderHandler}
          style={styles.calendar}
        />
        <TouchableOpacity onPress={() => setCurrent('2021-01-01')}>
            <Text>2021</Text>
        </TouchableOpacity>
   )};

Render image on each date using react-native-calendars

As per the doc you could use dayComponent property to override the component.

<Calendar
  style={[styles.calendar, {height: 300}]}
  dayComponent={({date, state}) => {
    return (
      <View>
        <Text style={{textAlign: 'center', color: state === 'disabled' ? 'gray' : 'black'}}>
          {date.day}
        </Text>
      </View>
    );
  }}
/>

---

Related Topics