Simple dot marking
Mark dates with a colored dot below the day number:import React, {useState} from 'react';
import {Calendar} from 'react-native-calendars';
const App = () => {
const [selected, setSelected] = useState('2024-11-06');
return (
<Calendar
current={'2024-11-06'}
firstDay={1}
hideExtraDays
markedDates={{
'2024-11-12': {selected: true, marked: true, disableTouchEvent: true},
'2024-11-13': {selected: true, marked: true, dotColor: 'red'},
'2024-11-14': {marked: true, dotColor: 'red', disableTouchEvent: true},
'2024-11-15': {marked: true},
'2024-11-16': {disabled: true, activeOpacity: 0, disableTouchEvent: false}
}}
hideArrows={true}
/>
);
};
export default App;
Use
disableTouchEvent to prevent user interaction with specific marked dates.Multi-dot marking
Display multiple dots on a single date to represent multiple events:import React from 'react';
import {Calendar} from 'react-native-calendars';
const App = () => {
return (
<Calendar
current={'2024-11-06'}
markingType={'multi-dot'}
markedDates={{
'2024-11-08': {
selected: true,
dots: [
{key: 'vacation', color: 'blue', selectedDotColor: 'red'},
{key: 'massage', color: 'red', selectedDotColor: 'white'}
]
},
'2024-11-09': {
disabled: true,
dots: [
{key: 'vacation', color: 'green', selectedDotColor: 'red'},
{key: 'massage', color: 'red', selectedDotColor: 'green'}
]
}
}}
/>
);
};
export default App;
Each dot requires a unique
key property to distinguish between different event types.Period marking
Highlight date ranges with colored backgrounds:import React from 'react';
import {Calendar, CalendarUtils} from 'react-native-calendars';
const App = () => {
const getDate = (offset) => {
const date = new Date('2024-11-06');
date.setDate(date.getDate() + offset);
return CalendarUtils.getCalendarDateString(date);
};
return (
<Calendar
current={'2024-11-06'}
minDate={getDate(-14)}
markingType={'period'}
markedDates={{
'2024-11-06': {marked: true, dotColor: '#50cebb'},
'2024-11-10': {marked: true, dotColor: '#50cebb'},
'2024-11-15': {startingDay: true, color: '#50cebb', textColor: 'white'},
'2024-11-16': {
color: '#70d7c7',
customTextStyle: {
color: '#FFFAAA',
fontWeight: '700'
}
},
'2024-11-17': {color: '#70d7c7', textColor: 'white', marked: true, dotColor: 'white'},
'2024-11-18': {color: '#70d7c7', inactive: true, marked: true},
'2024-11-19': {
endingDay: true,
color: '#50cebb',
textColor: 'white',
customContainerStyle: {
borderTopRightRadius: 5,
borderBottomRightRadius: 5,
backgroundColor: 'green'
}
},
'2024-12-01': {inactive: true, disableTouchEvent: true}
}}
theme={{
textInactiveColor: '#a68a9f',
inactiveDotColor: '#a68a9f',
textSectionTitleDisabledColor: 'grey',
textSectionTitleColor: '#319e8e',
arrowColor: '#319e8e'
}}
/>
);
};
export default App;
For period marking, use
startingDay and endingDay properties to define the range boundaries.Multi-period marking
Overlay multiple period markings on the same dates:import React from 'react';
import {Calendar} from 'react-native-calendars';
const App = () => {
return (
<Calendar
current={'2024-11-06'}
markingType={'multi-period'}
markedDates={{
'2024-11-06': {
periods: [
{startingDay: true, endingDay: false, color: 'green'},
{startingDay: true, endingDay: false, color: 'orange'}
]
},
'2024-11-07': {
periods: [
{startingDay: false, endingDay: true, color: 'green'},
{startingDay: false, endingDay: true, color: 'orange'},
{startingDay: true, endingDay: false, color: 'pink'}
]
},
'2024-11-09': {
periods: [
{startingDay: true, endingDay: true, color: 'orange'},
{color: 'transparent'},
{startingDay: false, endingDay: false, color: 'pink'}
]
}
}}
/>
);
};
export default App;
Custom marking styles
Apply completely custom styles to individual dates:import React from 'react';
import {Calendar} from 'react-native-calendars';
const App = () => {
return (
<Calendar
hideExtraDays
current={'2024-11-06'}
minDate={'2024-11-06'}
markingType={'custom'}
markedDates={{
'2024-11-06': {
customStyles: {
container: {
backgroundColor: 'white',
elevation: 2
},
text: {
color: 'red',
marginTop: 0
}
}
},
'2024-11-14': {
selected: true
},
'2024-11-15': {
customStyles: {
container: {
backgroundColor: 'red',
elevation: 4
},
text: {
color: 'white'
}
}
},
'2024-11-20': {
customStyles: {
container: {
backgroundColor: 'green'
},
text: {
color: 'white'
}
}
},
'2024-11-27': {
disabled: true
},
'2024-12-04': {
customStyles: {
text: {
color: 'black',
fontWeight: 'bold'
}
}
},
'2024-12-06': {
customStyles: {
container: {
backgroundColor: 'pink',
elevation: 4,
borderColor: 'purple',
borderWidth: 5
},
text: {
marginTop: 3,
fontSize: 11,
color: 'black'
}
}
}
}}
/>
);
};
export default App;
Custom marking allows you to apply any React Native style properties to the date container and text.
Marking types comparison
markingType={undefined} // or omit this prop
markedDates={{
'2024-11-06': {marked: true, dotColor: 'red'}
}}
Marking properties reference
// Common properties for all marking types
{
selected: boolean, // Whether this date is selected
marked: boolean, // Show a dot below the date
disabled: boolean, // Disable date interaction
disableTouchEvent: boolean, // Prevent touch events
inactive: boolean, // Render date as inactive
dotColor: string, // Color of the marking dot
selectedColor: string, // Background color when selected
selectedTextColor: string, // Text color when selected
activeOpacity: number, // Touch opacity (0-1)
textColor: string // Custom text color
}