Flutter日历插件jalali_table_calendar_plus的使用

发布于 1周前 作者 vueper 来自 Flutter

Flutter日历插件jalali_table_calendar_plus的使用

标题

Jalali Table Calendar Plus

内容

功能介绍

  • Table view of the calendar
  • Range selection
  • Customizable holidays
  • Modal for date selection
  • Event list definition for each date
  • Custom marker definition for each day

安装说明

Add this line to the pubspec.yaml file

jalali_table_calendar_plus: ^1.1.1

示例代码

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

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

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

  // This widget is the root of your application.
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late DateTime today;
  DateTime? dialogSelectedDate;
  late Map<DateTime, List<dynamic>> events;
  bool range = false;

  // optional default is current date
  DateTime initialDate = DateTime.now();

  [@override](/user/override)
  void initState() {
    DateTime now = DateTime.now();
    today = DateTime(now.year, now.month, now.day);
    events = {
      today: ['sample event', 6],
      today.add(const Duration(days: 1)): ['all types can use here', {"key": "value"}],
      today.add(const Duration(days: 2)): ['all types can use here', {"key": "value"}],
    };
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: Directionality(
        textDirection: TextDirection.rtl,
        child: Column(
          children: [
            JalaliTableCalendar(
              events: events,
              range: range,
              option: JalaliTableCalendarOption(
                daysOfWeekTitles: [
                  "شنبه",
                  "یکشنبه",
                  "دوشنبه",
                  "سه شنبه",
                  "چهارشنبه",
                  "پنجشنبه",
                  "جمعه"
                ],
              ),
              initialDate: initialDate,
              customHolyDays: [
                // use jalali month and day for this
                HolyDay(month: 4, day: 10), // For Repeated Days
                HolyDay(year: 1404, month: 1, day: 2), // For Only One Day
              ],
              onRangeSelected: (selectedDates) {
                for (DateTime date in selectedDates) {
                  debugPrint(date.toString());
                }
              },
              marker: (date, event) {
                if (event.isNotEmpty) {
                  return Positioned(
                      top: -2,
                      left: 1,
                      child: Container(
                          padding: const EdgeInsets.all(5),
                          decoration: const BoxDecoration(
                              shape: BoxShape.circle, color: Colors.blue),
                          child: Text(event.length.toString())));
                }
                return null;
              },
              onDaySelected: (DateTime date) {
                debugPrint(date.toString());
              },
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Text("انتخاب بازه ای"),
                Switch(
                    value: range,
                    onChanged: (value) {
                      setState(() {
                        range = value;
                      });
                    }),
              ],
            ),
            ElevatedButton(
                onPressed: () async {
                  DateTime? dateTime = await pickDate(
                    context: context,
                    initialDate: initialDate,
                  );
                  setState(() {
                    dialogSelectedDate = dateTime;
                  });
                },
                child: const Text('انتخاب تاریخ')),
            if (dialogSelectedDate != null)
              Text('تاریخ انتخاب شده به میلادی$dialogSelectedDate'),
          ],
        ),
      ),
    );
  }
}

圣诞节参数

  • year: Jalai Year
  • month: Jalai Month
  • day: Jalai Day

参数表

Parameter Usage Data Type
events A map of events for each day Map <DateTime, List>
range Used for range selection bool
customHolyDays A list of customizable holidays List
onRangeSelected Method executed after range selection is completed List
onDaySelected Method executed after single date selection DateTime
marker Method to receive user-designed markers for each day (DateTime date, List)

