Flutter Calendar

A calendar is a crucial component of most mobile applications that involve scheduling and appointment management. Flutter provides several packages that contain pre-built calendar widgets that developers can use in their applications.

Syntax

There are different syntaxes depending on the Flutter calendar package being used.

// Example syntax for the table_calendar package
TableCalendar(
  firstDay: DateTime.utc(2022, 01, 01),
  lastDay: DateTime.utc(2023, 12, 31),
  focusedDay: _selectedDay,
  selectedDayPredicate: (day) => isSameDay(_selectedDay, day),
  onDaySelected: (selectedDay, focusedDay) {
    setState(() {
      _selectedDay = selectedDay;
      _focusedDay = focusedDay;  
    });
  },
),

Example

For this example, we will build a simple appointment scheduling application that uses the table_calendar package to display a monthly calendar. When a user taps on a day in the calendar, the application will display a dialog box where the user can create an appointment.

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

class CalendarPage extends StatefulWidget {
  @override
  _CalendarPageState createState() => _CalendarPageState();
}

class _CalendarPageState extends State<CalendarPage> {
  CalendarFormat _calendarFormat = CalendarFormat.month;
  DateTime _selectedDay = DateTime.now();
  DateTime _focusedDay = DateTime.now();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Appointments'),
      ),
      body: Column(
        children: [
          TableCalendar(
            firstDay: DateTime.utc(2022, 01, 01),
            lastDay: DateTime.utc(2023, 12, 31),
            focusedDay: _focusedDay,
            calendarFormat: _calendarFormat,
            selectedDayPredicate: (day) => isSameDay(_selectedDay, day),
            onDaySelected: (selectedDay, focusedDay) {
              setState(() {
                _selectedDay = selectedDay;
                _focusedDay = focusedDay;  
              });
              showDialog(
                context: context,
                builder: (_) => AppointmentDialog(selectedDay: selectedDay),
              );
            },
            onFormatChanged: (format) {
              setState(() {
                _calendarFormat = format;  
              });
            },
            calendarBuilders: CalendarBuilders(
              selectedBuilder: (context, date, _) => Container(
                margin: const EdgeInsets.all(4.0),
                alignment: Alignment.center,
                decoration: BoxDecoration(
                  color: Theme.of(context).primaryColor,
                  borderRadius: BorderRadius.circular(8.0),
                ),
                child: Text(
                  '${date.day}',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class AppointmentDialog extends StatelessWidget {
  final DateTime selectedDay;

  const AppointmentDialog({Key? key, required this.selectedDay}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: Text('Add Appointment'),
      content: Text('Create an appointment for ${selectedDay.toString()}'),
      actions: [
        TextButton(
          onPressed: () {
            Navigator.of(context).pop();
          },
          child: Text('Cancel'),
        ),
        ElevatedButton(
          onPressed: () {
            // Save appointment to database or backend
            Navigator.of(context).pop();
          },
          child: Text('Save'),
        ),
      ],
    );
  }
}

Output

The output of this example is a screen with a monthly calendar displayed using the table_calendar package. When a user taps on a day in the calendar, a dialog box is displayed where the user can create an appointment.

Explanation

We create a new stateful widget, CalendarPage, that displays a new TableCalendar widget from the table_calendar package. We set the firstDay and lastDay properties to set the range of dates to display, and the focusedDay and selectedDayPredicate properties to track which day is currently selected.

When a user taps on a day in the calendar, we update the selectedDay and focusedDay variables and display an AppointmentDialog widget with the selected day passed in as a parameter.

Use

Flutter calendar widgets can be used in any application where scheduling and appointment management is required. They can be customized to fit the visual style of the application and integrated with backends or databases to retrieve and save appointment data.

Important Points

• There are multiple Flutter packages available for building calendars, including table_calendar, syncfusion_flutter_calendar, and calendar_strip.
• Calendars can be customized to fit the visual style of the application using properties such as background color, font, and label format.
• Developers can integrate calendars with databases or backends to store and retrieve appointment data.

Summary

Flutter provides built-in packages for developing calendars in mobile applications. These widgets can be customized to fit the design of the application and integrated with backends or databases to enable appointment management. The table_calendar package is a popular choice for building calendars that support granular date selection.