Flutter SfCalendar（syncfusion_flutter_calendar） でカレンダー作成と一部のプロパティを利用してみます。
インストール
syncfusion_flutter_calendar install | Flutter package
The Flutter Calendar widget has nine built-in configurable views that provide basic functionalities for scheduling and representing appointments/events efficiently.
flutter pub add syncfusion_flutter_calendarまたは pubspec.yaml に追記してインストールします。
dependencies:
syncfusion_flutter_calendar: ^23.1.43flutter pub getカレンダーを表示する
まずはシンプルにカレンダーを表示するところから始めます。
main.dart
import 'package:syncfusion_flutter_calendar/calendar.dart';
class SFCalendarPage extends StatefulWidget {
const SFCalendarPage({super.key});
@override
State<SFCalendarPage> createState() => _SFCalendarPageState();
}
class _SFCalendarPageState extends State<SFCalendarPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: SfCalendar(
view: CalendarView.month,
));
}
}
日本語化する
「flutter_localizations」ライブラリを導入します。
pubspec.yaml の dependencies に flutter_localizations を追記します。
dependencies:
flutter_localizations:
sdk: flutterインストールします。
flutter pub getインポートします。
import 'package:flutter_localizations/flutter_localizations.dart';MaterialApp に、localizationsDelegates・supportedLocales・locale を追加します。
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
localizationsDelegates: const [
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
],
supportedLocales: const [
Locale('ja'),
],
locale: const Locale('ja'),
・・・・
ヘッダーの年月表示形式を変更します。 headerDateFormat プロパティでフォーマットを指定します。
@override
Widget build(BuildContext context) {
return Scaffold(
body: SfCalendar(
view: CalendarView.month,
headerDateFormat: 'yyyy年M月'
)
}サンプルでは yyyy年M月形式に変更しています。
日付選択する
CalendarController を追加します。
class _SFCalendarPageState extends State<SFCalendarPage> {
final CalendarController _calendarController = CalendarController(); // <- 追加
@override
initState() {
_calendarController.selectedDate = DateTime.now(); // <- 追加
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SfCalendar(
view: CalendarView.month,
controller: _calendarController, // <- 追加
));
}ヘッダーのスタイルを変更する
ヘッダーのスタイル
headerStyle property - SfCalendar class - calendar library - Dart API
API docs for the headerStyle property from the SfCalendar class, for the Dart programming language.SfCalendar(
view: CalendarView.month,
headerStyle: const CalendarHeaderStyle(
textStyle: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
)
月変更ナビゲーション
showNavigationArrow は月を次、前月に変更するナビゲーションを表示するかを設定します。
SfCalendar(
view: CalendarView.month,
showNavigationArrow: true,
)
今日の日付の色
todayHighlightColor で今日の日付をハイライトする color を選択します。
SfCalendar(
view: CalendarView.month,
todayHighlightColor: Colors.orangeAccent,
)
選択した日付のスタイル：selectionDecoration
selectionDecoration property - SfCalendar class - calendar library - Dart API
API docs for the selectionDecoration property from the SfCalendar class, for the Dart programming language.selectionDecoration は、選択した日付を装飾できます。
SfCalendar(
view: CalendarView.month,
selectionDecoration: BoxDecoration(
color: Colors.transparent,
border: Border.all(color: Colors.orangeAccent, width: 2),
borderRadius: const BorderRadius.all(Radius.circular(4)),
),
)サンプルでは線と角を丸くしてみました。
月表示のセルの設定：monthViewSettings
MonthViewSettings class - calendar library - Dart API
API docs for the MonthViewSettings class from the calendar library, for the Dart programming language.SfCalendar(
view: CalendarView.month,
// ...
monthViewSettings: const MonthViewSettings(
dayFormat: 'EEE',
appointmentDisplayCount: 2,
appointmentDisplayMode: MonthAppointmentDisplayMode.appointment,
navigationDirection: MonthNavigationDirection.horizontal),
showAgenda: false,
)
)- appointmentDisplayCount：セルに表示できるイベント数の最大数を指定できます。
- showAgenda：月の下にアジェンダを表示する。
操作イベント
カレンダーの表示更新イベント
onViewChanged property - SfCalendar class - calendar library - Dart API
API docs for the onViewChanged property from the SfCalendar class, for the Dart programming language.カレンダーの表示が更新されたときに呼び出されます。
スワイプで月を切り替えたときやプログラムで表示日付を変更した時など、 更新された日付などを取得することができます。
SfCalendar(
view: CalendarView.month,
// ...
onViewChanged: (viewChangedDetails) => {
print(viewChangedDetails.visibleDates[0]),
print(viewChangedDetails
.visibleDates[viewChangedDetails.visibleDates.length - 1])
},
)日付をタップしたイベント
onTap property - SfCalendar class - calendar library - Dart API
API docs for the onTap property from the SfCalendar class, for the Dart programming language.カレンダーの日付をタップしたときに呼び出されます。
SfCalendar(
view: CalendarView.month,
// ...
onTap: (calendarTapDetails) => {
print(calendarTapDetails.date),
print(calendarTapDetails.appointments),
},
)