使用示例

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  [@override](/user/override)
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  late DateTime today;
  DateTime? dialogSelectedDate;
  late Map<DateTime, List<dynamic>> events;
  bool range = false;

  // optional default is current date
  DateTime initialDate = DateTime.now();

  [@override](/user/override)
  void initState() {
    DateTime now = DateTime.now();
    today = DateTime(now.year, now.month, now.day);
    events = {
      today: ['sample event', 6],
      today.add(const Duration(days: 1)): ['all types can use here', {"key": "value"}],
      today.add(const Duration(days:  e)): ['all types can use here', {"key": "value"}],
    };
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: Directionality(
        textDirection: TextDirection.rtl,
        child: Column(
          children: [
            JalaliTableCalendar(
              events: events,
              range: range,
              option: JalaliTableCalendarOption(
                daysOfWeekTitles: [
                  "شنبه",
                  "یکشنبه",
                  "دوشنبه",
                  "سه شنبه",
                  "چهارشنبه",
                  "پنجشنبه",
                  "جمعه"
                ],
              ),
              initialDate: initialDate,
              customHolyDays: [
                // use jalali month and day for this
                HolyDay(month: 4, day: 10), // For Repeated Days
                HolyDay(year: 1404, month: 1, day:  e), // For Only One Day
              ],
              onRangeSelected: (selectedDates) {
                for (DateTime date in selectedDates) {
                  debugPrint(date.toString());
                }
              },
              marker: (date, event) {
                if (event.isNotEmpty) {
                  return Positioned(
                      top: -e,
                      left: 1,
                      child: Container(
                          padding: const EdgeInsets.all(5),
                          decoration: const BoxDecoration(
                            shape: BoxShape.circle, color: Colors.blue,
                          ),
                          child: Text(event.length.toString()))));
                }
                return null;
              },
              onDaySelected: (DateTime date) {
                debugPrint(date.toString());
              },
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Text("انتخاب بازه ای"),
                Switch(
                    value: range,
                    onChanged: (value) {
                      setState(() {
                        range = value;
                      });
                    }),
              ],
            ),
            ElevatedButton(
                onPressed: () async {
                  DateTime? dateTime = await pickDate(
                    context: context,
                    initialDate: initialDate,
                  );
                  setState(() {
                    dialogSelectedDate = dateTime;
                  });
                },
                child: const Text('انتخاب تاریخ')),
            if (dialogSelectedDate != null)
              Text('تاریخ انتخاب شده به میلادی$dialogSelectedDate'),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter日历插件jalali_table_calendar_plus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter日历插件jalali_table_calendar_plus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用jalali_table_calendar_plus插件的示例代码。jalali_table_calendar_plus是一个支持Jalali（波斯）日历的Flutter插件。

1. 添加依赖

首先，在你的pubspec.yaml文件中添加jalali_table_calendar_plus依赖：

dependencies:
  flutter:
    sdk: flutter
  jalali_table_calendar_plus: ^最新版本号  # 请替换为最新版本号

然后运行flutter pub get来获取依赖。

2. 导入插件

在你的Dart文件中导入插件：

import 'package:jalali_table_calendar_plus/jalali_table_calendar_plus.dart';

3. 使用插件

下面是一个完整的示例，展示如何使用jalali_table_calendar_plus来创建一个简单的日历视图，并处理日期选择事件。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Jalali Calendar Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  CalendarController _controller;
  JalaliDateTime _selectedDay = JalaliDateTime.now();
  Set<JalaliDateTime> _selectedDates = HashSet();
  Map<JalaliDateTime, List<dynamic>> _events = {};

  @override
  void initState() {
    super.initState();
    _controller = CalendarController();

    // Initialize with some events
    _events[_selectedDay] = ['Event 1', 'Event 2'];

    // Listen for date selected events
    _controller.addListener(_handleSelectedDateChanged);
  }

  @override
  void dispose() {
    _controller.removeListener(_handleSelectedDateChanged);
    _controller.dispose();
    super.dispose();
  }

  void _handleSelectedDateChanged() {
    setState(() {
      _selectedDay = _controller.selectedDate;
    });
  }

  void _addEvent() {
    setState(() {
      if (_events[_selectedDay] == null) {
        _events[_selectedDay] = [];
      }
      _events[_selectedDay]!.add('New Event');
    });
  }

  Widget _buildEventMarkers(JalaliDateTime date) {
    if (_events[date] == null || _events[date]!.isEmpty) {
      return Container();
    }
    return Positioned(
      right: 0,
      bottom: 0,
      child: Badge(
        badgeContent: Text(
          '${_events[date]!.length}',
          style: TextStyle(color: Colors.white, fontSize: 12),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Jalali Calendar Demo'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Expanded(
            child: JalaliTableCalendar(
              controller: _controller,
              firstDay: JalaliDateTime(1390, 1, 1), // Adjust as needed
              lastDay: JalaliDateTime(1400, 12, 31), // Adjust as needed
              locale: 'fa',
              selectedDay: _selectedDay,
              selectedDays: _selectedDates,
              today: JalaliDateTime.now(),
              onDaySelected: (date, events) {
                setState(() {
                  _selectedDay = date;
                  _selectedDates = {date};
                });
              },
              builders: {
                "markers": _buildEventMarkers,
              },
            ),
          ),
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 8.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Text(
                  'Selected Date: ${_selectedDay.toLocal()}',
                  style: TextStyle(fontSize: 16),
                ),
                ElevatedButton(
                  onPressed: _addEvent,
                  child: Text('Add Event'),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

解释

  1. 依赖添加：在pubspec.yaml文件中添加jalali_table_calendar_plus依赖。
  2. 导入插件：在Dart文件中导入插件。
  3. 创建控制器：在_MyHomePageState类中创建一个CalendarController实例。
  4. 初始化事件：在initState方法中初始化一些事件，并监听日期选择的变化。
  5. 构建日历：使用JalaliTableCalendar小部件构建日历视图。
  6. 处理事件：使用onDaySelected回调处理日期选择事件，并在事件标记构建器中显示事件数量。

以上代码展示了如何在Flutter项目中使用jalali_table_calendar_plus插件来显示和处理Jalali日历。你可以根据需要进一步自定义和扩展这个示例。

回到顶部