Docs: horizontal swiping

[MarceloPrado]

We should have an example demoing how to implement horizontal swipe.

[Acetyld]

Agree, would be lovely! =)

[guyijie1211]

looking forward to it!!

[kostas64]

Guys, any news about horizontal swipe?
When i try to render an horizontal Calendar.List it disappears from the screen.

[kostas64]

Is it possible to implement horizontal swiping with this library?

[kostas64]

Finally, after some inspiration from your WindowsXP calendar, i figured out how to build a performant horizontal calendar!

[AndreyBernardoni]

@kostas64 can you share with us?

[kostas64]

@AndreyBernardoni Sorry mate, never saw your comment.

I dont know if this is the best way to implement the horizontal, it works for me. I tried to extract as much logic as i could from the library it self in order to understand how it works behinds the scenes. In this way you can construct many types of calendars. I have replicated the same logic to build a strip calendar.

First, you have to calculate the calendarMonthId's for the months you want to render the calendar

  import { toDateId } from "@marceloterreiro/flash-calendar";

  const monthsList = useMemo(() => {
    const temp = [];
    for (let i = 0; i <= monthsToRender; i++) {
      const calendarMonthId = toDateId(addMonths(minDate || new Date(), i));
      temp.push(calendarMonthId);
    }
    return temp;
  }, [monthsToRender, minDate]);

Then you have to calculate the data for the calendar

 import { buildCalendar } from "@marceloterreiro/flash-calendar";

 const calendarData = useMemo(
    () =>
      monthsList.map((calendarMonthId) => {
        const { calendarRowMonth, weekDaysList, weeksList } = buildCalendar({
          calendarMonthId,
          calendarFirstDayOfWeek: "monday",
        });

        return {
          calendarRowMonth,
          weekDaysList,
          weeksList,
        };
      }),
    [monthsList],
  );

Render the calendarData to a FlatList or a Flashlist, whatever fits your needs better. In my case FlatList works

     import { CalendarDayMetadata } from "@marceloterreiro/flash-calendar";
     
     type TCalendarItem = {
        calendarRowMonth: string;
        weekDaysList: string[];
        weeksList: CalendarDayMetadata[][];
      };


     const renderItem = ({item}: {item: TCalendarItem}) => {
           return <CalendarMonthItem item={item} otherProps />
     }
     
     return <FlatList
        horizontal
        pagingEnabled
        bounces={false}
        windowSize={3}
        data={calendarData}
        renderItem={renderItem}
        getItemLayout={getItemLayout}
        showsHorizontalScrollIndicator={false}
        {...otherProps}
      />

Last but not least, we have to render the items.

   <View style={{width: WIDTH}}>
        {item.weeksList.map(week, i) => {
              <Calendar.Row.Week 
                  theme={{
                      //play around
                  }}>
                 {week.map((day, nestedI) => {
                  <Calendar.Item.Day.Container 
                    //manyProps to play here
                  >
                      {Your Day Tile component}
                 </Calendar.Item.Day.Container>
                 }}
              </Calendar.Row.Week>
        }}
   </View>

I hope this helps! Apologies for the lengthy response—I wanted to provide enough detail for clarity and avoid leaving anything unclear.