emor_calendar 0.0.1

This Flutter package provides a customizable calendar with both monthly and weekly views, allowing users to easily navigate and select dates. The package also includes an event calendar widget for Flu [...]

emor_calendar

Description

This Flutter package provides a customizable calendar with both monthly and weekly views, allowing users to easily navigate and select dates. The package also includes an event calendar widget for Flutter with support for dynamic events, date range restrictions, and event dot colors.

Make sure to check out examples for more details.

Features

• Monthly Calendar View: Displays a full month with selectable dates. Highlights the current date and marks Sundays in red.
• Weekly Calendar View: Shows a week at a time with swipe navigation between weeks.
• Event List: Displays a list of events for the selected day, with each event item bordered and padded for clarity.

Installation

Add this package to your project by including it in your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  emor_calendar: ^0.0.1 

Then, run:

flutter pub get

Usage

Monthly Calendar

import 'package:emor_calendar/emorphis_month_calendar.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Monthly Calendar')),
        body: EmorphisMonthCalendar(),
      ),
    );
  }
}

Weekly Calendar

import 'package:emor_calendar/emorphis_week_calendar.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Weekly Calendar')),
        body: EmorphisWeekCalendar(),
      ),
    );
  }
}

Event List

The event list is automatically shown when you select a date with events in either the monthly or weekly calendar views. Customize the event list by modifying the _buildEventList method in the emorphis_calendar.dart file.

import 'package:emor_calendar/emorphis_week_calendar.dart';


class EventCalendarScreen extends StatefulWidget {
  @override
  _EventCalendarScreenState createState() => _EventCalendarScreenState();
}

class _EventCalendarScreenState extends State<EventCalendarScreen> {
  DateTime _focusedDay = DateTime.now();
  DateTime _selectedDay =
      DateTime(DateTime.now().year, DateTime.now().month, DateTime.now().day);
  Map<DateTime, List<String>> _events = {};

  @override
  Widget build(BuildContext context) {
    DateTime today = DateTime.now();
    DateTime minDate = DateTime(today.year - 1, today.month, today.day);
    DateTime maxDate = DateTime(today.year + 1, today.month, today.day);

    return Scaffold(
      appBar: AppBar(
        title: const Text('Emorphis Event Calendar'),
        backgroundColor: Colors.blue.withOpacity(0.5),
        actions: [
          _buildAddEventButton(),
        ],
      ),
      body: Column(
        children: [
          EmorphisEventCalendar(
            focusedDay: _focusedDay,
            selectedDay: _selectedDay,
            events: _events,
            onDaySelected: (selectedDay) {
              setState(() {
                _selectedDay = selectedDay;
              });
            },
            onFocusedDayChanged: (focusedDay) {
              setState(() {
                _focusedDay = focusedDay;
              });
            },
            maxDate: maxDate,
            minDate: minDate,
          ),
          if (_events[_selectedDay] != null) _buildEventList(),
        ],
      ),
    );
  }

  Future<String?> _addEventDialog() {
    TextEditingController _controller = TextEditingController();

    return showDialog<String>(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: const Text("Add Event"),
          content: TextField(
            controller: _controller,
            decoration: const InputDecoration(hintText: 'Enter event details'),
          ),
          actions: [
            TextButton(
              onPressed: () {
                Navigator.of(context).pop();
              },
              child: const Text('Cancel'),
            ),
            TextButton(
              onPressed: () {
                Navigator.of(context).pop(_controller.text);
              },
              child: const Text('Add'),
            ),
          ],
        );
      },
    );
  }

  Widget _buildEventList() {
    return Expanded(
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
        child: ListView.builder(
          shrinkWrap: true,
          itemCount: _events[_selectedDay]?.length ?? 0,
          itemBuilder: (context, index) {
            return Container(
              padding: const EdgeInsets.all(10.0),
              margin: const EdgeInsets.only(bottom: 8.0),
              decoration: BoxDecoration(
                border: Border.all(color: Colors.black, width: 0.5),
                borderRadius: BorderRadius.circular(8.0),
              ),
              child: Text(_events[_selectedDay]![index]),
            );
          },
        ),
      ),
    );
  }

  Widget _buildAddEventButton() {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: ElevatedButton(
        onPressed: () async {
          String? event = await _addEventDialog();
          if (event != null && event.isNotEmpty) {
            final updatedEvents = Map<DateTime, List<String>>.from(_events);
            updatedEvents[_selectedDay] = updatedEvents[_selectedDay] ?? [];
            updatedEvents[_selectedDay]!.add(event);
            setState(() {
              _events = updatedEvents;
            });
          }
        },
        child: const Text("Add Event"),
      ),
    );
  }
}

API

EmorphisEventCalendar

• focusedDay: The currently focused day in the calendar.
• selectedDay: The currently selected day in the calendar.
• events: A map of events where the key is a DateTime and the value is a list of events.
• onDaySelected: Callback triggered when a day is selected.
• onFocusedDayChanged: Callback triggered when the focused day is changed.
• eventDotColor: Color of the event dot (default is red).
• minDate: Optional minimum date for the calendar.
• maxDate: Optional maximum date for the calendar.

License

This package is licensed under the MIT License. See the LICENSE file for more details.

Links

• GitHub Repository
• Documentation

Contributing

Contributions are welcome! Please feel free to submit a pull request or open an issue to discuss what you would like to change.