React Native Calendars

Question

Description

I just started using this component today, but the implementation doesn't seem to work the way the demo/examples/docs show.

Expected Behavior

I was expecting that the days from 2018-12-10 to 2018-12-15 would be filled up with the color green, including the days in between.

Observed Behavior

The reality is that both days get filled up with the color green, but nothing happens to the days in between (they are not connected).

Environment

• "react-native": "0.57.4",
• "react-native-calendars": "^1.21.0"
• Tested on: Redmi Note 4 (Android 7.0)

Reproducible Demo

This is the code of my calendar:

<Calendar
     markedDates={{
                "2018-12-10": { startingDay: true, color: "green" },
                "2018-12-15": { endingDay: true, color: "green" }
        }}

       markingType='period'
  />

Answer 1

try this:

<Calendar
     markedDates={{
                '2018-12-10': { startingDay: true, color: 'green' },
                '2018-12-15': { endingDay: true, color: 'green' }
        }}

       markingType={'period'}
  />

Answer 2

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.

Answer 3

This should work:

<Calendar markedDates={{
       "2018-12-10": { startingDay: true, color: "green" },
       "2018-12-11": { color: "green" },
       "2018-12-12": { color: "green" },
       "2018-12-13": { endingDay: true, color: "green" }
    }} 
    markingType={'period'}
/>

Answer 4

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