Calendar Planner View

A customizable daily calendar planner view with time-based events and Material 3 design

Live Demo

✨ Try the Interactive Demo! ✨
Explore all features and customization options:

Screenshots

Features

• Time-based daily calendar view
• Month and week view modes
• Customizable event display
• Custom list builder for complete event layout control
• Material 3 design support
• Customizable theme support
• Customizable date picker
• Dropdown styling customization
• Sticky time labels
• Event dot indicators
• Multi-column layout support
• Responsive design
• Theme-aware styling
• Event loading overlay

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  calendar_planner_view: any

Usage

import 'package:calendar_planner_view/calendar_planner_view.dart';

// Basic usage
CalendarPlannerView(
  events: myEvents,
  onEventTap: (event) => print('Event tapped: $event'),
  datePickerPosition: DatePickerPosition.top,
  showCurrentTimeIndicator: true,
)

// Advanced usage with customization
CalendarPlannerView(
  events: myEvents,
  onEventTap: (event) => print('Event tapped: $event'),
  datePickerPosition: DatePickerPosition.modal,
  showCurrentTimeIndicator: true,
  startHour: 8,
  endHour: 20,
  showDayTitle: true,
  enableViewToggle: true,
  initialView: CalendarViewType.week,
  dotColor: Colors.blue,
  modalBackgroundColor: Colors.white,
  modalTitleStyle: TextStyle(
    color: Colors.black,
    fontWeight: FontWeight.bold,
  ),
)

// Toggle between list view (default) and timeline view modes
CalendarPlannerView(
  events: myEvents,
  selectedDate: DateTime.now(),
  datePickerPosition: DatePickerPosition.top,
  enableViewToggle: true,
  showListView: false, // Toggle to timeline view mode
  listBuilder: (context, events, selectedDate) {
    return CustomScrollView(
      slivers: [
        SliverToBoxAdapter(
          child: Padding(
            padding: EdgeInsets.all(16),
            child: Text(
              'Events for ${selectedDate.day}/${selectedDate.month}',
              style: Theme.of(context).textTheme.headlineSmall,
            ),
          ),
        ),
        SliverList(
          delegate: SliverChildBuilderDelegate(
            (context, index) {
              final event = events[index];
              return Card(
                child: ListTile(
                  title: Text(event.title),
                  subtitle: Text('${event.startTime.hour}:${event.startTime.minute.toString().padLeft(2, '0')}'),
                  leading: CircleAvatar(backgroundColor: event.color),
                  onTap: () => print('Custom event tap: ${event.title}'),
                ),
              );
            },
            childCount: events.length,
          ),
        ),
      ],
    );
  },
)

// Use default list view without custom builder (default behavior)
CalendarPlannerView(
  events: myEvents,
  // showListView: true is default, no need to specify
  datePickerPosition: DatePickerPosition.top,
  onEventTap: (event) => print('Event tapped: ${event.title}'),
)

// Use timeline view (opt-in)
CalendarPlannerView(
  events: myEvents,
  showListView: false, // Switch to traditional timeline view
  datePickerPosition: DatePickerPosition.top,
  startHour: 8,
  endHour: 18,
  onEventTap: (event) => print('Event tapped: ${event.title}'),
)

Live Demo

Check out the live demo to see the calendar planner view in action.

Dependencies

• Flutter SDK
• intl: ^0.20.2
• table_calendar: ^3.2.0
• flutter_hooks: ^0.21.2

Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

License

This project is licensed under the MIT License - see the LICENSE file for details