CODEWITHSUNDEEP
reactjsreact-nativereact-native-calendars
António Faneca
António Faneca

Reputation: 41

React Native Calendars

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

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'
  />

Upvotes: 4

Views: 3120

Answers (4)

Talha
Talha

Reputation: 886

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.

Upvotes: 1

Abhishek Sutariya
Abhishek Sutariya

Reputation: 112

<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'}
/>

Upvotes: 0

Maksym Bezruchko
Maksym Bezruchko

Reputation: 1258

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'}
/>

Upvotes: 0

Selmi Karim
Selmi Karim

Reputation: 2235

try this: 

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

       markingType={'period'}
  />

Upvotes: 0

Related Questions