Calendar marking react-native-calendars

Question

How do I get new markings to show up when the user clicks a date? I'm sure I'm just missing some reference in documentation, but I would appreciate a pointer in the right direction.

I'm using the library react-native-calendars (https://github.com/wix/react-native-calendars) and their boilerplate code.

        <Calendar
            // Collection of dates that have to be colored in a special way. Default = {}
            markedDates={{
                '2021-05-20': {textColor: 'green'},
                '2021-05-22': {startingDay: true, color: 'green'},
                '2021-05-23': {selected: true, endingDay: true, color: 'green', textColor: 'gray'},
                '2021-05-04': {disabled: true, startingDay: true, color: 'green', endingDay: true}
            }}
            // Date marking style [simple/period/multi-dot/custom]. Default = 'simple'
            markingType={'period'}
        />

Currently when I click a date nothing happens. I'm guessing I'm supposed to detect a click and change the markedDates dict accordingly, but I don't know how to do that. Is there a onMarked callback method or something I can use?

@HichamELBSI thanks, just what i was looking for. Now I'm wondering how i can add 4 days to the dateObj parameter without manually adding each prop. U have any ideas? The log looks like this: `{"dateString": "2021-01-05", "day": 5, "month": 1, "timestamp": 1609804800000, "year": 2021}` — Qrow Saki, Jan 04 '21 at 22:39
So what you want is when you click on a date, it's added 4 days to the calendar? — HichamELBSI, Jan 04 '21 at 22:42
well, i want to be able to mark a period of 4 days, so start date and end date. which i've found is by adding `{'2021-05-22': {startingDay: true}` and `{'2021-05-26': {endingDay: true}}` do you know how to do that? would you mind adding an answer how to add to markedDays properly. i feel like i just need some code to look at. thx — Qrow Saki, Jan 04 '21 at 22:46

score 4 · Accepted Answer · answered Jan 04 '21 at 23:01

Alright so what I do here is, when I click on a day, it marks 4 days from the day you click on to the day+4 (it is for the example but you can adapt the code for your use case):

Also, I use moment to add days and format date. You can use another date lib

import React, { useState } from "react";
import {Calendar} from 'react-native-calendars';
import moment from 'moment';

const App = () => {
  const [markedDates, setMarkedDates] = useState({
    '2021-01-20': {textColor: 'green'},
    '2021-01-22': {startingDay: true, color: 'green'},
    '2021-01-23': {selected: true, endingDay: true, color: 'green', textColor: 'gray'},
    '2021-01-04': {disabled: true, startingDay: true, color: 'green', endingDay: true}
  })

  const handleDayPress = (day) => {
    setMarkedDates({
      [day.dateString]: {
        startingDay: true,color: 'green'
      },
      [moment(day.dateString).add(1, 'days').format('YYYY-MM-DD')]: {
        color: 'green'
      },
      [moment(day.dateString).add(2, 'days').format('YYYY-MM-DD')]: {
        color: 'green'
      },
      [moment(day.dateString).add(3, 'days').format('YYYY-MM-DD')]: {
        endingDay: true,color: 'green'
      }
    })
  }

  return (
    <Calendar
      markedDates={markedDates}
      markingType={'period'}
      onDayPress={handleDayPress}
    />
  )
}

export default App;

score -1 · Answer 2 · answered Apr 07 '22 at 01:29

You can override the styling using theme as props of that calendar component as like:

theme={{ agendaDayTextColor: '#5A595B', agendaDayNumColor: '#5A595B', agendaTodayColor: '#FF7391', agendaKnobColor: '#FF7391', textSectionTitleColor: '#5A595B', selectedDayBackgroundColor: '#FF7391', selectedDayTextColor: 'white', todayTextColor: '#FF7391', dayTextColor: '#5A595B', textDisabledColor: '#5A595B', dotColor: '#FF7391', selectedDotColor: 'white', arrowColor: '#FF7391', monthTextColor: '#5A595B', }}

Calendar marking react-native-calendars

2 Answers2