Calendar View

A Flutter package that provides customizable calendar view widgets showing month, week, or day views with task cards.

Getting started

Add the package to your pubspec.yaml:

dependencies:
  oxean_calendar_view: ^0.1.0

Usage

Basic Monthly Calendar

import 'package:oxean_calendar_view/oxean_calendar_view.dart';
import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Create some tasks
    final tasks = [
      CalendarTask(
        id: '1',
        title: 'Important meeting',
        date: DateTime(2025, 4, 15),
        color: Colors.red,
      ),
      CalendarTask(
        id: '2',
        title: 'Submit report',
        date: DateTime(2025, 4, 18),
        color: Colors.blue,
      ),
      CalendarTask(
        id: '3',
        title: 'Review code',
        date: DateTime(2025, 4, 18),
        color: Colors.green,
        isCompleted: true,
      ),
    ];

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Calendar Example')),
        body: Center(
          child: MonthlyCalendar(
            tasks: tasks,
            onDaySelected: (date) {
              print('Selected date: $date');
            },
            onTaskSelected: (task) {
              print('Selected task: ${task.title}');
            },
            todayColor: Colors.blue,
            selectedColor: Colors.orange,
          ),
        ),
      ),
    );
  }
}

Multi-view Calendar

For a more advanced calendar that can switch between month, week, and day views:

import 'package:oxean_calendar_view/oxean_calendar_view.dart';
import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final tasks = [
      CalendarTask(
        id: '1',
        title: 'Team Meeting',
        date: DateTime(2025, 4, 15, 14, 30), // with time: 2:30 PM
        color: Colors.indigo,
      ),
      // More tasks...
    ];

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Multi-view Calendar')),
        body: OxeanCalendar(
          initialDate: DateTime.now(),
          initialViewMode: CalendarViewMode.month, // Start in month view
          tasks: tasks,
          onDaySelected: (date) {
            print('Selected date: $date');
          },
          onTaskSelected: (task) {
            print('Selected task: ${task.title}');
          },
          onAddTask: (date) {
            print('Add task at date: $date');
            // Show your task creation UI
          },
          showViewModeSwitch: true, // Show view switcher dropdown
          showTodayButton: true,
        ),
      ),
    );
  }
}

View Modes

The OxeanCalendar widget supports three different view modes:

• Month view (CalendarViewMode.month): Displays a full month grid with days and tasks
• Week view (CalendarViewMode.week): Displays a single week with hourly slots
• Day view (CalendarViewMode.day): Displays a single day with hourly slots

Users can switch between view modes using the dropdown in the calendar header (if showViewModeSwitch is set to true).

Customization

Basic Customization

The simplest way to customize the calendar appearance:

OxeanCalendar(
  // Optional initial date (defaults to today)
  initialDate: DateTime(2025, 4, 14),

  // Optional start year and end year for the date picker
  startYear: 2020,
  endYear: 2030,

  // Tasks to display on the calendar
  tasks: tasks,

  // Callbacks
  onDaySelected: (date) {
    // Do something with the selected date
  },
  onTaskSelected: (task) {
    // Do something with the selected task
  },
  onAddTask: (date) {
    // Handle adding a new task at the given date
  },

  // Initial view mode
  initialViewMode: CalendarViewMode.week,
  
  // UI Options
  showViewModeSwitch: true, // Show/hide view mode selector
  showTodayButton: true,    // Show/hide the Today button
)

Advanced Theming with CalendarTheme

For more detailed customization, use the theme property with a CalendarTheme object:

OxeanCalendar(
  // Other properties...
  
  theme: CalendarTheme(
    // Main colors
    todayColor: Colors.blue,
    selectedColor: Colors.orange,
    backgroundColor: Colors.white,
    borderColor: Colors.grey.shade300,
    
    // Text styles
    textStyles: CalendarTextStyles(
      // Day numbers
      dayNumberFontSize: 14.0,
      dayNumberColor: Colors.black87,
      
      // Selected day styling
      selectedDayNumberColor: Colors.white,
      selectedDayNumberFontWeight: FontWeight.bold,
      
      // Today styling
      todayDayNumberColor: Colors.white,
      
      // Task styling
      taskTitleFontSize: 12.0,
      taskTitleColor: Colors.black87,
      
      // Completed task styling
      completedTaskTitleColor: Colors.grey,
      completedTaskTitleDecoration: TextDecoration.lineThrough,
      
      // Optional custom font
      fontFamily: 'Roboto',
    ),
    
    // Spacing customization
    spacing: CalendarSpacing(
      small: 4.0,
      medium: 8.0, 
      large: 16.0,
      dayIndicatorSize: 24.0,
      taskIndicatorSize: 8.0,
    ),
    
    // Border radius customization
    radius: CalendarRadius(
      buttonRadius: 16.0,
      taskItemRadius: 4.0,
      calendarCellRadius: 0.0,
    ),
    
    // Size customization
    sizes: CalendarSizes(
      tasksPopupWidth: 600.0,
      tasksPopupHeight: 400.0,
      buttonHeight: 35.0,
    ),
  ),
)

CalendarTheme Structure

The CalendarTheme is composed of four main parts:

1. Main colors: Basic colors for the calendar

   • todayColor: Highlights today's date
   • selectedColor: Highlights the selected date
   • backgroundColor: Calendar background color
   • borderColor: Color for borders and dividers

2. TextStyles: Controls font styling for all text elements

   • Day numbers, headers, task titles, etc.
   • Supports custom font family
   • Separate styling for regular, selected, and today states
   • Special styling for completed tasks

3. Spacing: Controls all spacing and sizes

   • Basic spacing: small, medium, large
   • Component-specific spacing
   • Indicator and button sizes

4. Radius: Controls rounded corners

   • Buttons, task items, and calendar cells

5. Sizes: Controls dimensions of UI elements

   • Popup dimensions
   • Button heights

Additional information

For more examples and detailed documentation, check the example folder.

To run the example app:

cd example
flutter run

License

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