Реагируйте на родные календари

Описание

Я только начал использовать этот компонент сегодня, но реализация, похоже, не работает так, как показывают демо / примеры / документы.

Ожидаемое поведение

Я ожидал, что дни с 2018-12-10 до 2018-12-15 будут заполнены зеленым цветом, включая промежуточные дни.

Наблюдаемое поведение

Реальность такова, что оба дня заполнены зеленым цветом, но ничего не происходит с промежуточными днями (они не связаны).

Среда

  • "реактивный-нативный": "0,57,4",
  • "response-native-calendars": "^1.21.0"
  • Проверено на: Redmi Note 4 (Android 7.0)

Воспроизводимая демонстрация

Это код моего календаря:

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

       markingType='period'
  />
Источник

4 ответа

Решение реализовано на JavaScript, поэтому связывание собственных модулей не требуется.

вам нужно установить response-native-calendars с помощью npminstall react-native-calendars.

В этом решении вы можете получить текущую дату, а также подробные сведения о событиях, которые будут отображаться с датой.

Вот документациюссылка на

      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;

Надеюсь, это поможет.

Источник

Это должно работать:

<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'}
/>
Источник

Попробуй это:

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

       markingType={'period'}
  />
Источник 
<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'}
/>
Источник
Другие вопросы по тегам