Calendar Viewer #

A highly customizable calendar widget designed for reservations, events, and multi-language support.

Table of Contents #

1. Installing
2. Features
3. Usage
4. Example Project
5. Properties
6. Events
7. Contributors

🖥 Installing #

Add Dependency #

dependencies:
  calendar_viewer: ^1.0.2 # Use the latest version

Import Package #

import 'package:calendar_viewer/calendar_viewer.dart';

✨ Features #

• Customizable month tabs and week bars.
• Multi-language support for month and weekday names.
• Add reservations spanning multiple dates.
• Customizable styles for dates, weekdays, and reservations.
• Support for event handling like taps and long presses on dates.

📖 Usage #

Basic Example: #

/// Or use [CalendarPageViewer] if you want to show only one month at a time.
/// with no tab bar.
CalendarTabBarViewer(
  initialDate: DateTime.now(),
  months: ['Jan', 'Feb', ...], // List of 12 months
  weekdays: ['Mon', 'Tue', ...], // List of 7 weekdays
  nextMonthDateConfig: CalendarDateConfig(
      decoration: BoxDecoration(
        color: Colors.black12,
        border: Border.all(color: Colors.black12, width: 0.5),
      ),
    ),
);

Advanced Configuration: #

/// Or use [CalendarPageViewer] if you want to show only one month at a time.
/// with no tab bar.
CalendarTabBarViewer(
  key: Key(_selectedDate.toString()),
  initialDate: _selectedDate,
  months: ['January', 'February', ...],
  weekdays: ['Monday', 'Tuesday', ...],
  dateConfigBuilder: (date) {
    if (date.isAtSameMomentAs(DateTime(_now.year, _now.month, _now.day))) {
      return CalendarDateConfig(
        decoration: BoxDecoration(
          color: Colors.teal.withValues(alpha: .6),
          borderRadius: BorderRadius.circular(5),
        ),
      );
    } else if(date.isAtSameMomentAs(_selectedDate)) {
      return CalendarDateConfig(
        decoration: BoxDecoration(
          color: Colors.blue.withValues(alpha: .6),
          borderRadius: BorderRadius.circular(5),
        ),
      );
    }
    return null;
  },
  reservations: [
    CalendarViewerReservation(
      from: DateTime(2023, 10, 9),
      to: DateTime(2023, 10, 13),
      user: const CalendarReservationUser(
        name: 'Mohammad Alamoudi',
        netImage:
            'https://cdn-icons-png.flaticon.com/512/9203/9203764.png',
      ),
    ),
  ],
  reservation: CalenderReservationConfig(
    style: CalendarReservationStyle(
      color: Colors.teal.withValues(alpha: .6),
    ),
  ),
  nextMonthDateConfig: CalendarDateConfig(
      decoration: BoxDecoration(
        color: Colors.black12,
        border: Border.all(color: Colors.black12, width: 0.5),
      ),
    ),
);

📱 Example Project #

• Pub Example: Available on pub.dev.
• GitHub Example Project: Available on GitHub.

📋 Properties #

🎯 Events #

👨🏻‍💻 Contributors #

• Mohammad Alamoudi @mu7mmd

Feel free to contribute by submitting issues or feature requests on GitHub! 😊