masamune_calendar 3.1.7

Masamune plugin to provide calendar functionality. The masamune framework is assumed to be used.

Masamune Calendar

---

[GitHub] | [YouTube] | [Packages] | [X] | [LinkedIn] | [mathru.net]

---

Masamune Calendar

Usage

Installation

Add the package to your project.

flutter pub add masamune_calendar

Run flutter pub get if you edit pubspec.yaml manually.

Register the Adapter

Configure calendar defaults such as the starting weekday and weekend days.

// lib/adapter.dart

/// Masamune adapters used by the application.
final masamuneAdapters = <MasamuneAdapter>[
  const UniversalMasamuneAdapter(),

  const CalendarMasamuneAdapter(
    startingDayOfWeek: DayOfWeek.monday,
    weekendDays: [DayOfWeek.saturday, DayOfWeek.sunday],
  ),
];

The adapter registers itself via MasamuneAdapterScope, making it accessible through CalendarMasamuneAdapter.primary.

Build a Calendar

Use CalendarController to manage state and the Calendar widget to render the UI.

class MyCalendarPage extends PageScopedWidget {
  @override
  Widget build(BuildContext context, PageRef ref) {
    final controller = ref.page.controller(
      CalendarController.query(initialDay: DateTime.now()),
    );

    return Scaffold(
      appBar: AppBar(title: const Text("Calendar")),
      body: Calendar(
        controller: controller,
        headerStyle: const CalendarHeaderStyle(
          showFormatButton: true,  // Show month/week/2-week view toggle
        ),
        calendarStyle: CalendarStyle.monthView(),  // or weekView(), twoWeekView()
      ),
    );
  }
}

Navigate and Select Dates

CalendarController provides methods to programmatically control the calendar:

// Select a specific date
controller.select(DateTime(2025, 1, 15));

// Navigate to next/previous month
controller.next();
controller.prev();

// Focus on a specific date without selecting
controller.focus(DateTime(2025, 2, 1));

// Access current state
final selectedDate = controller.selectedDay;  // Currently selected date
final focusedDate = controller.focusedDay;   // Currently displayed month/week

React to User Actions

Attach listeners to respond when users interact with the calendar:

controller.addListener(() {
  final selected = controller.selectedDay;
  if (selected != null) {
    print("User selected: $selected");
    // Load events for this date, update UI, etc.
  }
});

Customize Appearance

Using Delegates: Customize day cells, markers, or headers:

Calendar(
  controller: controller,
  builderDelegate: BuilderCalendarDelegate(
    dayBuilder: (context, day, focusedDay) {
      // Custom day cell widget
      return Container(
        decoration: BoxDecoration(
          color: day.weekday == DateTime.saturday ? Colors.blue : null,
          borderRadius: BorderRadius.circular(8),
        ),
        child: Center(child: Text('${day.day}')),
      );
    },
  ),
  markerDelegate: MarkerCalendarDelegate(
    markerBuilder: (context, day, events) {
      // Add event markers
      if (events.isNotEmpty) {
        return Positioned(
          bottom: 1,
          child: Container(
            width: 7,
            height: 7,
            decoration: BoxDecoration(
              color: Colors.red,
              shape: BoxShape.circle,
            ),
          ),
        );
      }
      return const SizedBox.shrink();
    },
  ),
)

Using Styles: Customize colors and text styles:

Calendar(
  controller: controller,
  calendarStyle: CalendarStyle.monthView().copyWith(
    selectedDayColor: Colors.blue,
    todayColor: Colors.orange,
    weekendTextStyle: TextStyle(color: Colors.red),
  ),
)

GitHub Sponsors

Sponsors are always welcome. Thank you for your support!

https://github.com/sponsors/mathrunet