The solution is implemented in JavaScript so no native module linking is required.
you should need to install ‘react-native-calendars’ by npm install react-native-calendars.
In this solution you can get current date and also Events details would show against Date.
Here is Documentation Link
import { ExpandableCalendar, Timeline, CalendarProvider } from 'react-native-calendars';
const App = () => {
const [currentDate,setCurrentDate]=useState("");
const onDateChanged = (date) => {setCurrentDate(getCurrentDate())};
const onMonthChange = (/* month, updateSource */) => {
// console.warn('ExpandableCalendarScreen onMonthChange: ', month, updateSource);
};
const renderItem = ({ item }) => {if (_.isEmpty(item)) {return renderEmptyItem();}}
const renderEmptyItem=()=> {
return (
<View style={{paddingLeft: 20, height: 52, justifyContent: 'center', borderBottomWidth: 1, borderBottomColor: '#e8ecf0'}}>
<Text style={{color: '#79838a',fontSize: 14}}>No Events Planned</Text>
</View>
);
}
const getMarkedDates = () => {
const marked = {};
EVENTS.forEach(item => {marked[item.start.split(' ')[0]] = { marked: true, dotColor: item.color }});
return JSON.parse(JSON.stringify(marked));
};
const getTheme = () => {
const themeColor = Colors.black;
const lightThemeColor = Colors.primary;
const disabledColor = '#a6acb1';
const black = Colors.black;
const white = Colors.white;
const themeBack = Colors.primary;
const Black1 = Colors.primary
return {
// arrows
arrowColor: Black1, arowStyle: { padding: 0 },
// month
monthTextColor: Black1, textMonthFontSize: 16, textMonthFontFamily: 'HelveticaNeue', textMonthFontWeight: 'bold',
// day names
textSectionTitleColor: black, textDayHeaderFontSize: 14, textDayHeaderFontFamily: 'HelveticaNeue', textDayHeaderFontWeight: 'bold',
// today
todayBackgroundColor: lightThemeColor, todayTextColor: themeColor,
// dates
dayTextColor: themeColor, textDayFontSize: 18, textDayFontFamily: 'HelveticaNeue', textDayFontWeight: '500', textDayStyle: { marginTop: Platform.OS === 'android' ? 2 : 4 },
// selected date
selectedDayBackgroundColor: themeBack, selectedDayTextColor: white,
// disabled date
textDisabledColor: disabledColor,
// dot (marked date)
dotColor: themeColor, selectedDotColor: white, disabledDotColor: disabledColor, dotStyle: { marginTop: -2 }
};
};
return (
<SafeAreaView style={{flex: 1}}>
<ScrollView>
<View>
<CalendarProvider
date={currentDate}
onDateChanged={onDateChanged}
onMonthChange={onMonthChange}
theme={{ todayButtonTextColor: '#0059ff' }}
renderItem={renderItem}
disabledOpacity={0.6}>
<ExpandableCalendar
firstDay={1}
markedDates={EVENTS.color}
markingType={'dot'}
markedDates={getMarkedDates()}
theme={getTheme()}
headerStyle={{paddingHorizontal:20}}
/>
<Timeline
format24h={true}
eventTapped={(e) => {console.log(e);} }
events={EVENTS.filter(event =>
moment(event.start).isSame(currentDate, 'day'))}
/>
</CalendarProvider>
</View>
</ScrollView>
</SafeAreaView>
)}
export default App;
Hope this will helpful.
