React-native-calendars: Horizontally scrolling calendar component

[hkung77]

Is it possible to add a prop in the listview for calendarlist to scroll horizontally instead of vertically?
Or perhaps not scrolling but more of a carousel kind of UI.

[tautvilas]

Hi, if we do this feature it should be done properly as a new component: HorizontalCalendarList.

In android it should be implemented using ViewPager, for ios - not sure

[ryanvanderpol]

I'd also love to see a horizontal option. In lieu of this existing out of the box, I'm probably going to use react-native-swiper with dynamic pages for each month.

[ashrithks]

Use this to detect gesture,
https://github.com/glepur/react-native-swipe-gestures

replace View with GestureRecognizer,

on left swipe addmonth(1)
on right swipe addmonth(-1)

[RUIFERNANDE5]

@ryanvanderpol have you been able to implement this? I can't have more than one calendar rendered, they all appear equal even if I dynamically change their ref names.

[ryanvanderpol]

@RUIFERNANDE5 I have not gotten to this yet, although I've used react-native-swiper in that manner with some other components elsewhere. Doing the same with the calendar is not a priority for us right now so I haven't really dug into it yet. If it was supported out of the box, I'd use it in a second, though.

[tautvilas]

@RUIFERNANDE5 I don't understand what is the problem with rendering multiple calendars, because that is how calendar-list is implemented (stacking multiple calendar components in a list). Could you elaborate about this?

[ryanvanderpol]

@tautvilas I don't think I've said that there is a problem? Perhaps you're really referring to @RUIFERNANDE5?

All I was saying is that I'd love to the ability to scroll the calendar horizontally as suggested by @hkung77. In lieu of the out-of-the-box ability to do that, I was merely suggesting that you could perhaps achieve the same result by using react-native-swiper and render 3 calendars side by side.

[tautvilas]

yes, sorry I meant to reference RUIFERNANDE5 :)

[RUIFERNANDE5]

@tautvilas nevermind, sorry to spam this post, it was a dumb error of mine.
Although, I genuinely think this is a great component and without a swipe implemented its kind of a turn down.
Anyway, imagine using minDate and maxDate dynamically with multiple calendars to show a 2x6 representation of the months of a specific year, if I set maxDate to YYYY-MM-31 in all months does the component automatically sets maxDate to the last day of that month, or does it shows 31 on months where there are only 30 days or less?

[RUIFERNANDE5]

@tautvilas I was able to do this and all is working fine, however I find that using multiple calendars inside a FlatList makes the initial loading super slow.
I have current month set, minDate, maxDate, hideExtraDays, disableMonthChange, etc.

[dk0r]

+1 Would love to see horizontal swiping with perhaps a paginating behavior that depends upon the velocity of the swipe. For example, slow velocity swipes scroll one calendar per swipe but high velocity swipes scroll many calendars per swipe.

[pencilcheck]

Would also like to see this implemented, as it is needed in our app.

@ryanvanderpol I also used that package but if it is placed under a scrollview calendars will not show up, do you experienced this? and do you have a fix? It seems like the AndroidPager has some issue with Scrollview and swiper but I am clueless on a solution.

[Fuhrmann]

This was the solution I came up, its not perfect, but it works. I didnt test in a real device yet, just on a simulator:

Basically I have a FlatList that accepts as data an array of dates:

calendars: [
    { id: 1, month: "2017-01-01" },
    { id: 2, month: "2017-02-01" },
    { id: 3, month: "2017-03-01" },
    { id: 4, month: "2017-04-01" },
    { id: 5, month: "2017-05-01" },
    { id: 6, month: "2017-06-01" },
    { id: 7, month: "2017-07-01" },
    { id: 8, month: "2017-08-01" },
    { id: 9, month: "2017-09-01" },
    { id: 10, month: "2017-10-01" },
    { id: 11, month: "2017-11-01" },
    { id: 12, month: "2017-12-01" },
],

Then in the renderItem function I just render the calendar:

renderItem={({ item }) => (
    <Calendar
        current={item.month}
        ref={ref => this.handleCalendarRef(ref, item.id)}
        markedDates={markedDates}
        style={{ width: deviceWidth }}
        theme={calendarTheme}
        onDayPress={this.setCurrentDay}
        monthFormat="MMMM/yy"
        hideExtraDays
    />
)}

I'm using the following options in the FlatList for better performace:

My getItemLayout function:

getItemLayout={(data, index) => ({ length: deviceWidth, offset: deviceWidth * index, index })}

Other props that I've used:

initialNumToRender={1}
maxToRenderPerBatch={2}
windowSize={2}

To calculate the calendar height I count the number of weeks the month has and set the height accordingly, also I set the Toolbar title. I'm using the onViewableItemsChanged prop of the FlatList:

onViewableItemsChanged = ({ viewableItems }) => {
    viewableItems.forEach(item => this.loadMarkedDates(item.key));

    // If there is only one viewable item
    if (viewableItems.length === 1) {
        const item = viewableItems[0];
        this.setCalendarHeight(item.key);
        this.props.navigator.setTitle({
            title: dateformat(new Date(this.state.currentYear, item.key - 1, 1), 'mmmm')
        });
    }
}

This is basically my setCalendarHeight function:

setCalendarHeight = (month) => {
    const weeks = this.countWeeks(month);

    // this is the height used when the month has 5 weeks
    let calendarHeight = deviceHeight / 2.8;
    if (weeks > 5) {
        // and when the month has 6 weeks I increase the height
        calendarHeight = this.state.calendarHeight + 25;
    }

    this.setState({
        calendarHeight,
    });
}

Then in my FlatList I use the calendarHeight:

<FlatList
    ...
    contentContainerStyle={{ height: this.state.calendarHeight }}
    ...
/>

Surely the code can improve, maybe logic, but that's what I managed to do for now. I've only tested using 12 calendars, dont really know if the performace will be smooth if we use more.

[littlehome-eugene]

@Fuhrmann Fantastic, do you have a repo for it?
How did you recognize and implement the swipe? (viewPager etc)

[Fuhrmann]

@littlehome-eugene Not yet, but I can send you the code. The swipe is done using the FlatList.

[littlehome-eugene]

@Fuhrmann gracious, could you send it to littlehome.eugene at gmail?
I'm not familiar with FlatList nor react-native-calendars, so it could be of much help.

What do you think about using library like (https://github.com/archriss/react-native-snap-carousel#usage) for swiping?

[Fuhrmann]

@littlehome-eugene It's pretty simple to use FlatList actually, but if you want to use another package for swiping go for it. Maybe it will work. I'll send you the files! :blush: