oxean_calendar_view 0.3.2

A Flutter package for displaying a calendar view with various customization options.

example/lib/main.dart

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Calendar View Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      // Add localizations support
      localizationsDelegates: const [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: const [
        Locale('pt', 'BR'), // Brazilian Portuguese
        Locale('en'), // English
        Locale('es'), // Spanish
        Locale('fr'), // French
        Locale('de'), // German
        Locale('ja'), // Japanese
        Locale('zh'), // Chinese
        // Add more locales as needed
      ],
      home: const CalendarDemo(),
    );
  }
}

class CalendarDemo extends StatefulWidget {
  const CalendarDemo({super.key});

  @override
  State<CalendarDemo> createState() => _CalendarDemoState();
}

class _CalendarDemoState extends State<CalendarDemo> {
  List<CalendarTask> _tasks = [];
  DateTime _selectedDate = DateTime.now();
  CalendarTask? _selectedTask;
  final CalendarViewMode _viewMode = CalendarViewMode.month;

  @override
  void initState() {
    super.initState();
    _generateSampleTasks();
  }

  void _generateSampleTasks() {
    final now = DateTime.now();
    final currentMonth = DateTime(now.year, now.month, 1);

    // Add some sample tasks for the current month
    _tasks.addAll([
      CalendarTask(
        id: '1',
        title: 'Team Meeting',
        description: 'Weekly team sync meeting to discuss project progress',
        date: DateTime(currentMonth.year, currentMonth.month, 5, 10, 0),
        color: Colors.blue,
      ),
      CalendarTask(
        id: '2',
        title: 'Project Review',
        description: 'End of sprint project review with stakeholders',
        date: DateTime(currentMonth.year, currentMonth.month, 10, 14, 30),
        color: Colors.green,
      ),
      CalendarTask(
        id: '3',
        title: 'Client Call',
        description: 'Discuss new requirements with client',
        date: DateTime(currentMonth.year, currentMonth.month, 15, 11, 0),
        color: Colors.orange,
      ),
      CalendarTask(
        id: '4',
        title: 'Dentist Appointment',
        description: 'Regular dental checkup at Dr. Smith\'s office',
        date: DateTime(currentMonth.year, currentMonth.month, 18, 9, 0),
        color: Colors.red,
      ),
      CalendarTask(
        id: '5',
        title: 'Tech Conference',
        description: 'Annual tech conference with focus on Flutter development',
        date: DateTime(currentMonth.year, currentMonth.month, 22, 9, 0),
        color: Colors.purple,
      ),
      CalendarTask(
        id: '6',
        title: 'Team Lunch',
        description: 'Team lunch to celebrate project completion',
        date: DateTime(currentMonth.year, currentMonth.month, 22, 12, 30),
        color: Colors.teal,
      ),
      CalendarTask(
        id: '7',
        title: 'Code Review',
        date: DateTime(now.year, now.month, now.day, 15, 0),
        color: Colors.indigo,
      ),
      CalendarTask(
        id: '8',
        title: 'Weekly Planning',
        description: 'Plan tasks and priorities for the upcoming week',
        date: DateTime(now.year, now.month, now.day, 9, 0),
        color: Colors.deepOrange,
        isCompleted: true,
      ),
      CalendarTask(
        id: '9',
        title: 'Gym Session',
        description: 'Regular workout session at the fitness center',
        date: DateTime(now.year, now.month, now.day, 18, 0),
        color: Colors.cyan,
      ),
      CalendarTask(
        id: '10',
        title: 'Dinner with Friends',
        description: 'Casual dinner at Italian restaurant downtown',
        date: DateTime(now.year, now.month, now.day, 20, 0),
        color: Colors.amber,
      ),
      CalendarTask(
        id: '11',
        title: 'Doctor Appointment',
        description: 'Annual health checkup with Dr. Johnson',
        date: DateTime(now.year, now.month, now.day, 16, 0),
        color: Colors.lime,
      ),
    ]);
  }

  void _onDaySelected(DateTime date) {
    setState(() {
      _selectedDate = date;
      _selectedTask = null; // Reset selected task when day changes
    });
  }

  void _onTaskSelected(CalendarTask task) {
    setState(() {
      _selectedTask = task;
    });
  }

  void _addTask(DateTime date) {
    // This would typically open a dialog to add a new task
    // For the demo, we'll add a random task to the selected date
    final newId = (_tasks.length + 1).toString();
    final newTask = CalendarTask(
      id: newId,
      title: 'New Task $newId',
      description: 'This is a description for the newly added task #$newId',
      date: date,
      color: Colors.primaries[_tasks.length % Colors.primaries.length],
    );

    setState(() {
      _tasks = [..._tasks, newTask];
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Oxean Calendar View'),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: Column(
        children: [
          Expanded(
            flex: 4, // Give more space to the calendar
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: OxeanCalendar(
                key: const Key('oxean_calendar'),
                initialDate: _selectedDate,
                initialViewMode: _viewMode,
                onDaySelected: _onDaySelected,
                onTaskSelected: _onTaskSelected,
                onAddTask: _addTask,
                tasks: _tasks,
                startYear: 1990, // Custom year range starts from 1990
                endYear: 2040, // Custom year range ends at 2040
                dimPastTasks: true,
              ),
            ),
          ),
          if (_selectedTask != null)
            Expanded(
              flex: 1, // Less space for task details
              child: Container(
                padding: const EdgeInsets.all(8.0),
                margin:
                    const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
                decoration: BoxDecoration(
                  color: _selectedTask!.color.withOpacity(0.1),
                  border: Border.all(color: _selectedTask!.color),
                  borderRadius: BorderRadius.circular(8.0),
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Row(
                      children: [
                        Container(
                          width: 12,
                          height: 12,
                          decoration: BoxDecoration(
                            color: _selectedTask!.color,
                            shape: BoxShape.circle,
                          ),
                          margin: const EdgeInsets.only(right: 8),
                        ),
                        Text(
                          'Task Details',
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 14.0,
                            color: _selectedTask!.color,
                          ),
                        ),
                      ],
                    ),
                    const SizedBox(height: 4.0),
                    Text(
                      'Title: ${_selectedTask!.title}',
                      style: const TextStyle(fontSize: 12.0),
                    ),
                    if (_selectedTask!.description.isNotEmpty)
                      Text(
                        'Description: ${_selectedTask!.description}',
                        style: const TextStyle(fontSize: 12.0),
                        maxLines: 2,
                        overflow: TextOverflow.ellipsis,
                      ),
                    Text(
                      'Date: ${_formatDate(_selectedTask!.date)}',
                      style: const TextStyle(fontSize: 12.0),
                    ),
                    Text(
                      'Status: ${_selectedTask!.isCompleted ? "Completed" : "Pending"}',
                      style: const TextStyle(fontSize: 12.0),
                    ),
                  ],
                ),
              ),
            ),
        ],
      ),
    );
  }

  String _formatDate(DateTime date) {
    return '${date.year}-${date.month.toString().padLeft(2, '0')}-${date.day.toString().padLeft(2, '0')} ${date.hour.toString().padLeft(2, '0')}:${date.minute.toString().padLeft(2, '0')}';
  }
}