Vertical Calendar

[iamshm]

Hey guys I want to convert this calendar to a vertical scrolling calendar Is it possible? Is there any better way to do so.

[SametSahin10]

This would be pretty good.

[jgamesl]

@iamshm did you find a way?

[JonSnow1077]

Did someone find any ways? Its been a year

[kodeslaw]

Did someone find any ways? Its been a year

It is surprising that there are no good vertical scrolling calendars for Flutter - the closest you can get is to rework date pickers (e.g. the one from syncfusion but it's still not ideal) or write one yourself. If table_calendar can support vertical orientation, that would be insanely good.

[desmeit]

there are some news? it would be great to have it vertical calendar because then it looks better on a portrait screen.

[nurbek-b]

any changes here?

[desmeit]

unfortunately it seems not. very important function.

[nurbek-b]

maybe someone forked and made it?

[desmeit]

this would be great.

[faslurrajah]

still needed

[desmeit]

any chance of this feature?

[mguilhermeneves]

Guys, I found a way to make the vertical scroll, however, it is not a feature of table_calendar. It works for multiple selection and single selection. For range selection I have not tested.

What I do is create a ListView with the number of months I want to show. It always starts with the current month.

Example:

class VerticalCalendarPage extends StatefulWidget {
  const VerticalCalendarPage({Key? key}) : super(key: key);

  @override
  State<VerticalCalendarPage> createState() => _VerticalCalendarPageState();
}

class _VerticalCalendarPageState extends State<VerticalCalendarPage> {
  final Set<DateTime> _selectedDays = {};

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: 12, // number of months to show
        itemBuilder: (context, index) {
          final dateNow = DateTime.now();
          final firstDay = DateTime(dateNow.year, dateNow.month + index, 1);
          final lastDay = DateTime(dateNow.year, dateNow.month + index + 1, 0);

          return TableCalendar(
            headerStyle: const HeaderStyle(
              headerPadding: EdgeInsets.symmetric(horizontal: 12, vertical: 15),
              formatButtonVisible: false,
              leftChevronVisible: false,
              rightChevronVisible: false,
            ),
            availableGestures: AvailableGestures.none,
            firstDay: firstDay,
            lastDay: lastDay,
            focusedDay: firstDay,
            selectedDayPredicate: (day) => _selectedDays.contains(day),
            onDaySelected: (selectedDay, focusedDay) {
              setState(() {
                if (_selectedDays.contains(selectedDay)) {
                  _selectedDays.remove(selectedDay);
                } else {
                  _selectedDays.add(selectedDay);
                }
              });
            },
          );
        },
      ),
    );
  }
}

[desmeit]

I switched to this: https://pub.dev/packages/paged_vertical_calendar

[SayuruSandaru]

any update on this?

[eeBarrionuevo]

This worked for me

ListView( shrinkWrap: true, physics: const ScrollPhysics(), children: [ TableCalendar( availableGestures: AvailableGestures.none, ... ), ], ),

[Harshana-Rathnayaka]

I switched to this: https://pub.dev/packages/paged_vertical_calendar

I think this is a good alternative for now. Thank you