diff --git a/Flutter/calendar/accessibility.md b/Flutter/calendar/accessibility.md index b5abc3747..cae33c7eb 100644 --- a/Flutter/calendar/accessibility.md +++ b/Flutter/calendar/accessibility.md @@ -11,7 +11,7 @@ documentation: ug ## Screen reader support -The [SfCalendar](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar-class.html). can easily be accessed by screen readers. Please find the following table to get spoken feedback about the inner element contents of the screen. +The [SfCalendar](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar-class.html) can easily be accessed by screen readers. Please find the following table to get spoken feedback about the inner element contents of the screen. ### Month view @@ -54,7 +54,7 @@ The [SfCalendar](https://pub.dev/documentation/syncfusion_flutter_calendar/lates ## Sufficient contrast -The [SfCalendar](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar-class.html). [theming](https://help.syncfusion.com/flutter/themes) support offers a consistent and standardized look, as well as the ability to set the colors for all UI elements. +The [SfCalendar](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar-class.html) [theming](https://help.syncfusion.com/flutter/themes) support offers a consistent and standardized look, as well as the ability to set the colors for all UI elements. The following APIs allow you to customize the colors of the following elements. * [todayHighlightColor](https://help.syncfusion.com/flutter/calendar/getting-started#today-highlight-color) @@ -70,7 +70,7 @@ The following APIs allow you to customize the colors of the following elements. ## Large fonts -The [SfCalendar](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar-class.html). font size can be adjusted automatically based on device settings and the font size scaled based on the `MediaQueryData.textScaleFactor`. And also it allows to change the font size of all UI elements in the calendar. +The [SfCalendar](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar-class.html) font size can be adjusted automatically based on device settings and the font size scaled based on the `MediaQueryData.textScaler`. And also it allows to change the font size of all UI elements in the calendar. * [appointmentTextStyle](https://help.syncfusion.com/flutter/calendar/appointments#appearance-customization) * [timeTextStyle](https://help.syncfusion.com/flutter/calendar/timeslot-views#time-text-appearance) * [dateTextStyle](https://help.syncfusion.com/flutter/calendar/schedule-view#day-header-customization) diff --git a/Flutter/calendar/appointment-resizing.md b/Flutter/calendar/appointment-resizing.md index c3ce6602f..277c3a51c 100644 --- a/Flutter/calendar/appointment-resizing.md +++ b/Flutter/calendar/appointment-resizing.md @@ -13,57 +13,90 @@ You can quickly change an appointment’s start and end times by resizing the ap ## Allow Appointment resize -[allowAppointmentResize](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/allowAppointmentResize.html) property allows to reschedule the appointment by resizing the appointment in desktop platforms. +[allowAppointmentResize](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/allowAppointmentResize.html) property allows you to reschedule the appointment by resizing the appointment in desktop platforms. {% tabs %} -{% highlight dart hl_lines="9" %} - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Container( - child: SfCalendar( - view: CalendarView.week, - dataSource: _getCalendarDataSource(), - allowAppointmentResize: true), +{% highlight dart hl_lines="20" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Container( + child: SfCalendar( + view: CalendarView.week, + dataSource: _getCalendarDataSource(), + allowAppointmentResize: true), + ), ), - ), - ); + ); + } +} + +_AppointmentDataSource _getCalendarDataSource() { + List appointments = []; + return _AppointmentDataSource(appointments); +} + +class _AppointmentDataSource extends CalendarDataSource { + _AppointmentDataSource(List source) { + appointments = source; + } } {% endhighlight %} {% endtabs %} -![appointment_resizing](images/appointments/appointment_resize.gif) +![appointment resizing](images/appointments/appointment_resize.gif) >**NOTE** * This feature is not applicable for mobile platforms. ## onAppointmentResizeStart -[onAppointmentResizeStart](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/onAppointmentResizeStart.html) callback is called whenever the appointment starts to resizing in SfCalendar. The [AppointmentResizeStartDetails](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/AppointmentResizeStartDetails-class.html) arguments contains the resizing appointment, and resource details. +[onAppointmentResizeStart](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/onAppointmentResizeStart.html) callback is called whenever the appointment starts resizing in SfCalendar. The [AppointmentResizeStartDetails](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/AppointmentResizeStartDetails-class.html) arguments contains the resizing appointment, and resource details. * [appointment](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/AppointmentResizeStartDetails/appointment.html) - Get the resizing appointment details. * [resource](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/AppointmentResizeStartDetails/resource.html) - Get the resource details. {% tabs %} -{% highlight dart hl_lines="10 17 18 19 20" %} - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Container( - child: SfCalendar( - view: CalendarView.week, - dataSource: _getCalendarDataSource(), - allowAppointmentResize: true, - onAppointmentResizeStart: resizeStart, +{% highlight dart hl_lines="12 19 20 21 22" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Container( + child: SfCalendar( + view: CalendarView.week, + dataSource: _getCalendarDataSource(), + allowAppointmentResize: true, + onAppointmentResizeStart: resizeStart, + ), ), ), - ), - ); + ); + } } void resizeStart(AppointmentResizeStartDetails appointmentResizeStartDetails) { @@ -75,7 +108,7 @@ void resizeStart(AppointmentResizeStartDetails appointmentResizeStartDetails) { {% endtabs %} ## onAppointmentResizeUpdate -[onAppointmentResizeUpdate](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/onAppointmentResizeUpdate.html) callback is called whenever the appointment resizing in SfCalendar. The [AppointmentResizeUpdateDetails](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/AppointmentResizeUpdateDetails-class.html) arguments contains the resizing appointment, resizing time, resizing offset and resource details. +[onAppointmentResizeUpdate](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/onAppointmentResizeUpdate.html) callback is called whenever the appointment is being resized in SfCalendar. The [AppointmentResizeUpdateDetails](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/AppointmentResizeUpdateDetails-class.html) arguments contains the resizing appointment, resizing time, resizing offset and resource details. * [appointment](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/AppointmentResizeUpdateDetails/appointment.html) - Get the resize appointment. * [resizingTime](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/AppointmentResizeUpdateDetails/resizingTime.html) - Get the resize appointment time. @@ -83,22 +116,33 @@ void resizeStart(AppointmentResizeStartDetails appointmentResizeStartDetails) { * [resource](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/AppointmentResizeUpdateDetails/resource.html) - Get the resource details. {% tabs %} -{% highlight dart hl_lines="10 17 18 19 20 21 22" %} - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Container( - child: SfCalendar( - view: CalendarView.week, - dataSource: _getCalendarDataSource(), - allowAppointmentResize: true, - onAppointmentResizeUpdate: resizeUpdate, +{% highlight dart hl_lines="12 19 20 21 22 23 24" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Container( + child: SfCalendar( + view: CalendarView.week, + dataSource: _getCalendarDataSource(), + allowAppointmentResize: true, + onAppointmentResizeUpdate: resizeUpdate, + ), ), ), - ), - ); + ); + } } void resizeUpdate(AppointmentResizeUpdateDetails appointmentResizeUpdateDetails) { @@ -112,7 +156,7 @@ void resizeUpdate(AppointmentResizeUpdateDetails appointmentResizeUpdateDetails) {% endtabs %} ## onAppointmentResizeEnd -[onAppointmentResizeEnd](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/onAppointmentResizeEnd.html) callback is called whenever the appointment resizing end in the SfCalendar. The [AppointmentResizeEndDetails](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/AppointmentResizeEndDetails-class.html) arguments contains the resized appointment, start time, end time and resource details. +[onAppointmentResizeEnd](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/onAppointmentResizeEnd.html) callback is called whenever the appointment resizing ends in the SfCalendar. The [AppointmentResizeEndDetails](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/AppointmentResizeEndDetails-class.html) arguments contains the resized appointment, start time, end time and resource details. * [appointment](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/AppointmentResizeEndDetails/appointment.html) - Get the resized appointment details. * [startTime](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/AppointmentResizeEndDetails/startTime.html) - Get the start time. @@ -120,22 +164,33 @@ void resizeUpdate(AppointmentResizeUpdateDetails appointmentResizeUpdateDetails) * [resource](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/AppointmentResizeEndDetails/resource.html) - Get the resource details. {% tabs %} -{% highlight dart hl_lines="10 17 18 19 20 21 22" %} - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Container( - child: SfCalendar( - view: CalendarView.week, - dataSource: _getCalendarDataSource(), - allowAppointmentResize: true, - onAppointmentResizeEnd: resizeEnd, +{% highlight dart hl_lines="12 19 20 21 22 23 24" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Container( + child: SfCalendar( + view: CalendarView.week, + dataSource: _getCalendarDataSource(), + allowAppointmentResize: true, + onAppointmentResizeEnd: resizeEnd, + ), ), ), - ), - ); + ); + } } void resizeEnd(AppointmentResizeEndDetails appointmentResizeEndDetails) { diff --git a/Flutter/calendar/appointments.md b/Flutter/calendar/appointments.md index 0c29306cf..680107bb5 100644 --- a/Flutter/calendar/appointments.md +++ b/Flutter/calendar/appointments.md @@ -12,20 +12,31 @@ documentation: ug SfCalendar widget has a built-in capability to handle the appointment arrangement internally based on the [CalendarDataSource](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource-class.html). [Appointment](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/Appointment-class.html) is a class, which holds the details about the appointment to be rendered in calendar. {% tabs %} -{% highlight dart hl_lines="8 15 16 17 18 19 20 21 22 23 24 26 27 29 30 31 32 33" %} +{% highlight dart hl_lines="16 23 24 25 26 27 28 29 30 31 32 34 35 37 38 39 40 41" %} -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Container( - child: SfCalendar( - view: CalendarView.week, - dataSource: _getCalendarDataSource(), +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Container( + child: SfCalendar( + view: CalendarView.week, + dataSource: _getCalendarDataSource(), + ), ), ), - ), - ); + ); + } } _AppointmentDataSource _getCalendarDataSource() { @@ -57,23 +68,26 @@ class _AppointmentDataSource extends CalendarDataSource { | Property Name | Description | |-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------| -| [getStartTime](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource/getStartTime.html) | Maps the property name of custom class, which is equivalent for [startTime](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/Appointment/startTime.html) of `Appointment`. | -| [getEndTime](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource/getEndTime.html) | Maps the property name of custom class, which is equivalent for [endTime](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/Appointment/endTime.html) of `Appointment`. | -| [getStartTimeZone](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource/getStartTimeZone.html) | Maps the property name of custom class, which is equivalent for [startTimeZone](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/Appointment/startTimeZone.html) of `Appointment`. | -| [getEndTimeZone](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource/getEndTimeZone.html) | Maps the property name of custom class, which is equivalent for [endTimeZone](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/Appointment/endTimeZone.html) of `Appointment`. | -| [getSubject](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource/getSubject.html) | Maps the property name of custom class, which is equivalent for [subject](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/Appointment/subject.html) of `Appointment`. | -| [getColor](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource/getColor.html) | Maps the property name of custom class, which is equivalent for [color](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/Appointment/color.html) of `Appointment`. | -| [isAllDay](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource/isAllDay.html) | Maps the property name of custom class, which is equivalent for [isAllDay](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/Appointment/isAllDay.html) of `Appointment`. | -| [getRecurrenceRule](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource/getRecurrenceRule.html) | Maps the property name of custom class, which is equivalent for [recurrenceRule](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/Appointment/recurrenceRule.html) of `Appointment`. | -| [getNotes](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource/getNotes.html) | Maps the property name of custom class which is equivalent for [notes](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/Appointment/notes.html)` of `Appointment`. | -| [getLocation](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource/getLocation.html) | Maps the property name of custom class, which is equivalent for `location` of `Appointment`. | -| [getRecurrenceExceptionDates](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource/getRecurrenceExceptionDates.html) | Maps the property name of custom class, which is equivalent for [recurrenceExceptionDates](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/Appointment/recurrenceExceptionDates.html) of `Appointment`. | +| [getStartTime](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource/getStartTime.html) | Maps the property name of custom class, which is equivalent to [startTime](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/Appointment/startTime.html) of `Appointment`. | +| [getEndTime](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource/getEndTime.html) | Maps the property name of custom class, which is equivalent to [endTime](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/Appointment/endTime.html) of `Appointment`. | +| [getStartTimeZone](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource/getStartTimeZone.html) | Maps the property name of custom class, which is equivalent to [startTimeZone](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/Appointment/startTimeZone.html) of `Appointment`. | +| [getEndTimeZone](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource/getEndTimeZone.html) | Maps the property name of custom class, which is equivalent to [endTimeZone](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/Appointment/endTimeZone.html) of `Appointment`. | +| [getSubject](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource/getSubject.html) | Maps the property name of custom class, which is equivalent to [subject](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/Appointment/subject.html) of `Appointment`. | +| [getColor](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource/getColor.html) | Maps the property name of custom class, which is equivalent to [color](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/Appointment/color.html) of `Appointment`. | +| [isAllDay](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource/isAllDay.html) | Maps the property name of custom class, which is equivalent to [isAllDay](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/Appointment/isAllDay.html) of `Appointment`. | +| [getRecurrenceRule](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource/getRecurrenceRule.html) | Maps the property name of custom class, which is equivalent to [recurrenceRule](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/Appointment/recurrenceRule.html) of `Appointment`. | +| [getNotes](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource/getNotes.html) | Maps the property name of custom class which is equivalent to [notes](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/Appointment/notes.html)` of `Appointment`. | +| [getLocation](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource/getLocation.html) | Maps the property name of custom class, which is equivalent to `location` of `Appointment`. | +| [getRecurrenceExceptionDates](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource/getRecurrenceExceptionDates.html) | Maps the property name of custom class, which is equivalent to [recurrenceExceptionDates](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/Appointment/recurrenceExceptionDates.html) of `Appointment`. | >**NOTE** * Custom appointment class should contain two date time fields as mandatory. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; class MeetingDataSource extends CalendarDataSource { MeetingDataSource(List source){ @@ -119,11 +133,12 @@ class MeetingDataSource extends CalendarDataSource { {% endhighlight %} {% endtabs %} -You must call the notifier of the [CalendarDataSource](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource-class.html) when the datasource collection is modified to reflect the changes on UI that is an appointment added to the datasource or removed from the datasource. +You must call the notifier of the [CalendarDataSource](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource-class.html) when the datasource collection is modified to reflect the changes on UI. For example, when an appointment is added to the datasource or removed from the datasource. {% tabs %} -{% highlight Dart %} +{% highlight dart %} +/// Code fragment: `events` is a CalendarDataSource instance. events.dataSource.clear(); events.notifyListeners(CalendarDataSourceAction.reset, null); @@ -139,9 +154,33 @@ Whenever the datasource changes, to notify the datasource action (add, remove, a When dynamically adding appointments to a data source, we must notify the data source for the add action. {% tabs %} -{% highlight dart hl_lines="8 9 10 11 12 13 14 15 16" %} +{% highlight dart hl_lines="17 18 19 20 21 22 23 24 25 26 27 28 29 30 31" %} -@override +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatefulWidget { + const CalendarApp({super.key}); + + @override + State createState() => _CalendarAppState(); +} + +class _CalendarAppState extends State { + final CalendarController _controller = CalendarController(); + _AppointmentDataSource? _events; + + @override + void initState() { + super.initState(); + _events = _getCalendarDataSource(); + } + + @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( @@ -167,6 +206,18 @@ When dynamically adding appointments to a data source, we must notify the data s ); } + _AppointmentDataSource _getCalendarDataSource() { + List appointments = []; + return _AppointmentDataSource(appointments); + } +} + +class _AppointmentDataSource extends CalendarDataSource { + _AppointmentDataSource(List source) { + appointments = source; + } +} + {% endhighlight %} {% endtabs %} @@ -177,6 +228,7 @@ When we remove appointments from a data source dynamically, we must notify the d {% tabs %} {% highlight dart hl_lines="1 2 3 4" %} +/// Code fragment: `_events` is a CalendarDataSource instance. final Appointment removeAppointment = _events?.appointments![0]; _events?.appointments!.remove(removeAppointment); _events?.notifyListeners(CalendarDataSourceAction.remove, @@ -192,6 +244,7 @@ When we replace appointments in a data source dynamically, we must notify the da {% tabs %} {% highlight dart hl_lines="1 2 3" %} +/// Code fragment: `_events` is a CalendarDataSource instance. _events?.appointments!.clear(); _events?.notifyListeners( CalendarDataSourceAction.reset, _events!.appointments!); @@ -206,6 +259,7 @@ When dynamically adding resource to a data source, we must notify the data sourc {% tabs %} {% highlight dart hl_lines="1 2 3 4 5 6 7 8" %} +/// Code fragment: `_events` is a CalendarDataSource instance. final CalendarResource resource = CalendarResource( displayName: 'Sophia', color: Colors.red, @@ -225,6 +279,7 @@ When we remove resource from a data source dynamically, we must notify the data {% tabs %} {% highlight dart hl_lines="1 2 3 4 5" %} +/// Code fragment: `_events` is a CalendarDataSource instance. final CalendarResource resource = _events!.resources![0]; _events!.resources!.remove(resource); _events!.notifyListeners( @@ -241,6 +296,7 @@ When we replace resource in a data source dynamically, we must notify the data s {% tabs %} {% highlight dart hl_lines="1 2 3 4 5 6 7 8" %} +/// Code fragment: `_events` is a CalendarDataSource instance. final List collection = []; collection.add(CalendarResource( @@ -276,7 +332,10 @@ class Meeting { You can map those properties of `Meeting` class with our calendar widget by using the [CalendarDataSource](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource-class.html) override methods properties. {% tabs %} -{% highlight dart hl_lines="1 2 3 4 6 7 8 9 11 12 13 14 16 17 18 19 21 22 23 24 26 27 28 29 31 32 33 34 36 37 38 39 40" %} +{% highlight dart hl_lines="3 4 6 7 8 9 11 12 13 14 16 17 18 19 21 22 23 24 26 27 28 29 31 32 33 34 36 37 38 39 40" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; class MeetingDataSource extends CalendarDataSource { MeetingDataSource(List source){ @@ -325,20 +384,31 @@ class MeetingDataSource extends CalendarDataSource { You can schedule meetings for a day by setting `From` and `To` of Meeting class. Create meetings of type `List` and assign those appointments collection Meetings to the [appointments](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource/appointments.html) property of [CalendarDataSource](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource-class.html). {% tabs %} -{% highlight dart hl_lines="8 15 16 17 18 19 20 21 22 24 25" %} +{% highlight dart hl_lines="16 23 24 25 26 27 28 29 30 31 32 33" %} -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Container( - child: SfCalendar( - view: CalendarView.week, - dataSource: _getCalendarDataSource(), +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Container( + child: SfCalendar( + view: CalendarView.week, + dataSource: _getCalendarDataSource(), + ), ), ), - ), - ); + ); + } } MeetingDataSource _getCalendarDataSource() { @@ -645,7 +715,10 @@ class MeetingDataSource extends CalendarDataSource { You can schedule recurring meetings for daily, weekly, monthly, or yearly interval by setting [recurrenceRule](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/Appointment/recurrenceRule.html) of `Meeting` class. Create meetings of type List and assign those appointments collection Meetings to the [appointments](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource/appointments.html) property of [CalendarDataSource](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource-class.html). {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; @override Widget build(BuildContext context) { diff --git a/Flutter/calendar/builders.md b/Flutter/calendar/builders.md index 0c430d85a..7a8fac307 100644 --- a/Flutter/calendar/builders.md +++ b/Flutter/calendar/builders.md @@ -9,7 +9,7 @@ documentation: ug # Flutter Event Calendar Builders (SfCalendar) -The calendar allows you to create a responsive UI with conditions based on a widget's details, to design and create your custom view to the month cells and month header of schedule view in the calendar. +The calendar allows you to create a responsive UI with conditions based on a widget's details, to design and create your custom view for the month cells and month header of schedule view in the calendar. The calendar has two builders to create and assign your custom view: * Month cell builder @@ -27,10 +27,20 @@ The [MonthCellBuilder](https://pub.dev/documentation/syncfusion_flutter_calendar {% tabs %} -{% highlight dart hl_lines="7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26" %} +{% highlight dart hl_lines="15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34" %} -@override -Widget build(BuildContext context) { +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SfCalendar( @@ -56,12 +66,13 @@ Widget build(BuildContext context) { ); }, showDatePickerButton: true, - monthViewSettings: MonthViewSettings( + monthViewSettings: const MonthViewSettings( showTrailingAndLeadingDates: false, )), ), ); } +} {% endhighlight %} {% endtabs %} @@ -78,17 +89,27 @@ You can design your custom view and assign this view to the month header of a sc * [bounds](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ScheduleViewMonthHeaderDetails/bounds.html) - returns the header bounds. {% tabs %} -{% highlight dart hl_lines="8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30" %} - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: SfCalendar( - view: CalendarView.schedule, - dataSource: _calendarDataSource, - scheduleViewMonthHeaderBuilder: (BuildContext buildContext, - ScheduleViewMonthHeaderDetails details) { +{% highlight dart hl_lines="16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: SfCalendar( + view: CalendarView.schedule, + dataSource: _calendarDataSource, + scheduleViewMonthHeaderBuilder: (BuildContext buildContext, + ScheduleViewMonthHeaderDetails details) { final String monthName = _getMonthDate(details.date.month); return Stack( children: [ @@ -104,15 +125,16 @@ Widget build(BuildContext context) { bottom: 0, child: Text( monthName + ' ' + details.date.year.toString(), - style: TextStyle(fontSize: 18), + style: const TextStyle(fontSize: 18), ), ) ], ); }, showDatePickerButton: true), - ), - ); + ), + ); + } } {% endhighlight %} @@ -132,10 +154,25 @@ The [CalendarAppointmentBuilder](https://pub.dev/documentation/syncfusion_flutte * [isMoreAppointmentRegion](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarAppointmentDetails/isMoreAppointmentRegion.html): Determines whether the widget replaces the more appointment region. {% tabs %} -{% highlight dart hl_lines="11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106" %} +{% highlight dart hl_lines="12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107" %} + +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatefulWidget { + const CalendarApp({super.key}); + + @override + State createState() => _CalendarAppState(); +} -class MyAppState extends State { - CalendarController _controller = CalendarController(); +class _CalendarAppState extends State { + final CalendarController _controller = CalendarController(); @override Widget build(BuildContext context) { @@ -155,12 +192,12 @@ class MyAppState extends State { child: Column( children: [ Container( - padding: EdgeInsets.all(3), + padding: const EdgeInsets.all(3), height: 50, alignment: Alignment.topLeft, decoration: BoxDecoration( shape: BoxShape.rectangle, - borderRadius: BorderRadius.only( + borderRadius: const BorderRadius.only( topLeft: Radius.circular(5), topRight: Radius.circular(5)), color: meeting.color, @@ -172,7 +209,7 @@ class MyAppState extends State { children: [ Text( meeting.subject, - style: TextStyle( + style: const TextStyle( color: Colors.white, fontSize: 12, fontWeight: FontWeight.w500, @@ -186,7 +223,7 @@ class MyAppState extends State { : Text( 'Time: ${DateFormat('hh:mm a').format(meeting.startTime)} - ' + '${DateFormat('hh:mm a').format(meeting.endTime)}', - style: TextStyle( + style: const TextStyle( color: Colors.white, fontSize: 10, ), @@ -196,8 +233,8 @@ class MyAppState extends State { ), Container( height: details.bounds.height - 70, - padding: EdgeInsets.fromLTRB(3, 5, 3, 2), - color: meeting.color.withOpacity(0.8), + padding: const EdgeInsets.fromLTRB(3, 5, 3, 2), + color: meeting.color.withValues(alpha: 0.8), alignment: Alignment.topLeft, child: SingleChildScrollView( child: Column( @@ -205,7 +242,7 @@ class MyAppState extends State { crossAxisAlignment: CrossAxisAlignment.start, children: [ Padding( - padding: EdgeInsets.symmetric(vertical: 5), + padding: const EdgeInsets.symmetric(vertical: 5), child: Image( image: ExactAssetImage('images/' + image + '.png'), @@ -214,7 +251,7 @@ class MyAppState extends State { height: 60)), Text( meeting.notes!, - style: TextStyle( + style: const TextStyle( color: Colors.white, fontSize: 10, ), @@ -226,7 +263,7 @@ class MyAppState extends State { height: 20, decoration: BoxDecoration( shape: BoxShape.rectangle, - borderRadius: BorderRadius.only( + borderRadius: const BorderRadius.only( bottomLeft: Radius.circular(5), bottomRight: Radius.circular(5)), color: meeting.color, @@ -264,7 +301,10 @@ The [TimeRegionBuilder](https://pub.dev/documentation/syncfusion_flutter_calenda * [region](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeRegionDetails/region.html): The Region detail associated with the time region view. {% tabs %} -{% highlight dart hl_lines="22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44" %} +{% highlight dart hl_lines="1 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; List _getTimeRegions() { final List regions = []; @@ -272,19 +312,26 @@ List _getTimeRegions() { date = DateTime(date.year, date.month, date.day, 12, 0, 0); regions.add(TimeRegion( startTime: date, - endTime: date.add(Duration(hours: 2)), + endTime: date.add(const Duration(hours: 2)), enablePointerInteraction: false, - color: Colors.grey.withOpacity(0.2), + color: Colors.grey.withValues(alpha: 0.2), text: 'Break')); return regions; } -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: SfCalendar( +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: SfCalendar( view: CalendarView.week, specialRegions: _getTimeRegions(), timeRegionBuilder: @@ -295,7 +342,7 @@ Widget build(BuildContext context) { alignment: Alignment.center, child: Icon( Icons.restaurant, - color: Colors.grey.withOpacity(0.5), + color: Colors.grey.withValues(alpha: 0.5), ), ); } else if (timeRegionDetails.region.text == 'Not Available') { @@ -304,14 +351,15 @@ Widget build(BuildContext context) { alignment: Alignment.center, child: Icon( Icons.block, - color: Colors.grey.withOpacity(0.5), + color: Colors.grey.withValues(alpha: 0.5), ), ); } return Container(color: timeRegionDetails.region.color); }, )), - ); + ); + } } {% endhighlight %} @@ -331,7 +379,17 @@ The [ResourceViewHeaderBuilder](https://pub.dev/documentation/syncfusion_flutter {% tabs %} {% highlight dart hl_lines="7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25" %} -@override +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( @@ -339,7 +397,7 @@ The [ResourceViewHeaderBuilder](https://pub.dev/documentation/syncfusion_flutter view: CalendarView.timelineMonth, resourceViewHeaderBuilder: (BuildContext context, ResourceViewHeaderDetails details) { - if (details.resource.image != null) { + if (details.resource.image != null) { return Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, diff --git a/Flutter/calendar/callbacks.md b/Flutter/calendar/callbacks.md index 854a40100..39375a4e7 100644 --- a/Flutter/calendar/callbacks.md +++ b/Flutter/calendar/callbacks.md @@ -9,7 +9,7 @@ documentation: ug # Flutter Event Calendar Callbacks (SfCalendar) -Calendar supports the [ViewChangedCallback](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ViewChangedCallback.html) and [CalendarTapCallback](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarTapCallback.html) to interact with Flutter calendar. +The calendar supports the [ViewChangedCallback](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ViewChangedCallback.html) and [CalendarTapCallback](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarTapCallback.html) to interact with the Flutter calendar. ## View changed callback @@ -18,22 +18,33 @@ The [onViewChanged](https://pub.dev/documentation/syncfusion_flutter_calendar/la * [visibleDates](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ViewChangedDetails/visibleDates.html) - returns the current view visible dates collection. {% tabs %} -{% highlight dart hl_lines="8 9 10" %} - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Container( - child: SfCalendar( - view: CalendarView.week, - onViewChanged: (ViewChangedDetails details) { - List dates = details.visibleDates; - }, +{% highlight dart hl_lines="18 19 20" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Container( + child: SfCalendar( + view: CalendarView.week, + onViewChanged: (ViewChangedDetails details) { + List dates = details.visibleDates; + }, + ), ), ), - ), - ); + ); + } } {% endhighlight %} @@ -52,24 +63,35 @@ The [onTap](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/cal * [resource](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarTouchDetails/resource.html) - returns the tapped resource. {% tabs %} -{% highlight dart hl_lines="8 9 10 11 12" %} - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Container( - child: SfCalendar( - view: CalendarView.week, - onTap: (CalendarTapDetails details) { - dynamic appointment = details.appointments; - DateTime date = details.date!; - CalendarElement element = details.targetElement; - }, +{% highlight dart hl_lines="18 19 20 21 22" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Container( + child: SfCalendar( + view: CalendarView.week, + onTap: (CalendarTapDetails details) { + dynamic appointment = details.appointments; + DateTime date = details.date!; + CalendarElement element = details.targetElement; + }, + ), ), ), - ), - ); + ); + } } {% endhighlight %} @@ -81,7 +103,7 @@ Widget build(BuildContext context) { ## Calendar details callback -Return calendar details based on the given offset passed through argument by using the [getCalendarDetailsAtOffset](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarController/getCalendarDetailsAtOffset.html) method. +Return calendar details based on the given offset passed through an argument by using the [getCalendarDetailsAtOffset](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarController/getCalendarDetailsAtOffset.html) method. * [date](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarTouchDetails/date.html) - returns the date based on the given offset. * [appointments](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarTouchDetails/appointments.html) - returns the appointments based on the given offset. @@ -89,13 +111,30 @@ Return calendar details based on the given offset passed through argument by usi * [resource](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarTouchDetails/resource.html) - returns the resource based on the given offset. {% tabs %} -{% highlight dart hl_lines="6 7 8 9 10 11 12 13 14 15 16" %} +{% highlight dart hl_lines="6 7 8 9 10 11 12 13 14 15 16 19 21" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatefulWidget { + const CalendarApp({super.key}); + + @override + State createState() => _CalendarAppState(); +} + +class _CalendarAppState extends State { + final CalendarController _calendarController = CalendarController(); -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: MouseRegion( + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: MouseRegion( onHover: (PointerHoverEvent event) { CalendarDetails? details = _calendarController .getCalendarDetailsAtOffset!(event.localPosition); @@ -121,7 +160,7 @@ Widget build(BuildContext context) { {% endtabs %} ## Long press callback -The [onLongPress](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/onLongPress.html) callback is called, whenever the [SfCalendar](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar-class.html). elements are long pressed on view. +The [onLongPress](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/onLongPress.html) callback is called whenever the [SfCalendar](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar-class.html) elements are long pressed on view. The long-pressed date, appointments, and element details when the long-press action performed on element available in the [CalendarLongPressDetails](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarLongPressDetails-class.html). @@ -131,23 +170,36 @@ The long-pressed date, appointments, and element details when the long-press act * [resource](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarTouchDetails/resource.html) - returns the long-pressed calendar resource. {% tabs %} -{% highlight dart hl_lines="8 9 10 11 12" %} +{% highlight dart hl_lines="18 19 20 21 22" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); -@override -Widget build(BuildContext context) { + @override + Widget build(BuildContext context) { return MaterialApp( - home: Scaffold( - body: Container( - child: SfCalendar( - view: CalendarView.week, - onLongPress: (CalendarLongPressDetails details) { - DateTime date = details.date!; - dynamic appointments = details.appointments; - CalendarElement view = details.targetElement; - }, + home: Scaffold( + body: Container( + child: SfCalendar( + view: CalendarView.week, + onLongPress: (CalendarLongPressDetails details) { + DateTime date = details.date!; + dynamic appointments = details.appointments; + CalendarElement view = details.targetElement; + }, + ), + ), ), - ))); + ); } +} {% endhighlight %} {% endtabs %} diff --git a/Flutter/calendar/date-navigations.md b/Flutter/calendar/date-navigations.md index 1242c55b2..e7dc62d5a 100644 --- a/Flutter/calendar/date-navigations.md +++ b/Flutter/calendar/date-navigations.md @@ -13,38 +13,64 @@ documentation: ug Visible dates can be restricted between certain range of dates, using [minDate](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/minDate.html) and [maxDate](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/maxDate.html) properties in [SfCalendar](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar-class.html). It is applicable in all the schedule views. ### Minimum display date -[minDate](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/minDate.html) will restrict date navigations features of backward, also cannot swipe the control using touch gesture beyond the min date range. +[minDate](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/minDate.html) will restrict backward date navigation, and you cannot swipe the control using touch gesture beyond the min date range. {% tabs %} -{% highlight dart hl_lines="6" %} - -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfCalendar( - view: CalendarView.month, - minDate: DateTime(2020, 03, 05, 10 , 0, 0), - ) - ); +{% highlight dart hl_lines="16" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: SfCalendar( + view: CalendarView.month, + minDate: DateTime(2020, 03, 05, 10, 0, 0), + ), + ), + ); + } } {% endhighlight %} {% endtabs %} ### Maximum display date -[maxDate](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/maxDate.html) will restrict date navigations features of forward, and also cannot swipe the control using touch gesture beyond the max date range. +[maxDate](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/maxDate.html) will restrict forward date navigation, and you cannot swipe the control using touch gesture beyond the max date range. {% tabs %} -{% highlight dart hl_lines="6" %} - -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfCalendar( - view: CalendarView.month, - maxDate: DateTime(2020, 03, 25, 10 , 0, 0), - ) - ); +{% highlight dart hl_lines="16" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: SfCalendar( + view: CalendarView.month, + maxDate: DateTime(2020, 03, 25, 10, 0, 0), + ), + ), + ); + } } {% endhighlight %} @@ -62,13 +88,27 @@ Widget build(BuildContext context) { You can programmatically navigate dates in calendar widget by using the [displayDate](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarController/displayDate.html) property of [CalendarController](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarController-class.html). {% tabs %} -{% highlight dart hl_lines="2 6 16" %} +{% highlight dart hl_lines="3 12 22" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; -class MyAppState extends State { - CalendarController _calendarController = CalendarController(); +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatefulWidget { + const CalendarApp({super.key}); + + @override + State createState() => _CalendarAppState(); +} + +class _CalendarAppState extends State { + final CalendarController _calendarController = CalendarController(); @override - initState() { + void initState() { _calendarController.displayDate = DateTime(2022, 02, 05); super.initState(); } @@ -93,13 +133,27 @@ class MyAppState extends State { You can programmatically select the dates in calendar widget by [selectedDate](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarController/selectedDate.html) property of [CalendarController](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarController-class.html). {% tabs %} -{% highlight dart hl_lines="2 6 16" %} +{% highlight dart hl_lines="3 12 22" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatefulWidget { + const CalendarApp({super.key}); + + @override + State createState() => _CalendarAppState(); +} -class MyAppState extends State { - CalendarController _calendarController = CalendarController(); +class _CalendarAppState extends State { + final CalendarController _calendarController = CalendarController(); @override - initState() { + void initState() { _calendarController.selectedDate = DateTime(2020, 04, 10); super.initState(); } @@ -127,19 +181,33 @@ By default, the date can be navigated to next and previous views using touch ges You can use the [forward](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarController/forward.html) method of [CalendarController](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarController-class.html) for viewing the next immediate visible dates in the [SfCalendar](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar-class.html). It will move to next month if the calendar view is month, similarly it will move to next week for week view and next day for day view. {% tabs %} -{% highlight dart hl_lines="2 13 20" %} +{% highlight dart hl_lines="3 14 21" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} -class MyAppState extends State { - CalendarController _calendarController = CalendarController(); +class CalendarApp extends StatefulWidget { + const CalendarApp({super.key}); + + @override + State createState() => _CalendarAppState(); +} + +class _CalendarAppState extends State { + final CalendarController _calendarController = CalendarController(); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( - title: Text('Calendar Demo'), + title: const Text('Calendar Demo'), actions: [ - IconButton(icon: Icon(Icons.arrow_forward), + IconButton(icon: const Icon(Icons.arrow_forward), onPressed: () { _calendarController.forward!(); }, @@ -162,20 +230,34 @@ class MyAppState extends State { You can use the [backward](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarController/backward.html) method of `controller` for viewing the previous immediate visible dates in the [SfCalendar](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar-class.html). It will move to previous month if the calendar view is month, similarly it will move to previous week for week view and previous day for day view. {% tabs %} -{% highlight dart hl_lines="2 14 21" %} +{% highlight dart hl_lines="3 15 22" %} -class MyAppState extends State { - CalendarController _calendarController = CalendarController(); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatefulWidget { + const CalendarApp({super.key}); + + @override + State createState() => _CalendarAppState(); +} + +class _CalendarAppState extends State { + final CalendarController _calendarController = CalendarController(); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( - title: Text('Calendar Demo'), + title: const Text('Calendar Demo'), actions: [ IconButton( - icon: Icon(Icons.arrow_back), + icon: const Icon(Icons.arrow_back), onPressed: () { _calendarController.backward!(); }, @@ -198,14 +280,29 @@ class MyAppState extends State { You can enable the date picker for the calendar by using the [showDatePickerButton](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/showDatePickerButton.html) property in the calendar, which displays the date picker in the header view. It allows you to quickly navigate to the different calendar views. {% tabs %} -{% highlight dart hl_lines="5" %} +{% highlight dart hl_lines="15" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); -@override -Widget build(BuildContext context) { - return SfCalendar( - view: CalendarView.month, - showDatePickerButton: true, + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: SfCalendar( + view: CalendarView.month, + showDatePickerButton: true, + ), + ), ); + } } {% endhighlight %} @@ -222,14 +319,29 @@ To know more about how to customize the Date Picker's appearance in the Flutter You can enable the today button by using the [showTodayButton](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/showTodayButton.html) property in the calendar, which displays the today button in the header view. It allows you to quickly navigate from the current view to the today's view. {% tabs %} -{% highlight dart hl_lines="5" %} +{% highlight dart hl_lines="15" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} -@override -Widget build(BuildContext context) { - return SfCalendar( - view: CalendarView.month, - showTodayButton: true, +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: SfCalendar( + view: CalendarView.month, + showTodayButton: true, + ), + ), ); + } } {% endhighlight %} @@ -240,14 +352,29 @@ You can quickly navigate to the day view by a tap on the month cell and view hea {% tabs %} -{% highlight dart hl_lines="5" %} +{% highlight dart hl_lines="15" %} -@override -Widget build(BuildContext context) { - return SfCalendar( - view: CalendarView.month, - allowViewNavigation: true, +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: SfCalendar( + view: CalendarView.month, + allowViewNavigation: true, + ), + ), ); + } } {% endhighlight %} @@ -259,21 +386,35 @@ Widget build(BuildContext context) { You can quickly navigate to the different calendar views by using the [allowedViews](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/allowedViews.html) property in the [SfCalendar](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar-class.html). The views set to this property will display as a view button in the calendar header view. This UI will be responsive as showing more icons in the mobile view and will be updated based on the browser size change. {% tabs %} -{% highlight dart hl_lines="5 6 7 8 9 10 11 12" %} - -@override -Widget build(BuildContext context) { - return SfCalendar( - view: CalendarView.month, - allowedViews: - [ - CalendarView.day, - CalendarView.week, - CalendarView.workWeek, - CalendarView.month, - CalendarView.schedule - ], +{% highlight dart hl_lines="15 16 17 18 19 20 21 22" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: SfCalendar( + view: CalendarView.month, + allowedViews: [ + CalendarView.day, + CalendarView.week, + CalendarView.workWeek, + CalendarView.month, + CalendarView.schedule + ], + ), + ), ); + } } {% endhighlight %} @@ -286,15 +427,28 @@ Widget build(BuildContext context) { You can customize the swipe interaction of SfCalendar by using the [viewNavigationMode](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/viewNavigationMode.html). You can allow or restrict switching to the previous or next views using the swipe interaction of SfCalendar. By default, the view navigation mode is set to [viewNavigationMode.snap](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ViewNavigationMode.html). {% tabs %} -{% highlight dart hl_lines="6" %} +{% highlight dart hl_lines="16" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); -@override + @override Widget build(BuildContext context) { - return Scaffold( - body: SfCalendar( - view: CalendarView.day, - viewNavigationMode: ViewNavigationMode.snap, - ),); + return MaterialApp( + home: Scaffold( + body: SfCalendar( + view: CalendarView.day, + viewNavigationMode: ViewNavigationMode.snap, + ), + ), + ); } {% endhighlight %} diff --git a/Flutter/calendar/drag-drop.md b/Flutter/calendar/drag-drop.md index 003d1b589..42a49dd82 100644 --- a/Flutter/calendar/drag-drop.md +++ b/Flutter/calendar/drag-drop.md @@ -16,21 +16,43 @@ Easily reschedule an appointment by dragging it from one time slot or month cell To perform drag-and-drop operations within the calendar, enable the [allowDragAndDrop](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/allowDragAndDrop.html) property of SfCalendar. {% tabs %} -{% highlight dart hl_lines="9" %} - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Container( - child: SfCalendar( - view: CalendarView.week, - dataSource: _getCalendarDataSource(), - allowDragAndDrop: true +{% highlight dart hl_lines="20" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Container( + child: SfCalendar( + view: CalendarView.week, + dataSource: _getCalendarDataSource(), + allowDragAndDrop: true + ), ), ), - ), - ); + ); + } +} + +_AppointmentDataSource _getCalendarDataSource() { + List appointments = []; + return _AppointmentDataSource(appointments); +} + +class _AppointmentDataSource extends CalendarDataSource { + _AppointmentDataSource(List source) { + appointments = source; + } } {% endhighlight %} @@ -43,7 +65,7 @@ Widget build(BuildContext context) { ## onDragStart -[onDragStart](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/onDragStart.html) callback was called whenever the appointment starts to drag in the SfCalendar. The [AppointmentDragStartDetails](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/AppointmentDragStartDetails-class.html) arguments contains the dragging appointment and associated resource details. +[onDragStart](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/onDragStart.html) callback is called whenever the appointment starts to drag in the SfCalendar. The [AppointmentDragStartDetails](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/AppointmentDragStartDetails-class.html) arguments contains the dragging appointment and associated resource details. * [appointment](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/AppointmentDragStartDetails/appointment.html) - Get the dragged appointment details. * [resource](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/AppointmentDragStartDetails/resource.html) - Get the resource details. @@ -51,20 +73,31 @@ Widget build(BuildContext context) { {% tabs %} {% highlight dart hl_lines="10 17 18 19 20" %} -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Container( - child: SfCalendar( - view: CalendarView.week, - dataSource: _getCalendarDataSource(), - allowDragAndDrop: true, - onDragStart: dragStart, +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Container( + child: SfCalendar( + view: CalendarView.week, + dataSource: _getCalendarDataSource(), + allowDragAndDrop: true, + onDragStart: dragStart, + ), ), ), - ), - ); + ); + } } void dragStart(AppointmentDragStartDetails appointmentDragStartDetails) { @@ -77,10 +110,10 @@ void dragStart(AppointmentDragStartDetails appointmentDragStartDetails) { ## onDragUpdate -[onDragUpdate](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/onDragUpdate.html) callback was called whenever the appointment is dragging in the SfCalendar. The [AppointmentDragUpdateDetails](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/AppointmentDragUpdateDetails-class.html) arguments contains the dragging appointment, dragging time, dragging offset, source resource and target resource details. +[onDragUpdate](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/onDragUpdate.html) callback is called whenever the appointment is dragging in the SfCalendar. The [AppointmentDragUpdateDetails](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/AppointmentDragUpdateDetails-class.html) arguments contains the dragging appointment, dragging time, dragging offset, source resource, and target resource details. * [appointment](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/AppointmentDragUpdateDetails/appointment.html) - Get the dragged appointment details. -* [draggingTime](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/AppointmentDragUpdateDetails/draggingTime.html) - Get the resource details. +* [draggingTime](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/AppointmentDragUpdateDetails/draggingTime.html) - Get the dragging time. * [draggingPosition](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/AppointmentDragUpdateDetails/draggingPosition.html) - Get the drag position. * [sourceResource](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/AppointmentDragUpdateDetails/sourceResource.html) - Get the source resource details. * [targetResource](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/AppointmentDragUpdateDetails/targetResource.html) - Get the resource details. @@ -88,20 +121,31 @@ void dragStart(AppointmentDragStartDetails appointmentDragStartDetails) { {% tabs %} {% highlight dart hl_lines="10 17 18 19 20 21 22 23" %} -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Container( - child: SfCalendar( - view: CalendarView.week, - dataSource: _getCalendarDataSource(), - allowDragAndDrop: true, - onDragUpdate: dragUpdate, +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Container( + child: SfCalendar( + view: CalendarView.week, + dataSource: _getCalendarDataSource(), + allowDragAndDrop: true, + onDragUpdate: dragUpdate, + ), ), ), - ), - ); + ); + } } void dragUpdate(AppointmentDragUpdateDetails appointmentDragUpdateDetails) { @@ -117,30 +161,41 @@ void dragUpdate(AppointmentDragUpdateDetails appointmentDragUpdateDetails) { ## onDragEnd -[onDragEnd](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/onDragEnd.html) callback called when the dragging appointment is dropped in the SfCalendar. The [AppointmentDragEndDetails](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/AppointmentDragEndDetails-class.html) arguments contains the dropped appointment, dropping time, source and target resource details. +[onDragEnd](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/onDragEnd.html) callback is called when the dragging appointment is dropped in the SfCalendar. The [AppointmentDragEndDetails](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/AppointmentDragEndDetails-class.html) arguments contains the dropped appointment, dropping time, source and target resource details. * [appointment](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/AppointmentDragEndDetails/appointment.html) - Get the dragged appointment details. -* [droppingTime](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/AppointmentDragEndDetails/droppingTime.html) - Get the resource details. +* [droppingTime](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/AppointmentDragEndDetails/droppingTime.html) - Get the dropping time. * [sourceResource](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/AppointmentDragEndDetails/sourceResource.html) - Get the resource details. * [targetResource](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/AppointmentDragEndDetails/targetResource.html) - Get the target resource details. {% tabs %} {% highlight dart hl_lines="10 17 18 19 20 21 22" %} -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Container( - child: SfCalendar( - view: CalendarView.week, - dataSource: _getCalendarDataSource(), - allowDragAndDrop: true, - onDragEnd: dragEnd, +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Container( + child: SfCalendar( + view: CalendarView.week, + dataSource: _getCalendarDataSource(), + allowDragAndDrop: true, + onDragEnd: dragEnd, + ), ), ), - ), - ); + ); + } } void dragEnd(AppointmentDragEndDetails appointmentDragEndDetails) { @@ -158,24 +213,35 @@ void dragEnd(AppointmentDragEndDetails appointmentDragEndDetails) { You can restrict the navigation to the next/previous view when the dragging appointment reaches the start/end point of the current view in calendar by using the [allowNavigation](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/DragAndDropSettings/allowNavigation.html) property of [DragAndDropSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/DragAndDropSettings-class.html). Default value of [allowNavigation](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/DragAndDropSettings/allowNavigation.html) property is true. {% tabs %} -{% highlight dart hl_lines="10" %} - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Container( - child: SfCalendar( - view: CalendarView.week, - dataSource: _getCalendarDataSource(), - allowDragAndDrop: true, - dragAndDropSettings: DragAndDropSettings(allowNavigation: true), +{% highlight dart hl_lines="20" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Container( + child: SfCalendar( + view: CalendarView.week, + dataSource: _getCalendarDataSource(), + allowDragAndDrop: true, + dragAndDropSettings: const DragAndDropSettings(allowNavigation: true), + ), ), ), - ), - ); + ); + } } - + {% endhighlight %} {% endtabs %} @@ -184,24 +250,35 @@ Widget build(BuildContext context) { You can restrict the timeslot views auto scroll when the appointment reaches the start/end point of the view port in the timeslot views of calendar by using the [allowScroll](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/DragAndDropSettings/allowScroll.html) property of [DragAndDropSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/DragAndDropSettings/DragAndDropSettings.html). {% tabs %} -{% highlight dart hl_lines="10" %} - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Container( - child: SfCalendar( - view: CalendarView.week, - dataSource: _getCalendarDataSource(), - allowDragAndDrop: true, - dragAndDropSettings: DragAndDropSettings(allowScroll: true), +{% highlight dart hl_lines="20" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Container( + child: SfCalendar( + view: CalendarView.week, + dataSource: _getCalendarDataSource(), + allowDragAndDrop: true, + dragAndDropSettings: const DragAndDropSettings(allowScroll: true), + ), ), ), - ), - ); + ); + } } - + {% endhighlight %} {% endtabs %} @@ -210,24 +287,35 @@ Widget build(BuildContext context) { [showTimeIndicator](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/DragAndDropSettings/showTimeIndicator.html) - This property handles whether to show the time indicator or not, which shows the dragging appointment current time position in time ruler. Default value of the [showTimeIndicator](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/DragAndDropSettings/showTimeIndicator.html) property is true. {% tabs %} -{% highlight dart hl_lines="10" %} - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Container( - child: SfCalendar( - view: CalendarView.week, - dataSource: _getCalendarDataSource(), - allowDragAndDrop: true, - dragAndDropSettings: DragAndDropSettings(showTimeIndicator: true), +{% highlight dart hl_lines="20" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Container( + child: SfCalendar( + view: CalendarView.week, + dataSource: _getCalendarDataSource(), + allowDragAndDrop: true, + dragAndDropSettings: const DragAndDropSettings(showTimeIndicator: true), + ), ), ), - ), - ); + ); + } } - + {% endhighlight %} {% endtabs %} @@ -236,30 +324,41 @@ Widget build(BuildContext context) { Using [timeIndicatorStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/DragAndDropSettings/timeIndicatorStyle.html) property you can customize the text style of the time indicator. Also using [indicatorTimeFormat](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/DragAndDropSettings/indicatorTimeFormat.html) property you can customize the indicator time format. {% tabs %} -{% highlight dart hl_lines="10 11 12 13 14 15 16 17" %} - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Container( - child: SfCalendar( - view: CalendarView.week, - dataSource: _getCalendarDataSource(), - allowDragAndDrop: true, - dragAndDropSettings: DragAndDropSettings( - indicatorTimeFormat: 'hh:mm', - showTimeIndicator: true, - timeIndicatorStyle: TextStyle( - backgroundColor: Color(0xFFCEE5D0), - color: Colors.black, - fontSize: 15, +{% highlight dart hl_lines="20 21 22 23 24 25 26 27" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Container( + child: SfCalendar( + view: CalendarView.week, + dataSource: _getCalendarDataSource(), + allowDragAndDrop: true, + dragAndDropSettings: const DragAndDropSettings( + indicatorTimeFormat: 'hh:mm', + showTimeIndicator: true, + timeIndicatorStyle: TextStyle( + backgroundColor: Color(0xFFCEE5D0), + color: Colors.black, + fontSize: 15, + ), ), ), ), ), - ), - ); + ); + } } {% endhighlight %} @@ -272,24 +371,35 @@ Widget build(BuildContext context) { Using [autoNavigateDelay](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/DragAndDropSettings/autoNavigateDelay.html) property you can handle the navigation time when navigating to next/previous view while dragging the appointment. {% tabs %} -{% highlight dart hl_lines="10 11" %} - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Container( - child: SfCalendar( - view: CalendarView.week, - dataSource: _getCalendarDataSource(), - allowDragAndDrop: true, - dragAndDropSettings: - DragAndDropSettings(autoNavigateDelay: Duration(seconds: 1)), +{% highlight dart hl_lines="20 21" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Container( + child: SfCalendar( + view: CalendarView.week, + dataSource: _getCalendarDataSource(), + allowDragAndDrop: true, + dragAndDropSettings: const DragAndDropSettings( + autoNavigateDelay: Duration(seconds: 1)), + ), ), ), - ), - ); + ); + } } - + {% endhighlight %} {% endtabs %} \ No newline at end of file diff --git a/Flutter/calendar/getting-started.md b/Flutter/calendar/getting-started.md index 6ead139d5..7a7fcb500 100644 --- a/Flutter/calendar/getting-started.md +++ b/Flutter/calendar/getting-started.md @@ -11,7 +11,7 @@ documentation: ug This section explains the steps required to add the calendar widget and populate appointments to the calendar widget. This section covers only basic features needed to get started with Syncfusion® calendar widget. -To get start quickly with our [Flutter event calendar widget](https://www.syncfusion.com/flutter-widgets/flutter-calendar), you can check on this video. +To get started quickly with our [Flutter event calendar widget](https://www.syncfusion.com/flutter-widgets/flutter-calendar), you can refer to this video. @@ -25,6 +25,7 @@ Create a simple project using the instructions given in the [Getting Started wit Add the Syncfusion® Flutter calendar dependency to your pubspec.yaml file. +{% tabs %} {% highlight dart %} dependencies: @@ -32,25 +33,28 @@ dependencies: syncfusion_flutter_calendar: ^xx.x.xx {% endhighlight %} +{% endtabs %} -N> Here **xx.x.xx** denotes the current version of [Syncfusion® Flutter Calendar](https://pub.dev/packages/syncfusion_flutter_calendar/versions) package. +N> Here **xx.x.xx** denotes the current version of [Syncfusion® Flutter Calendar](https://pub.dev/packages/syncfusion_flutter_calendar/versions) package. It is recommended to use the latest available version from pub.dev. **Get packages** Run the following command to get the required packages. -{% highlight dart %} +{% tabs %} +{% highlight bash %} $ flutter pub get {% endhighlight %} +{% endtabs %} **Import package** Import the following package in your Dart code. {% tabs %} -{% highlight Dart %} +{% highlight dart %} import 'package:syncfusion_flutter_calendar/calendar.dart'; @@ -62,16 +66,30 @@ import 'package:syncfusion_flutter_calendar/calendar.dart'; After importing the package, initialize the calendar widget as a child of any widget. Here, the calendar widget is added as a child of the scaffold widget. {% tabs %} -{% highlight dart hl_lines="5" %} +{% highlight dart hl_lines="11" %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Container( - child: SfCalendar(), - )); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Container( + child: SfCalendar(), + ), + ), + ); + } } - + {% endhighlight %} {% endtabs %} @@ -79,17 +97,31 @@ Widget build(BuildContext context) { ## Change different calendar views -The SfCalendar widget provides nine different types of views to display dates. It can be assigned to the widget constructor by using the [view](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/view.html) property. By default, the widget is assigned day view. The current date will be displayed initially for all the calendar views. +The SfCalendar widget provides nine different types of views to display dates. It can be assigned to the widget constructor by using the [view](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/view.html) property. By default, the widget is assigned to the day view. The current date will be displayed initially for all the calendar views. {% tabs %} -{% highlight dart hl_lines="5" %} +{% highlight dart hl_lines="12" %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfCalendar( - view: CalendarView.month, - )); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: SfCalendar( + view: CalendarView.month, + ), + ), + ); + } } {% endhighlight %} @@ -103,17 +135,31 @@ The calendar widget has a built-in capability to handle appointment arrangement You can also map custom appointment data to our calendar. {% tabs %} -{% highlight dart hl_lines="6 12 13 14 15 16 17 18 19 20 21" %} +{% highlight dart hl_lines="16 22 23 24 25 26 27 28 29 30 31" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfCalendar( - view: CalendarView.month, - dataSource: MeetingDataSource(_getDataSource()), - monthViewSettings: MonthViewSettings( - appointmentDisplayMode: MonthAppointmentDisplayMode.appointment), - )); +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: SfCalendar( + view: CalendarView.month, + dataSource: MeetingDataSource(_getDataSource()), + monthViewSettings: const MonthViewSettings( + appointmentDisplayMode: MonthAppointmentDisplayMode.appointment), + ), + ), + ); + } } List _getDataSource() { @@ -127,7 +173,6 @@ List _getDataSource() { return meetings; } - class MeetingDataSource extends CalendarDataSource { MeetingDataSource(List source) { appointments = source; @@ -179,15 +224,29 @@ class Meeting { The calendar widget will be rendered with Sunday as the first day of the week, but you can customize it to any day by using the [firstDayOfWeek](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/firstDayOfWeek.html) property. {% tabs %} -{% highlight dart hl_lines="6" %} +{% highlight dart hl_lines="12" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfCalendar( - view: CalendarView.week, - firstDayOfWeek: 1, // Monday - )); + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: SfCalendar( + view: CalendarView.week, + firstDayOfWeek: 1, // Monday + ), + ), + ); + } } {% endhighlight %} @@ -200,20 +259,31 @@ Widget build(BuildContext context) { You can programmatically select the specific calendar month cell, and time slot by setting corresponding date and time value to the [initialSelectedDate](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/initialSelectedDate.html) property of calendar. By default, it is null. {% tabs %} -{% highlight dart hl_lines="8" %} - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Container( - child: SfCalendar( - view: CalendarView.week, - initialSelectedDate: DateTime(2019, 12, 20, 12), +{% highlight dart hl_lines="14" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Container( + child: SfCalendar( + view: CalendarView.week, + initialSelectedDate: DateTime(2019, 12, 20, 12), + ), ), ), - ), - ); + ); + } } {% endhighlight %} @@ -226,20 +296,31 @@ Widget build(BuildContext context) { You can change the initial display date of calendar by using the [initialDisplayDate](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/initialDisplayDate.html) property of calendar, which displays the calendar based on the given date time. By default, current date will be set as `initialDisplayDate`. {% tabs %} -{% highlight dart hl_lines="8" %} - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Container( - child: SfCalendar( - view: CalendarView.week, - initialDisplayDate: DateTime(2019, 12, 20, 7, 30), +{% highlight dart hl_lines="14" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Container( + child: SfCalendar( + view: CalendarView.week, + initialDisplayDate: DateTime(2019, 12, 20, 7, 30), + ), ), ), - ), - ); + ); + } } {% endhighlight %} @@ -252,25 +333,36 @@ Widget build(BuildContext context) { You can decorate the selection view of calendar by using the [selectionDecoration](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/selectionDecoration.html) property of Calendar. {% tabs %} -{% highlight dart hl_lines="8 9 10 11 12 13" %} - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Container( - child: SfCalendar( - view: CalendarView.week, - selectionDecoration: BoxDecoration( - color: Colors.transparent, - border: Border.all(color: Colors.red, width: 2), - borderRadius: const BorderRadius.all(Radius.circular(4)), - shape: BoxShape.rectangle, +{% highlight dart hl_lines="14 15 16 17 18 19" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Container( + child: SfCalendar( + view: CalendarView.week, + selectionDecoration: BoxDecoration( + color: Colors.transparent, + border: Border.all(color: Colors.red, width: 2), + borderRadius: const BorderRadius.all(Radius.circular(4)), + shape: BoxShape.rectangle, + ), ), ), ), - ), - ); + ); + } } {% endhighlight %} @@ -283,20 +375,31 @@ Widget build(BuildContext context) { You can customize the today highlight color of calendar by using the [todayHighlightColor](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/todayHighlightColor.html) property in calendar, which will highlight the today text in calendar view header, month cell, and agenda view. {% tabs %} -{% highlight dart hl_lines="8" %} - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Container( - child: SfCalendar( - view: CalendarView.week, - todayHighlightColor: Colors.red, +{% highlight dart hl_lines="14" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Container( + child: SfCalendar( + view: CalendarView.week, + todayHighlightColor: Colors.red, + ), ), ), - ), - ); + ); + } } {% endhighlight %} @@ -309,20 +412,31 @@ Widget build(BuildContext context) { You can customize the vertical and horizontal line color of calendar by using the [cellBorderColor](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/cellBorderColor.html) property in calendar. {% tabs %} -{% highlight dart hl_lines="8" %} - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Container( - child: SfCalendar( - view: CalendarView.week, - cellBorderColor: Colors.blue, +{% highlight dart hl_lines="14" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Container( + child: SfCalendar( + view: CalendarView.week, + cellBorderColor: Colors.blue, + ), ), ), - ), - ); + ); + } } {% endhighlight %} @@ -335,20 +449,31 @@ Widget build(BuildContext context) { The calendar widgets background color can be customized by using the [backgroundColor](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/backgroundColor.html) property in calendar. {% tabs %} -{% highlight dart hl_lines="8" %} - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Container( - child: SfCalendar( - view: CalendarView.week, - backgroundColor: Colors.lightBlue, +{% highlight dart hl_lines="14" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Container( + child: SfCalendar( + view: CalendarView.week, + backgroundColor: Colors.lightBlue, + ), ), ), - ), - ); + ); + } } {% endhighlight %} @@ -360,17 +485,30 @@ Widget build(BuildContext context) { Using the [showNavigationArrow](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/showNavigationArrow.html) property of the [SfCalendar](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar-class.html), you can navigate to the next or previous views of the calendar without swiping. {% tabs %} -{% highlight dart hl_lines="6" %} - -@override -Widget build(BuildContext context) { - return Container( - child: SfCalendar( - view: CalendarView.month, - showNavigationArrow: true, +{% highlight dart hl_lines="14" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: SfCalendar( + view: CalendarView.month, + showNavigationArrow: true, + ), ), ); } +} {% endhighlight %} {% endtabs %} @@ -385,21 +523,33 @@ Widget build(BuildContext context) { You can customize the padding of appointment view end to make touch position for timeslot and month cell by using the [cellEndPadding](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/cellEndPadding.html) property in the calendar, which allows you to tap the calendar cell when the cell has appointments. {% tabs %} -{% highlight dart hl_lines="7" %} +{% highlight dart hl_lines="15" %} -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( body: SfCalendar( - view: CalendarView.month, - cellEndPadding: 5, - dataSource: _getCalendarDataSource(), - monthViewSettings: MonthViewSettings( - appointmentDisplayMode: - MonthAppointmentDisplayMode.appointment), - )), - ); + view: CalendarView.month, + cellEndPadding: 5, + dataSource: _getCalendarDataSource(), + monthViewSettings: const MonthViewSettings( + appointmentDisplayMode: + MonthAppointmentDisplayMode.appointment), + ), + ), + ); + } } {% endhighlight %} @@ -412,17 +562,30 @@ Widget build(BuildContext context) { You can display the current time indicator in all timeslot views of SfCalendar by using the [showCurrentTimeIndicator](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/showCurrentTimeIndicator.html) property and you can also customize the color of current time indicator by using the [todayHighlightColor](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/todayHighlightColor.html) property. {% tabs %} -{% highlight dart hl_lines="6" %} - -@override -Widget build(BuildContext context) { - return Container( - child: SfCalendar( - view: CalendarView.day, - showCurrentTimeIndicator: true, - ), - ); +{% highlight dart hl_lines="14" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: SfCalendar( + view: CalendarView.day, + showCurrentTimeIndicator: true, + ), + ), + ); } +} {% endhighlight %} {% endtabs %} @@ -434,9 +597,19 @@ Widget build(BuildContext context) { Display the Week number of the year in all views except schedule view of the [SfCalendar](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar-class.html). by setting the [showWeekNumber](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/showWeekNumber.html) property as true and by default it is false. Week numbers will be displayed based on the ISO standard. {% tabs %} -{% highlight dart hl_lines="7" %} +{% highlight dart hl_lines="15" %} -@override +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( @@ -447,6 +620,7 @@ Display the Week number of the year in all views except schedule view of the [Sf ), ); } +} {% endhighlight %} {% endtabs %} @@ -458,9 +632,19 @@ Display the Week number of the year in all views except schedule view of the [Sf Customize the Week number text style of the calendar by using the [WeekNumberStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/WeekNumberStyle-class.html) property. Allows to customize the [textStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/WeekNumberStyle/textStyle.html) and the [backgroundColor](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/WeekNumberStyle/backgroundColor.html) in the Week number of the calendar. {% tabs %} -{% highlight dart hl_lines="8 9 10 11" %} +{% highlight dart hl_lines="16 17 18 19" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; -@override +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( @@ -475,6 +659,7 @@ Customize the Week number text style of the calendar by using the [WeekNumberSty ), ); } +} {% endhighlight %} {% endtabs %} @@ -497,5 +682,4 @@ Get the complete "getting started" sample from [here](https://github.com/Syncfus * [How to navigate to the previous or next views using navigation arrows in the Flutter event calendar (SfCalendar)](https://support.syncfusion.com/kb/article/10638/how-to-navigate-to-the-previous-or-next-views-using-navigation-arrows-in-the-flutter) * [How to customize the current day color in the Flutter event calendar (SfCalendar)](https://support.syncfusion.com/kb/article/10814/how-to-customize-the-current-day-color-in-the-flutter-calendar) * [How to show a particular week in a day view of Flutter event calendar(SfCalendar)](https://support.syncfusion.com/kb/article/10774/how-to-show-a-particular-week-in-a-day-view-of-flutter-calendar) -* [How to customize the selection using decoration in the Flutter event calendar (SfCalendar)](https://support.syncfusion.com/kb/article/10641/how-to-customize-the-selection-using-decoration-in-the-flutter-calendar) * [How to format the view header day and date in the Flutter event calendar (SfCalendar)](https://support.syncfusion.com/kb/article/10764/how-to-format-the-view-header-day-and-date-in-the-flutter-calendar) \ No newline at end of file diff --git a/Flutter/calendar/headers.md b/Flutter/calendar/headers.md index ec06699b2..f9dd7b9e1 100644 --- a/Flutter/calendar/headers.md +++ b/Flutter/calendar/headers.md @@ -21,16 +21,29 @@ You can customize the header of the calendar using the [headerStyle](https://pub You can customize the height for header in calendar using the [headerHeight](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/headerHeight.html) property in calendar. {% tabs %} -{% highlight dart hl_lines="6" %} - -@override -Widget build(BuildContext context) { - return Container( - child: SfCalendar( - view: CalendarView.week, - headerHeight: 100, - ), - ); +{% highlight dart hl_lines="16" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: SfCalendar( + view: CalendarView.week, + headerHeight: 100, + ), + ), + ); + } } {% endhighlight %} @@ -39,27 +52,40 @@ Widget build(BuildContext context) { ![Customize header height in calendar](images/headers/header-height.png) ### Header appearance -You can style the header using the [calendarHeaderStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarHeaderStyle-class.html) in calendar. You can change the background color, textStyle, and textAlignement using the properties such as [backgroundColor](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarHeaderStyle/backgroundColor.html), [textStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarHeaderStyle/textStyle.html), and [textAlign](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarHeaderStyle/textAlign.html) of header using the [headerStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/headerStyle.html) property in calendar. +You can style the header using the [calendarHeaderStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarHeaderStyle-class.html) in calendar. You can change the background color, textStyle, and text alignment using the properties such as [backgroundColor](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarHeaderStyle/backgroundColor.html), [textStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarHeaderStyle/textStyle.html), and [textAlign](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarHeaderStyle/textAlign.html) of header using the [headerStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/headerStyle.html) property in calendar. {% tabs %} -{% highlight dart hl_lines="6 7 8 9 10 11 12 13 14" %} - -@override -Widget build(BuildContext context) { - return Container( - child: SfCalendar( - view: CalendarView.week, - headerStyle: CalendarHeaderStyle( - textAlign: TextAlign.center, - backgroundColor: Color(0xFF7fcd91), - textStyle: TextStyle( - fontSize: 25, - fontStyle: FontStyle.normal, - letterSpacing: 5, - color: Color(0xFFffeaea), - fontWeight: FontWeight.w500)), - ), - ); +{% highlight dart hl_lines="16 17 18 19 20 21 22 23 24" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: SfCalendar( + view: CalendarView.week, + headerStyle: const CalendarHeaderStyle( + textAlign: TextAlign.center, + backgroundColor: Color(0xFF7fcd91), + textStyle: TextStyle( + fontSize: 25, + fontStyle: FontStyle.normal, + letterSpacing: 5, + color: Color(0xFFffeaea), + fontWeight: FontWeight.w500)), + ), + ), + ); + } } {% endhighlight %} @@ -72,15 +98,28 @@ Widget build(BuildContext context) { You can customize the header date format by using the [headerDateFormat](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/headerDateFormat.html) property of the [SfCalendar](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar-class.html). The [headerDateFormat](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/headerDateFormat.html) can be specified with a pattern string. {% tabs %} -{% highlight dart hl_lines="7" %} +{% highlight dart hl_lines="17" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); -@override + @override Widget build(BuildContext context) { - return Scaffold(appBar: AppBar(title: Text('Calendar'),), - body: SfCalendar( - view: CalendarView.month, - monthViewSettings: MonthViewSettings(numberOfWeeksInView: 3), - headerDateFormat: 'MMM,yyy', + return MaterialApp( + home: Scaffold( + appBar: AppBar(title: const Text('Calendar')), + body: SfCalendar( + view: CalendarView.month, + monthViewSettings: const MonthViewSettings(numberOfWeeksInView: 3), + headerDateFormat: 'MMM,yyy', + ), ), ); } @@ -95,21 +134,34 @@ You can customize the header date format by using the [headerDateFormat](https:/ You can customize the view header of the calendar using the [viewHeaderStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/viewHeaderStyle.html) and [viewHeaderHeight](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/viewHeaderHeight.html) properties in calendar. -### Customize view header height in calendar. +### Customize view header height in calendar You can customize the height for view header in calendar using the [viewHeaderHeight](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/viewHeaderHeight.html) property in calendar. {% tabs %} -{% highlight dart hl_lines="6" %} - -@override -Widget build(BuildContext context) { - return Container( - child: SfCalendar( - view: CalendarView.week, - viewHeaderHeight: 100, - ), - ); +{% highlight dart hl_lines="16" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: SfCalendar( + view: CalendarView.week, + viewHeaderHeight: 100, + ), + ), + ); + } } {% endhighlight %} @@ -122,26 +174,39 @@ Widget build(BuildContext context) { You can style the header using the [viewHeaderStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ViewHeaderStyle-class.html) properties in calendar. You can change the background color, dayTextStyle, and dateTextStyle using properties such as [backgroundColor](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ViewHeaderStyle/backgroundColor.html), [dayTextStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ViewHeaderStyle/dayTextStyle.html) and [dateTextStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ViewHeaderStyle/dateTextStyle.html) of view header using the [viewHeaderStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/viewHeaderStyle.html) property in calendar. {% tabs %} -{% highlight dart hl_lines="6 7 8 9 10 11 12 13 14 15 16" %} - -@override -Widget build(BuildContext context) { - return Container( - child: SfCalendar( - view: CalendarView.week, - viewHeaderStyle: ViewHeaderStyle( - backgroundColor: Colors.grey, - dayTextStyle: TextStyle( - fontSize: 18, - color: Color(0xFFffeaea), - fontWeight: FontWeight.w500), - dateTextStyle: TextStyle( - fontSize: 22, - color: Color(0xFFffeaea), - letterSpacing: 2, - fontWeight: FontWeight.w500)), - ), - ); +{% highlight dart hl_lines="16 17 18 19 20 21 22 23 24 25 26" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: SfCalendar( + view: CalendarView.week, + viewHeaderStyle: const ViewHeaderStyle( + backgroundColor: Colors.grey, + dayTextStyle: TextStyle( + fontSize: 18, + color: Color(0xFFffeaea), + fontWeight: FontWeight.w500), + dateTextStyle: TextStyle( + fontSize: 22, + color: Color(0xFFffeaea), + letterSpacing: 2, + fontWeight: FontWeight.w500)), + ), + ), + ); + } } {% endhighlight %} diff --git a/Flutter/calendar/load-more.md b/Flutter/calendar/load-more.md index a9aeec7dd..01a6e5b57 100644 --- a/Flutter/calendar/load-more.md +++ b/Flutter/calendar/load-more.md @@ -7,7 +7,7 @@ control: SfCalendar documentation: ug --- -# Load more in Flutter Event Calendar (SfCalendar). +# Load more in Flutter Event Calendar (SfCalendar) The Calendar provides the support to display an interactive view when the calendar view is changed, or the schedule view reaches its start or end offset. You can use the [loadMoreWidgetBuilder](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/loadMoreWidgetBuilder.html) builder to display the view while loading appointments in the calendar. @@ -16,33 +16,73 @@ The Calendar provides the support to display an interactive view when the calend Build your own custom widget by using the [loadMoreWidgetBuilder](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/loadMoreWidgetBuilder.html) that will be displayed as a loading indicator in the calendar when the calendar view changes, and in the calendar schedule view, the loading indicator will be displayed when it reaches the start or end position to load more appointments. {% tabs %} -{% highlight dart hl_lines="5 6 7 8 9 10 11 12 13 14 15 16 17 18" %} - -return SfCalendar( - controller: calendarController, - dataSource: calendarDataSource, - allowedViews: _allowedViews, - loadMoreWidgetBuilder: - (BuildContext context, LoadMoreCallback loadMoreAppointments) { - return FutureBuilder( - future: loadMoreAppointments(), - builder: (context, snapShot) { - return Container( - height: _calendarController.view == CalendarView.schedule - ? 50 - : double.infinity, - width: double.infinity, - alignment: Alignment.center, - child: CircularProgressIndicator( - valueColor: AlwaysStoppedAnimation(Colors.blue))); - }, - ); - }, - monthViewSettings: MonthViewSettings( - appointmentDisplayMode: MonthAppointmentDisplayMode.appointment, - appointmentDisplayCount: 4), - timeSlotViewSettings: TimeSlotViewSettings( - minimumAppointmentDuration: const Duration(minutes: 60))); +{% highlight dart hl_lines="20 21 22 23 24 25 26 27 28 29 30 31 32 33" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatefulWidget { + const CalendarApp({super.key}); + + @override + State createState() => _CalendarAppState(); +} + +class _CalendarAppState extends State { + final CalendarController _calendarController = CalendarController(); + late CalendarDataSource _calendarDataSource; + final List _allowedViews = [ + CalendarView.day, + CalendarView.week, + CalendarView.workWeek, + CalendarView.month, + CalendarView.schedule + ]; + + @override + void initState() { + super.initState(); + _calendarDataSource = _getCalendarDataSource(); + } + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: SfCalendar( + controller: _calendarController, + dataSource: _calendarDataSource, + allowedViews: _allowedViews, + loadMoreWidgetBuilder: + (BuildContext context, LoadMoreCallback loadMoreAppointments) { + return FutureBuilder( + future: loadMoreAppointments(), + builder: (context, snapShot) { + return Container( + height: _calendarController.view == CalendarView.schedule + ? 50 + : double.infinity, + width: double.infinity, + alignment: Alignment.center, + child: const CircularProgressIndicator( + valueColor: AlwaysStoppedAnimation(Colors.blue))); + }, + ); + }, + monthViewSettings: const MonthViewSettings( + appointmentDisplayMode: MonthAppointmentDisplayMode.appointment, + appointmentDisplayCount: 4), + timeSlotViewSettings: const TimeSlotViewSettings( + minimumAppointmentDuration: Duration(minutes: 60))), + ), + ), + ); + } +} {% endhighlight %} {% endtabs %} @@ -58,7 +98,10 @@ You can get the complete load more sample from this [link](https://github.com/Sy Update the appointments on-demand, when the loading indicator is displaying in the calendar by using the [handleLoadMore](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource/handleLoadMore.html) method in the [CalendarDataSource](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource-class.html), which allows adding the appointments to the data source, update the data source, and notify the listener to update the appointment on view. {% tabs %} -{% highlight dart hl_lines="7 8 9 19 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32" %} +{% highlight dart hl_lines="3 9 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; class _MeetingDataSource extends CalendarDataSource { _MeetingDataSource(List source) { @@ -67,7 +110,7 @@ class _MeetingDataSource extends CalendarDataSource { @override Future handleLoadMore(DateTime startDate, DateTime endDate) async { - await Future.delayed(Duration(seconds: 1)); + await Future.delayed(const Duration(seconds: 1)); final List meetings = []; DateTime date = DateTime(startDate.year, startDate.month, startDate.day); final DateTime appEndDate = @@ -75,7 +118,7 @@ class _MeetingDataSource extends CalendarDataSource { while (date.isBefore(appEndDate)) { final List? data = _dataCollection[date]; if (data == null) { - date = date.add(Duration(days: 1)); + date = date.add(const Duration(days: 1)); continue; } @@ -86,7 +129,7 @@ class _MeetingDataSource extends CalendarDataSource { meetings.add(meeting); } - date = date.add(Duration(days: 1)); + date = date.add(const Duration(days: 1)); } appointments!.addAll(meetings); diff --git a/Flutter/calendar/localization.md b/Flutter/calendar/localization.md index 5ddaf61c3..8b1b1439f 100644 --- a/Flutter/calendar/localization.md +++ b/Flutter/calendar/localization.md @@ -9,48 +9,60 @@ documentation: ug # Flutter Event Calendar Localization (SfCalendar) -By default, the calendar widget supports US English localizations. You can change the other languages by specifying the `MaterialApp` properties and adding the `flutter_localizations` package to your application. +By default, the calendar widget supports US English localizations. You can change to other languages by specifying the `MaterialApp` properties and adding the `flutter_localizations` package to your application. To use `flutter_localizations`, add the package as dependency to your `pubspec.yaml` file. -{% highlight dart %} +{% tabs %} +{% highlight yaml %} dependencies: -flutter_localizations: - sdk: flutter + flutter_localizations: + sdk: flutter {% endhighlight %} +{% endtabs %} Next, import the `flutter_localizations` library and specify `localizationsDelegates` and `supportedLocales` for `MaterialApp`. {% tabs %} -{% highlight dart hl_lines="1 6 7 8 9 10 11 12 13 14 15" %} +{% highlight dart hl_lines="3 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31" %} +import 'package:flutter/material.dart'; import 'package:flutter_localizations/flutter_localizations.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} -@override -Widget build(BuildContext context) { -return MaterialApp( - localizationsDelegates: [ - GlobalMaterialLocalizations.delegate, - GlobalWidgetsLocalizations.delegate, - ], - supportedLocales: [ - const Locale('zh'), - const Locale('ar'), - const Locale('ja'), - ], - locale: const Locale('zh'), - title: 'Calendar Localization', - home: Scaffold( - appBar: AppBar( - title: Text('Calendar'), - ), - body: SfCalendar( - view: CalendarView.month, - ), - ), - ); +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + localizationsDelegates: const [ + GlobalMaterialLocalizations.delegate, + GlobalWidgetsLocalizations.delegate, + ], + supportedLocales: const [ + Locale('zh'), + Locale('ar'), + Locale('ja'), + ], + locale: const Locale('zh'), + title: 'Calendar Localization', + home: Scaffold( + appBar: AppBar( + title: const Text('Calendar'), + ), + body: SfCalendar( + view: CalendarView.month, + ), + ), + ); + } } {% endhighlight %} @@ -61,50 +73,69 @@ Calendar custom text can be localized using the `syncfusion_localizations` packa To use `syncfusion_localizations`, add the package as dependency to `pubspec.yaml` file. -{% highlight dart %} +{% tabs %} +{% highlight yaml %} dependencies: -syncfusion_localizations: ^18.1.36 + syncfusion_localizations: ^xx.x.xx {% endhighlight %} +{% endtabs %} + +N> Here **xx.x.xx** denotes the current version of [Syncfusion® Flutter Localizations](https://pub.dev/packages/syncfusion_localizations/versions) package. It is recommended to use the latest available version from pub.dev. Next, import the `syncfusion_localizations` library. +{% tabs %} {% highlight dart %} import 'package:syncfusion_localizations/syncfusion_localizations.dart'; {% endhighlight %} +{% endtabs %} -Then, declare the `SfGlobalLocalizations.delegate` in the `localizationsDelegates`, which is used to localize the custom string (No events, No selected date) using in calendar and specify the `supportedLocales` as well. +Then, declare the `SfGlobalLocalizations.delegate` in the `localizationsDelegates`, which is used to localize the custom string (No events, No selected date) used in the calendar and specify the `supportedLocales` as well. {% tabs %} -{% highlight dart hl_lines="7" %} - -@override -Widget build(BuildContext context) { - return MaterialApp( - localizationsDelegates: [ - GlobalMaterialLocalizations.delegate, - GlobalWidgetsLocalizations.delegate, - SfGlobalLocalizations.delegate - ], - supportedLocales: [ - const Locale('zh'), - const Locale('ar'), - const Locale('ja'), - ], - locale: const Locale('zh'), - title: 'Calendar Localization', - home: Scaffold( - appBar: AppBar( - title: Text('Calendar'), - ), - body: SfCalendar( - view: CalendarView.month, - ), - ), - ); +{% highlight dart hl_lines="16" %} + +import 'package:flutter/material.dart'; +import 'package:flutter_localizations/flutter_localizations.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; +import 'package:syncfusion_localizations/syncfusion_localizations.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + localizationsDelegates: const [ + GlobalMaterialLocalizations.delegate, + GlobalWidgetsLocalizations.delegate, + SfGlobalLocalizations.delegate + ], + supportedLocales: const [ + Locale('zh'), + Locale('ar'), + Locale('ja'), + ], + locale: const Locale('zh'), + title: 'Calendar Localization', + home: Scaffold( + appBar: AppBar( + title: const Text('Calendar'), + ), + body: SfCalendar( + view: CalendarView.month, + ), + ), + ); + } } {% endhighlight %} diff --git a/Flutter/calendar/month-view.md b/Flutter/calendar/month-view.md index 55abd3ac7..548fb5177 100644 --- a/Flutter/calendar/month-view.md +++ b/Flutter/calendar/month-view.md @@ -1,30 +1,44 @@ --- layout: post title: Month view in Flutter Event Calendar | Syncfusion -description: Step-by-step guide to control time zone in Syncfusion Flutter Event Calendar—create appointments in different time zones and configure key features. +description: Step-by-step guide to manage the Syncfusion Flutter Event Calendar month view, including appointments, agenda display, blackout dates, and custom styling. platform: flutter control: SfCalendar documentation: ug --- -# Flutter Event Calendar Time Zone (SfCalendar) +# Flutter Event Calendar Month View (SfCalendar) -The `month` view of Flutter Event [Calendar](https://www.syncfusion.com/flutter-widgets/flutter-calendar) (SfCalendar) used to display entire dates of the specific month and current month by default initially. Current date color is differentiated with other dates of the current month, also the color differentiation for dates will be applicable for previous and next month dates. +The `month` view of Flutter Event [Calendar](https://www.syncfusion.com/flutter-widgets/flutter-calendar) (SfCalendar) is used to display entire dates of the specific month and current month by default initially. Current date color is differentiated with other dates of the current month, also the color differentiation for dates will be applicable for previous and next month dates. ## Month agenda view The calendar month view displays a divided agenda view that is used to show the selected date’s appointments below the month. You can show the agenda view by setting the [showAgenda](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthViewSettings/showAgenda.html) property to true in [MonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthViewSettings-class.html). {% tabs %} -{% highlight dart hl_lines="6" %} - -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfCalendar( - view: CalendarView.month, - monthViewSettings: MonthViewSettings(showAgenda: true), - )); +{% highlight dart hl_lines="16" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: SfCalendar( + view: CalendarView.month, + monthViewSettings: const MonthViewSettings(showAgenda: true), + ), + ), + ); + } } {% endhighlight %} @@ -45,21 +59,32 @@ You can handle the calendar month view appointment display by using the [appoint * [none](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthAppointmentDisplayMode.html) - appointment will not be displayed. {% tabs %} -{% highlight dart hl_lines="8 9" %} - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Container( - child: SfCalendar( - view: CalendarView.month, - monthViewSettings: MonthViewSettings( - appointmentDisplayMode: MonthAppointmentDisplayMode.appointment), +{% highlight dart hl_lines="18 19" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Container( + child: SfCalendar( + view: CalendarView.month, + monthViewSettings: const MonthViewSettings( + appointmentDisplayMode: MonthAppointmentDisplayMode.appointment), + ), ), ), - ), - ); + ); + } } {% endhighlight %} @@ -72,23 +97,34 @@ Widget build(BuildContext context) { You can customize the month agenda view height from calendar by using the [agendaViewHeight](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthViewSettings/agendaViewHeight.html) property of [MonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthViewSettings-class.html). By default, the agenda view will occupy the 30% height of the calendar height. {% tabs %} -{% highlight dart hl_lines="10" %} - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Container( - child: SfCalendar( - view: CalendarView.month, - monthViewSettings: MonthViewSettings( - showAgenda: true, - agendaViewHeight: 400, +{% highlight dart hl_lines="20" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Container( + child: SfCalendar( + view: CalendarView.month, + monthViewSettings: const MonthViewSettings( + showAgenda: true, + agendaViewHeight: 400, + ), ), ), ), - ), - ); + ); + } } {% endhighlight %} @@ -101,23 +137,34 @@ Widget build(BuildContext context) { You can customize the height of an appointment in agenda view by using the [agendaItemHeight](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthViewSettings/agendaItemHeight.html) property of [MonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthViewSettings-class.html). {% tabs %} -{% highlight dart hl_lines="10" %} - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Container( - child: SfCalendar( - view: CalendarView.month, - monthViewSettings: MonthViewSettings( - showAgenda: true, - agendaItemHeight: 70, +{% highlight dart hl_lines="20" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Container( + child: SfCalendar( + view: CalendarView.month, + monthViewSettings: const MonthViewSettings( + showAgenda: true, + agendaItemHeight: 70, + ), ), ), ), - ), - ); + ); + } } {% endhighlight %} @@ -130,20 +177,31 @@ Widget build(BuildContext context) { You can customize the number of appointments displayed in month cell using the [appointmentDisplayCount](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthViewSettings/appointmentDisplayCount.html) property of [MonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthViewSettings-class.html) in SfCalendar, by default Appointment display count is 3. {% tabs %} -{% highlight dart hl_lines="8" %} - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Container( - child: SfCalendar( - view: CalendarView.month, - monthViewSettings: MonthViewSettings(appointmentDisplayCount: 2), +{% highlight dart hl_lines="18" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Container( + child: SfCalendar( + view: CalendarView.month, + monthViewSettings: const MonthViewSettings(appointmentDisplayCount: 2), + ), ), ), - ), - ); + ); + } } {% endhighlight %} @@ -161,21 +219,32 @@ Widget build(BuildContext context) { MonthView of calendar can be navigated in both horizontal and vertical direction. You can change the direction of navigation using the [navigationDirection](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthViewSettings/navigationDirection.html) property of [MonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthViewSettings-class.html), by default Month navigation direction is Horizontal. {% tabs %} -{% highlight dart hl_lines="8 9" %} - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Container( - child: SfCalendar( - view: CalendarView.month, - monthViewSettings: MonthViewSettings( - navigationDirection: MonthNavigationDirection.horizontal), +{% highlight dart hl_lines="18 19" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Container( + child: SfCalendar( + view: CalendarView.month, + monthViewSettings: const MonthViewSettings( + navigationDirection: MonthNavigationDirection.horizontal), + ), ), ), - ), - ); + ); + } } {% endhighlight %} @@ -187,24 +256,40 @@ You can disable the interaction for a certain date in the month view and timelin You can customize the text style of blackout dates by using the [blackoutDatesTextStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/blackoutDatesTextStyle.html) property from the `SfCalendar.` {% tabs %} -{% highlight dart hl_lines="5 6 7 8 9 10 11 12 13 14 15 16" %} - -@override -Widget build(BuildContext context) { - return SfCalendar( - view: CalendarView.month, - blackoutDates: [ - DateTime(2020, 08, 10), - DateTime(2020, 08, 15), - DateTime(2020, 08, 20), - DateTime(2020, 08, 22), - DateTime(2020, 08, 24) - ], - blackoutDatesTextStyle: TextStyle( - fontWeight: FontWeight.w400, - fontSize: 13, - color: Colors.red, - decoration: TextDecoration.lineThrough)); +{% highlight dart hl_lines="15 16 17 18 19 20 21 22 23 24 25 26" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: SfCalendar( + view: CalendarView.month, + blackoutDates: [ + DateTime(2020, 08, 10), + DateTime(2020, 08, 15), + DateTime(2020, 08, 20), + DateTime(2020, 08, 22), + DateTime(2020, 08, 24) + ], + blackoutDatesTextStyle: const TextStyle( + fontWeight: FontWeight.w400, + fontSize: 13, + color: Colors.red, + decoration: TextDecoration.lineThrough)), + ), + ), + ); + } } {% endhighlight %} @@ -216,15 +301,31 @@ Widget build(BuildContext context) { You can hide the previous and next month dates of a calendar month view by using the [showTrailingAndLeadingDates](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthViewSettings/showTrailingAndLeadingDates.html) property in the [MonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthViewSettings-class.html) of the calendar. {% tabs %} -{% highlight dart hl_lines="6" %} - -@override -Widget build(BuildContext context) { - return SfCalendar( - view: CalendarView.month, - monthViewSettings: MonthViewSettings( - showTrailingAndLeadingDates: false, - )); +{% highlight dart hl_lines="16" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: SfCalendar( + view: CalendarView.month, + monthViewSettings: const MonthViewSettings( + showTrailingAndLeadingDates: false, + ), + ), + ), + ); + } } {% endhighlight %} @@ -238,20 +339,31 @@ Widget build(BuildContext context) { The number of weeks in the month view can be changed by setting the [numberOfWeeksInView](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthViewSettings/numberOfWeeksInView.html) property in [MonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthViewSettings-class.html). By default, `numberOfWeeksInView` starts from current week, and this can be modified using the [initialDisplayDate](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/initialDisplayDate.html) property of calendar, the two weeks calendar can be achieved by setting the `numberOfWeeksInView` property with the value 2. {% tabs %} -{% highlight dart hl_lines="8" %} - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Container( - child: SfCalendar( - view: CalendarView.month, - monthViewSettings: MonthViewSettings(numberOfWeeksInView: 2), +{% highlight dart hl_lines="18" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Container( + child: SfCalendar( + view: CalendarView.month, + monthViewSettings: const MonthViewSettings(numberOfWeeksInView: 2), + ), ), ), - ), - ); + ); + } } {% endhighlight %} @@ -268,20 +380,31 @@ Widget build(BuildContext context) { You can customize the day format of SfCalendar ViewHeader by using the [dayFormat](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthViewSettings/dayFormat.html) property of [MonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthViewSettings-class.html). {% tabs %} -{% highlight dart hl_lines="8" %} - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Container( - child: SfCalendar( - view: CalendarView.month, - monthViewSettings: MonthViewSettings(dayFormat: 'EEE'), +{% highlight dart hl_lines="18" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Container( + child: SfCalendar( + view: CalendarView.month, + monthViewSettings: const MonthViewSettings(dayFormat: 'EEE'), + ), ), ), - ), - ); + ); + } } {% endhighlight %} @@ -294,17 +417,27 @@ Widget build(BuildContext context) { You can customize the agenda view appointment and the selected date text style by using the [agendaStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthViewSettings/agendaStyle.html) property of [MonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthViewSettings-class.html). Agenda view [appointmentTextStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/AgendaStyle/appointmentTextStyle.html), [dayTextStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/AgendaStyle/dayTextStyle.html), [dateTextStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/AgendaStyle/dateTextStyle.html), and [backgroundColor](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/AgendaStyle/backgroundColor.html) can be customized using [AgendaStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/AgendaStyle-class.html) properties. {% tabs %} -{% highlight dart hl_lines="11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27" %} - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Container( - child: SfCalendar( - view: CalendarView.month, - todayHighlightColor: Color(0xFFcc0066), - monthViewSettings: MonthViewSettings( +{% highlight dart hl_lines="21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Container( + child: SfCalendar( + view: CalendarView.month, + todayHighlightColor: const Color(0xFFcc0066), + monthViewSettings: const MonthViewSettings( showAgenda: true, agendaStyle: AgendaStyle( backgroundColor: Color(0xFF066cccc), @@ -323,10 +456,11 @@ Widget build(BuildContext context) { fontWeight: FontWeight.w700, color: Colors.black), )), + ), ), ), - ), - ); + ); + } } {% endhighlight %} @@ -339,16 +473,26 @@ Widget build(BuildContext context) { By using the [monthCellStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthViewSettings/monthCellStyle.html) property of [MonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthViewSettings-class.html), you can customize the month properties such as [backgroundColor](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthCellStyle/backgroundColor.html), [todayBackgroundColor](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthCellStyle/todayBackgroundColor.html), [trailingDatesBackgroundColor](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthCellStyle/trailingDatesBackgroundColor.html), [leadingDatesBackgroundColor](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthCellStyle/leadingDatesBackgroundColor.html), [textStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthCellStyle/textStyle.html), [todayTextStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthCellStyle/todayTextStyle.html), [trailingDatesTextStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthCellStyle/trailingDatesTextStyle.html), and [leadingDatesTextStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthCellStyle/leadingDatesTextStyle.html) from [MonthCellStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthCellStyle-class.html). {% tabs %} -{% highlight dart hl_lines="9 10 11 12 13 14 15 16 17 18 19 20 21 23 24 25 26 27 28" %} - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Container( - child: SfCalendar( - view: CalendarView.month, - monthViewSettings: MonthViewSettings( +{% highlight dart hl_lines="19 20 21 22 23 24 25 26 27 28 29 30 31 33 34 35 36 37 38" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Container( + child: SfCalendar( + view: CalendarView.month, + monthViewSettings: const MonthViewSettings( monthCellStyle: MonthCellStyle( backgroundColor: Color(0xFF293462), trailingDatesBackgroundColor: Color(0xff216583), @@ -369,10 +513,11 @@ Widget build(BuildContext context) { fontStyle: FontStyle.italic, fontSize: 12, fontFamily: 'Arial'))), + ), ), ), - ), - ); + ); + } } {% endhighlight %} diff --git a/Flutter/calendar/overview.md b/Flutter/calendar/overview.md index 62574d718..6f004a8d0 100644 --- a/Flutter/calendar/overview.md +++ b/Flutter/calendar/overview.md @@ -9,7 +9,7 @@ documentation: ug # Flutter Event Calendar Overview (SfCalendar) -The Syncfusion® Flutter Calendar library is written natively in Dart and has nine types of built-in configurable view modes that provide basic functionality for scheduling, managing, and representing appointments efficiently. The Calendar Widget exposes a clean and convenient user interface for custom working days and hours and basic calendar operations such as date navigation and selection. +The Syncfusion® Flutter Calendar library is written natively in Dart and has nine types of built-in configurable view modes that provide basic functionality for scheduling, managing, and representing appointments efficiently. The calendar widget exposes a clean and convenient user interface for custom working days and hours and basic calendar operations such as date navigation and selection. ![Calendar overview](images/overview/calendar_overview.png) @@ -60,6 +60,10 @@ The Syncfusion® Flutter Calendar library is written natively in D * **Custom start and end hours**: Display the event calendar timeslot views with specific time durations by hiding the unwanted hours. * **Web layout**: The web layout improved for a better experience, and now, the mouse hovering effect has been applied to all the calendar elements. +## Getting started + +To get started with the Syncfusion Flutter Calendar, refer to the [Getting Started with Flutter Event Calendar](https://help.syncfusion.com/flutter/calendar/getting-started) documentation. + diff --git a/Flutter/calendar/resource-view.md b/Flutter/calendar/resource-view.md index 1bb126579..ac55ddf78 100644 --- a/Flutter/calendar/resource-view.md +++ b/Flutter/calendar/resource-view.md @@ -9,19 +9,54 @@ documentation: ug # Flutter Event Calendar Resource View (SfCalendar) -The timeline resource grouping is a discrete view integrated into our Event calendar widget that allows you to group the appointments based on the available resource in timeline views of the calendar. Using this feature, you can group the appointments and time regions arranged in a row-wise order based on the allocated resource in the timeline views. This rich feature set includes customization and you can assign unique styles to the available resource view. +The timeline resource grouping is a discrete view integrated into our Event Calendar widget that allows you to group the appointments based on the available resource in timeline views of the calendar. Using this feature, you can group the appointments and time regions arranged in a row-wise order based on the allocated resource in the timeline views. This rich feature set includes customization and you can assign unique styles to the available resource view. You can create a resource view by setting the [displayName](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarResource/displayName.html), [color](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarResource/color.html), [id](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarResource/id.html), and [image](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarResource/image.html) property of the [CalendarResource](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarResource-class.html). {% tabs %} -{% highlight dart hl_lines="1" %} +{% highlight dart hl_lines="20" %} -List resourceColl = []; - resourceColl.add(CalendarResource( - displayName: 'John', - id: '0001', - color: Colors.red, - )); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: SfCalendar( + view: CalendarView.timelineWeek, + dataSource: _getCalendarDataSource(), + ), + ), + ); + } +} + +_AppointmentDataSource _getCalendarDataSource() { + List appointments = []; + List resourceColl = []; + resourceColl.add(CalendarResource( + displayName: 'John', + id: '0001', + color: Colors.red, + )); + return _AppointmentDataSource(appointments, resourceColl); +} + +class _AppointmentDataSource extends CalendarDataSource { + _AppointmentDataSource( + List source, List resourceColl) { + appointments = source; + resources = resourceColl; + } +} {% endhighlight %} {% endtabs %} @@ -31,6 +66,7 @@ You can add resources that can be assigned to the appointments and time regions {% tabs %} {% highlight dart hl_lines="2 3" %} +/// Code fragment: assign `resourceColl` to the CalendarDataSource. class _AppointmentDataSource extends CalendarDataSource { _AppointmentDataSource( List source, List resourceColl) { @@ -50,6 +86,9 @@ You can associate resources to the appointments by adding `id` of a resource to {% tabs %} {% highlight dart hl_lines="6" %} +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +/// Code fragment: `appointments` is a List. appointments.add(Appointment( startTime: DateTime(2020, 08, 25, 14, 0, 0), endTime: DateTime(2020, 08, 25, 14, 30, 0), @@ -68,6 +107,8 @@ You can associate resources to custom business objects using the equivalent fiel {% tabs %} {% highlight dart hl_lines="3 5 8 9 10 11" %} +import 'package:syncfusion_flutter_calendar/calendar.dart'; + class _AppointmentDataSource extends CalendarDataSource { _AppointmentDataSource( List source, List resourceColl) { @@ -93,12 +134,16 @@ You can add time regions to the resources by adding `id` of the resource in the {% tabs %} {% highlight dart hl_lines="8" %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +/// Code fragment: `_specialTimeRegions` is a List. List _specialTimeRegions = []; _specialTimeRegions.add(TimeRegion( startTime: DateTime(2020, 08, 20, 13, 0, 0), endTime: DateTime(2020, 08, 20, 14, 0, 0), text: 'Lunch', - color: Colors.green.withOpacity(0.2), + color: Colors.green.withValues(alpha: 0.2), recurrenceRule: 'FREQ=DAILY;INTERVAL=1', resourceIds: ['0001', '0001'])); @@ -109,19 +154,44 @@ List _specialTimeRegions = []; You can customize the number of visible resources in the current view using the [visibleResourceCount](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ResourceViewSettings/visibleResourceCount.html) property of [ResourceViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/resourceViewSettings.html) in the [SfCalendar](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar-class.html). By default, the value of this property is set to ‘-1.’ {% tabs %} -{% highlight dart hl_lines="8" %} +{% highlight dart hl_lines="21" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; -@override -Widget build(BuildContext context) { +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatefulWidget { + const CalendarApp({super.key}); + + @override + State createState() => _CalendarAppState(); +} + +class _CalendarAppState extends State { + CalendarDataSource? _dataSource; + + @override + void initState() { + super.initState(); + _dataSource = _getCalendarDataSource(); + } + + @override + Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SfCalendar( + view: CalendarView.timelineWeek, dataSource: _dataSource, - resourceViewSettings: ResourceViewSettings( + resourceViewSettings: const ResourceViewSettings( visibleResourceCount: 2, ), )), - ); + ); + } } {% endhighlight %} @@ -138,22 +208,47 @@ You can customize the height or width of the resource view individually using th - **visibleResourceCount** — When `visibleResourceCount` is set (> 0), the calendar automatically calculates the height of each resource item based on the available space and the number of visible resources. In this case, an explicitly set `height` value is ignored. {% tabs %} -{% highlight dart hl_lines="8" %} +{% highlight dart hl_lines="21 22 23 24 25 26" %} -@override -Widget build(BuildContext context) { +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatefulWidget { + const CalendarApp({super.key}); + + @override + State createState() => _CalendarAppState(); +} + +class _CalendarAppState extends State { + CalendarDataSource? _dataSource; + + @override + void initState() { + super.initState(); + _dataSource = _getCalendarDataSource(); + } + + @override + Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SfCalendar( + view: CalendarView.timelineWeek, dataSource: _dataSource, - resourceViewSettings: ResourceViewSettings( + resourceViewSettings: const ResourceViewSettings( height: 100, width: 250, // size: 120, // used only when `width` is not provided // visibleResourceCount: 2, // when set, determines row height instead of `height` ), )), - ); + ); + } } {% endhighlight %} @@ -166,17 +261,43 @@ Widget build(BuildContext context) { You can disable the user profile image and the circle representation of the resource by setting `false` to the [showAvatar](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ResourceViewSettings/showAvatar.html) property available in the [ResourceViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ResourceViewSettings-class.html). This will display each resource with a resource name and the color assigned to the resource. {% tabs %} -{% highlight dart hl_lines="7" %} +{% highlight dart hl_lines="20" %} -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: SfCalendar( - dataSource: _dataSource, - resourceViewSettings: ResourceViewSettings(showAvatar: false), - )), - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatefulWidget { + const CalendarApp({super.key}); + + @override + State createState() => _CalendarAppState(); +} + +class _CalendarAppState extends State { + CalendarDataSource? _dataSource; + + @override + void initState() { + super.initState(); + _dataSource = _getCalendarDataSource(); + } + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: SfCalendar( + view: CalendarView.timelineWeek, + dataSource: _dataSource, + resourceViewSettings: const ResourceViewSettings(showAvatar: false), + ), + ), + ); + } } {% endhighlight %} @@ -187,21 +308,47 @@ Widget build(BuildContext context) { ### Display name text style The display name text style for the resource view can be customized by setting an appropriate text style to the [displayNameTextStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ResourceViewSettings/displayNameTextStyle.html) property available in the [ResourceViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/resourceViewSettings.html). {% tabs %} -{% highlight dart hl_lines="8 9 10 11" %} +{% highlight dart hl_lines="21 22 23 24" %} -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: SfCalendar( - dataSource: _dataSource, - resourceViewSettings: ResourceViewSettings( - displayNameTextStyle: TextStyle( - fontSize: 11, - color: Colors.redAccent, - fontStyle: FontStyle.italic)), - )), +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatefulWidget { + const CalendarApp({super.key}); + + @override + State createState() => _CalendarAppState(); +} + +class _CalendarAppState extends State { + CalendarDataSource? _dataSource; + + @override + void initState() { + super.initState(); + _dataSource = _getCalendarDataSource(); + } + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: SfCalendar( + view: CalendarView.timelineWeek, + dataSource: _dataSource, + resourceViewSettings: const ResourceViewSettings( + displayNameTextStyle: TextStyle( + fontSize: 11, + color: Colors.redAccent, + fontStyle: FontStyle.italic)), + ), + ), ); + } } {% endhighlight %} @@ -213,17 +360,43 @@ Widget build(BuildContext context) { You can customize the size of the panel that displays the resource views in the calendar by setting an appropriate value to the [size](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ResourceViewSettings/size.html) property available in the [ResourceViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/resourceViewSettings.html). {% tabs %} -{% highlight dart hl_lines="7" %} - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: SfCalendar( - dataSource: _dataSource, - resourceViewSettings: ResourceViewSettings(size: 120), - )), +{% highlight dart hl_lines="21" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatefulWidget { + const CalendarApp({super.key}); + + @override + State createState() => _CalendarAppState(); +} + +class _CalendarAppState extends State { + CalendarDataSource? _dataSource; + + @override + void initState() { + super.initState(); + _dataSource = _getCalendarDataSource(); + } + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: SfCalendar( + view: CalendarView.timelineWeek, + dataSource: _dataSource, + resourceViewSettings: const ResourceViewSettings(size: 120), + ), + ), ); + } } {% endhighlight %} diff --git a/Flutter/calendar/right-to-left.md b/Flutter/calendar/right-to-left.md index 94cceb2a2..e003d083e 100644 --- a/Flutter/calendar/right-to-left.md +++ b/Flutter/calendar/right-to-left.md @@ -7,31 +7,44 @@ control: SfCalendar documentation: ug --- -# Right to left (RTL) in Flutter Event Calendar (SfCalendar) -Event calendar supports Right to Left rendering and all the calendar elements rendering direction will be changed. +# Right to Left (RTL) in Flutter Event Calendar (SfCalendar) +The event calendar supports right-to-left rendering and all the calendar elements rendering direction will be changed. ## RTL rendering ways Right to Left rendering can be switched in the following ways: ### Wrapping the SfCalendar with Directionality widget -[SfCalendar](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar-class.html). supports changing the layout direction of the widget in the right-to-left direction by using the `Directionality` widget and set the `textDirection` property as [TextDirection.rtl](https://api.flutter.dev/flutter/dart-ui/TextDirection.html). +[SfCalendar](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar-class.html) supports changing the layout direction of the widget in the right-to-left direction by using the `Directionality` widget and set the `textDirection` property as [TextDirection.rtl](https://api.flutter.dev/flutter/dart-ui/TextDirection.html). {% tabs %} -{% highlight dart hl_lines="7 8" %} - -@override -Widget build(BuildContext context) { - return Scaffold( - appBar: AppBar( - title: Text('Right to Left'), - ), - body: Directionality( - textDirection: TextDirection.rtl, - child: SfCalendar( - view: CalendarView.month, - ), - ), - ); +{% highlight dart hl_lines="17 18" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + appBar: AppBar( + title: const Text('Right to Left'), + ), + body: Directionality( + textDirection: TextDirection.rtl, + child: SfCalendar( + view: CalendarView.month, + ), + ), + ), + ); + } } {% endhighlight %} @@ -41,26 +54,39 @@ Widget build(BuildContext context) { To change the event calendar rendering direction from right to left, change the locale to any of the RTL languages such as Arabic, Persian, Hebrew, Pashto, and Urdu. {% tabs %} -{% highlight dart hl_lines="4 5 6 7 8 9 10 11 12 13" %} - -@override -Widget build(BuildContext context) { -return MaterialApp( - localizationsDelegates: [ - GlobalMaterialLocalizations.delegate, - GlobalWidgetsLocalizations.delegate, - ], - supportedLocales: [ - Locale('en'), - Locale('ar'), - // ... other locales the app supports - ], - locale: Locale('ar'), - home: Scaffold( - body: SfCalendar( - //... - ), - )); +{% highlight dart hl_lines="14 15 16 17 18 19 20 21 22 23" %} + +import 'package:flutter/material.dart'; +import 'package:flutter_localizations/flutter_localizations.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + localizationsDelegates: const [ + GlobalMaterialLocalizations.delegate, + GlobalWidgetsLocalizations.delegate, + ], + supportedLocales: const [ + Locale('en'), + Locale('ar'), + // ... other locales the app supports + ], + locale: const Locale('ar'), + home: Scaffold( + body: SfCalendar( + //... + ), + ), + ); + } } @@ -73,32 +99,45 @@ Right to Left rendering is supported for all the elements in the [SfCalendar](ht {% tabs %} -{% highlight dart hl_lines="7 8" %} - -@override -Widget build(BuildContext context) { - return Scaffold( - appBar: AppBar( - title: Text('Right to Left'), - ), - body: Directionality( - textDirection: TextDirection.rtl, - child: SfCalendar( - view: CalendarView.month, - allowedViews: [ - CalendarView.day, - CalendarView.week, - CalendarView.workWeek, - CalendarView.month, - CalendarView.schedule, - CalendarView.timelineDay, - CalendarView.timelineWeek, - CalendarView.timelineWorkWeek, - CalendarView.timelineMonth - ], +{% highlight dart hl_lines="17 18" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + appBar: AppBar( + title: const Text('Right to Left'), + ), + body: Directionality( + textDirection: TextDirection.rtl, + child: SfCalendar( + view: CalendarView.month, + allowedViews: const [ + CalendarView.day, + CalendarView.week, + CalendarView.workWeek, + CalendarView.month, + CalendarView.schedule, + CalendarView.timelineDay, + CalendarView.timelineWeek, + CalendarView.timelineWorkWeek, + CalendarView.timelineMonth + ], + ), + ), ), - ), - ); + ); + } } diff --git a/Flutter/calendar/schedule-view.md b/Flutter/calendar/schedule-view.md index 18ab20313..7e16f72e1 100644 --- a/Flutter/calendar/schedule-view.md +++ b/Flutter/calendar/schedule-view.md @@ -11,7 +11,7 @@ documentation: ug The `schedule` view of SfCalendar shows a list of scheduled appointments grouped by week, between min and max dates, by default displaying the appointments from the current date. If the [dataSource](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/dataSource.html) property of [SfCalendar](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar-class.html) is null then the schedule view will display the month, week, and date headers alone in the view. -The schedule view display two different UI for mobile and web, for mobile it will display the month header, week header, and date header but for the web, it will display the appointments alone in the view. +The schedule view displays two different UIs for mobile and web. For mobile, it will display the month header, week header, and date header, but for the web, it will display the appointments alone in the view. ![Schedule view in Flutter event calendar](images/scheduleview/Schedule-view.png) @@ -22,19 +22,32 @@ The schedule view display two different UI for mobile and web, for mobile it wil You can customize the height of an appointment in a schedule view by using the [appointmentItemHeight](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ScheduleViewSettings/appointmentItemHeight.html) property of [ScheduleViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ScheduleViewSettings-class.html). {% tabs %} -{% highlight dart hl_lines="7" %} +{% highlight dart hl_lines="17" %} -@override +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override Widget build(BuildContext context) { - return Container( - child: SfCalendar( - view: CalendarView.schedule, - scheduleViewSettings: ScheduleViewSettings( - appointmentItemHeight: 70, + return MaterialApp( + home: Scaffold( + body: SfCalendar( + view: CalendarView.schedule, + scheduleViewSettings: const ScheduleViewSettings( + appointmentItemHeight: 70, + ), ), ), ); } +} {% endhighlight %} {% endtabs %} @@ -45,20 +58,33 @@ You can customize the height of an appointment in a schedule view by using the [ You can hide the weeks that do not have an appointment on it in schedule view, by using the [hideEmptyScheduleWeek](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ScheduleViewSettings/hideEmptyScheduleWeek.html) property of [ScheduleViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ScheduleViewSettings-class.html). {% tabs %} -{% highlight dart hl_lines="7" %} +{% highlight dart hl_lines="17" %} -@override +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override Widget build(BuildContext context) { - return Container( - child: SfCalendar( - view: CalendarView.schedule, - scheduleViewSettings: ScheduleViewSettings( - hideEmptyScheduleWeek: true, + return MaterialApp( + home: Scaffold( + body: SfCalendar( + view: CalendarView.schedule, + scheduleViewSettings: const ScheduleViewSettings( + hideEmptyScheduleWeek: true, + ), ), ), ); } - +} + {% endhighlight %} {% endtabs %} @@ -68,19 +94,32 @@ You can hide the weeks that do not have an appointment on it in schedule view, b The appointment text style of schedule view can be customized by using the [appointmentTextStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ScheduleViewSettings/appointmentTextStyle.html) property of [ScheduleViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ScheduleViewSettings-class.html). {% tabs %} -{% highlight dart hl_lines="7 8" %} +{% highlight dart hl_lines="17 18" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); -@override + @override Widget build(BuildContext context) { - return Container( - child: SfCalendar( - view: CalendarView.schedule, - scheduleViewSettings: ScheduleViewSettings( - appointmentTextStyle: TextStyle( - fontSize: 12, fontWeight: FontWeight.w500, color: Colors.lime)), + return MaterialApp( + home: Scaffold( + body: SfCalendar( + view: CalendarView.schedule, + scheduleViewSettings: const ScheduleViewSettings( + appointmentTextStyle: TextStyle( + fontSize: 12, fontWeight: FontWeight.w500, color: Colors.lime)), + ), ), ); } +} {% endhighlight %} {% endtabs %} @@ -93,27 +132,39 @@ The day header can be customized by using the [dayHeaderSettings](https://pub.de The [DayHeaderSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/DayHeaderSettings-class.html) contains the properties to customize the day format, width, day text style, and date text style of the day header by using the [dayFormat](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/DayHeaderSettings/dayFormat.html), [width](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/DayHeaderSettings/width.html), [dayTextStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/DayHeaderSettings/dayTextStyle.html), and [dateTextStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/DayHeaderSettings/dateTextStyle.html) of [DayHeaderSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/DayHeaderSettings-class.html). {% tabs %} -{% highlight dart hl_lines=" 7 8 9 10 11 12 13 14 15 16 17 18 19" %} +{% highlight dart hl_lines="17 18 19 20 21 22 23 24 25 26 27 28 29" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); @override Widget build(BuildContext context) { - return Container( - child: SfCalendar( - view: CalendarView.schedule, - scheduleViewSettings: ScheduleViewSettings( - dayHeaderSettings: DayHeaderSettings( - dayFormat: 'EEEE', - width: 70, - dayTextStyle: TextStyle( - fontSize: 10, - fontWeight: FontWeight.w300, - color: Colors.red, - ), - dateTextStyle: TextStyle( - fontSize: 20, - fontWeight: FontWeight.w300, - color: Colors.red, - ))), + return MaterialApp( + home: Scaffold( + body: SfCalendar( + view: CalendarView.schedule, + scheduleViewSettings: const ScheduleViewSettings( + dayHeaderSettings: DayHeaderSettings( + dayFormat: 'EEEE', + width: 70, + dayTextStyle: TextStyle( + fontSize: 10, + fontWeight: FontWeight.w300, + color: Colors.red, + ), + dateTextStyle: TextStyle( + fontSize: 20, + fontWeight: FontWeight.w300, + color: Colors.red, + ))), + ), ), ); } @@ -129,25 +180,37 @@ The week header can be customized by using the [weekHeaderSettings](https://pub. The [WeekHeaderSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/WeekHeaderSettings-class.html) contains the properties to customize the start and end date format, height, Text alignment, background color, and week text style of the week header by using the [startDateFormat](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/WeekHeaderSettings/startDateFormat.html), [endDateFormat](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/WeekHeaderSettings/endDateFormat.html), [height](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/WeekHeaderSettings/height.html), [textAlign](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/WeekHeaderSettings/textAlign.html), [backgroundColor](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/WeekHeaderSettings/backgroundColor.html), and [weekTextStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/WeekHeaderSettings/weekTextStyle.html) of `WeekHeaderSettings`. {% tabs %} -{% highlight dart hl_lines="7 8 9 10 11 12 13 14 15 16 17" %} +{% highlight dart hl_lines="17 18 19 20 21 22 23 24 25 26 27" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); -@override + @override Widget build(BuildContext context) { - return Container( - child: SfCalendar( - view: CalendarView.schedule, - scheduleViewSettings: ScheduleViewSettings( - weekHeaderSettings: WeekHeaderSettings( - startDateFormat: 'dd MMM ', - endDateFormat: 'dd MMM, yy', - height: 50, - textAlign: TextAlign.center, - backgroundColor: Colors.red, - weekTextStyle: TextStyle( - color: Colors.white, - fontWeight: FontWeight.w400, - fontSize: 15, - ))), + return MaterialApp( + home: Scaffold( + body: SfCalendar( + view: CalendarView.schedule, + scheduleViewSettings: const ScheduleViewSettings( + weekHeaderSettings: WeekHeaderSettings( + startDateFormat: 'dd MMM ', + endDateFormat: 'dd MMM, yy', + height: 50, + textAlign: TextAlign.center, + backgroundColor: Colors.red, + weekTextStyle: TextStyle( + color: Colors.white, + fontWeight: FontWeight.w400, + fontSize: 15, + ))), + ), ), ); } @@ -164,23 +227,35 @@ The month header can be customized by using the [monthHeaderSettings](https://pu The [MonthHeaderSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthHeaderSettings-class.html) contains the properties to customize the month format, height, text alignment, background color, and month text style of the month header by using the [monthFormat](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthHeaderSettings/monthFormat.html), [height](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthHeaderSettings/height.html), [textAlign](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthHeaderSettings/textAlign.html), [backgroundColor](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthHeaderSettings/backgroundColor.html), and [monthTextStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthHeaderSettings/monthTextStyle.html) of `MonthHeaderSettings`. {% tabs %} -{% highlight dart hl_lines="7 8 9 10 11 12 13 14 15" %} +{% highlight dart hl_lines="17 18 19 20 21 22 23 24 25" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} -@override +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override Widget build(BuildContext context) { - return Container( - child: SfCalendar( - view: CalendarView.schedule, - scheduleViewSettings: ScheduleViewSettings( - monthHeaderSettings: MonthHeaderSettings( - monthFormat: 'MMMM, yyyy', - height: 100, - textAlign: TextAlign.left, - backgroundColor: Colors.green, - monthTextStyle: TextStyle( + return MaterialApp( + home: Scaffold( + body: SfCalendar( + view: CalendarView.schedule, + scheduleViewSettings: const ScheduleViewSettings( + monthHeaderSettings: MonthHeaderSettings( + monthFormat: 'MMMM, yyyy', + height: 100, + textAlign: TextAlign.left, + backgroundColor: Colors.green, + monthTextStyle: TextStyle( color: Colors.red, fontSize: 25, fontWeight: FontWeight.w400))), + ), ), ); } diff --git a/Flutter/calendar/timeslot-views.md b/Flutter/calendar/timeslot-views.md index 50fbc54c4..79f4c6af5 100644 --- a/Flutter/calendar/timeslot-views.md +++ b/Flutter/calendar/timeslot-views.md @@ -9,11 +9,11 @@ documentation: ug # Flutter Event Calendar Timeslot View (SfCalendar) -[Flutter Calendar](https://www.syncfusion.com/flutter-widgets/flutter-calendar) has six built-in time slot views used to display date, and the views will display based on the current day by default. Appointments on a specific day will be arranged in respective timeslots based on their duration. +[Flutter Calendar](https://www.syncfusion.com/flutter-widgets/flutter-calendar) has six built-in time slot views used to display dates, and the views will show based on the current day by default. Appointments on a specific day will be arranged in respective timeslots based on their duration. * **Day view:** Displays a single day. -* **Week view:** Views all days of a week. -* **Work week view:** Views only working days of a week. By default, Saturday and Sunday are the non-working days. You can customize it with any days of a week. +* **Week view:** Displays all days of a week. +* **Work week view:** Displays only working days of a week. By default, Saturday and Sunday are the non-working days. You can customize it with any days of a week. * **Timeline day view:** Displays the single day in horizontal time axis. * **Timeline week view:** Displays the days of a week in horizontal time axis. You can see the past or future dates by scrolling to right or left. * **Timeline work week view:** Views only working days of a week in horizontal axis. By default, Saturday and Sunday are the non-working days. You can customize it with any days of a week. @@ -24,17 +24,30 @@ documentation: ug You can customize the interval of timeslots in all the timeslots view by using the [timeInterval](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeSlotViewSettings/timeInterval.html) property of [TimeSlotViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeSlotViewSettings-class.html/). {% tabs %} -{% highlight dart hl_lines=" 6 7" %} +{% highlight dart hl_lines="16 17" %} -@override -Widget build(BuildContext context) { - return Container( - child: SfCalendar( - view: CalendarView.week, - timeSlotViewSettings: - TimeSlotViewSettings(timeInterval: Duration(hours: 2)), - ), - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: SfCalendar( + view: CalendarView.week, + timeSlotViewSettings: const TimeSlotViewSettings( + timeInterval: Duration(hours: 2)), + ), + ), + ); + } } {% endhighlight %} @@ -50,18 +63,31 @@ Widget build(BuildContext context) { You can customize the time interval height of the day, week, and workweek view by using the [timeIntervalHeight](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeSlotViewSettings/timeIntervalHeight.html) property of [TimeSlotViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeSlotViewSettings-class.html/). {% tabs %} -{% highlight dart hl_lines="7" %} - -@override -Widget build(BuildContext context) { - return Container( - child: SfCalendar( - view: CalendarView.week, - timeSlotViewSettings: TimeSlotViewSettings( - timeIntervalHeight: 100, +{% highlight dart hl_lines="17" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: SfCalendar( + view: CalendarView.week, + timeSlotViewSettings: const TimeSlotViewSettings( + timeIntervalHeight: 100, + ), + ), ), - ), - ); + ); + } } {% endhighlight %} @@ -74,18 +100,31 @@ Widget build(BuildContext context) { You can customize the time interval width of the timeline day, timeline week, timeline work week, and timeline month view by using the [timeIntervalWidth](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeSlotViewSettings/timeIntervalWidth.html) property of [TimeSlotViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeSlotViewSettings-class.html/). {% tabs %} -{% highlight dart hl_lines="7" %} - -@override -Widget build(BuildContext context) { - return Container( - child: SfCalendar( - view: CalendarView.timelineDay, - timeSlotViewSettings: TimeSlotViewSettings( - timeIntervalWidth: 100, +{% highlight dart hl_lines="17" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: SfCalendar( + view: CalendarView.timelineDay, + timeSlotViewSettings: const TimeSlotViewSettings( + timeIntervalWidth: 100, + ), + ), ), - ), - ); + ); + } } {% endhighlight %} @@ -100,18 +139,32 @@ The default values for [startHour](https://pub.dev/documentation/syncfusion_flut You can also customize the nonworking days of a week by using the [nonWorkingDays](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeSlotViewSettings/nonWorkingDays.html) property of [TimeSlotViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeSlotViewSettings-class.html/) to show only the required days for the users. {% tabs %} -{% highlight dart hl_lines="6 7 8 9" %} - -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfCalendar( - view: CalendarView.workWeek, - timeSlotViewSettings: TimeSlotViewSettings( - startHour: 9, - endHour: 16, - nonWorkingDays: [DateTime.friday, DateTime.saturday]), - )); +{% highlight dart hl_lines="16 17 18 19" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: SfCalendar( + view: CalendarView.workWeek, + timeSlotViewSettings: const TimeSlotViewSettings( + startHour: 9, + endHour: 16, + nonWorkingDays: [DateTime.friday, DateTime.saturday]), + ), + ), + ); + } } {% endhighlight %} @@ -131,18 +184,30 @@ Widget build(BuildContext context) { You can customize the days count by setting the [numberOfDaysInView](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeSlotViewSettings/numberOfDaysInView.html) property of [TimeSlotViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeSlotViewSettings-class.html/) in the calendar. {% tabs %} -{% highlight dart hl_lines="7" %} +{% highlight dart hl_lines="17" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; -@override +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( - body: SfCalendar( - view: CalendarView.week, - timeSlotViewSettings: const TimeSlotViewSettings(numberOfDaysInView: 3), - )), + body: SfCalendar( + view: CalendarView.week, + timeSlotViewSettings: const TimeSlotViewSettings(numberOfDaysInView: 3), + ), + ), ); } +} {% endhighlight %} {% endtabs %} @@ -165,14 +230,26 @@ You can restrict the user interaction such as selection and highlights specific You can enable or disable the touch interaction of [TimeRegion](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeRegion-class.html) using the [enablePointerInteraction](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeRegion/enablePointerInteraction.html) property of [TimeRegion](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeRegion-class.html). By default, its value is true. {% tabs %} -{% highlight dart hl_lines="6 11 12 13 14 15 16 17 18 20 21" %} +{% highlight dart hl_lines="16 21 22 23 24 25 26 27 28 29 30 31" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); -@override + @override Widget build(BuildContext context) { - return Container( - child: SfCalendar( - view: CalendarView.week, - specialRegions: _getTimeRegions(), + return MaterialApp( + home: Scaffold( + body: SfCalendar( + view: CalendarView.week, + specialRegions: _getTimeRegions(), + ), ), ); } @@ -181,13 +258,14 @@ You can enable or disable the touch interaction of [TimeRegion](https://pub.dev/ final List regions = []; regions.add(TimeRegion( startTime: DateTime.now(), - endTime: DateTime.now().add(Duration(hours: 1)), + endTime: DateTime.now().add(const Duration(hours: 1)), enablePointerInteraction: false, - color: Colors.grey.withOpacity(0.2), + color: Colors.grey.withValues(alpha: 0.2), text: 'Break')); return regions; } +} {% endhighlight %} {% endtabs %} @@ -209,14 +287,26 @@ in the region The recurring time region on a daily, weekly, monthly, or yearly interval. The recurring special time regions can be created by setting the [recurrenceRule](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeRegion/recurrenceRule.html) property in [TimeRegion](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeRegion-class.html). {% tabs %} -{% highlight dart hl_lines="17" %} +{% highlight dart hl_lines="27" %} -@override +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override Widget build(BuildContext context) { - return Container( - child: SfCalendar( - view: CalendarView.week, - specialRegions: _getTimeRegions(), + return MaterialApp( + home: Scaffold( + body: SfCalendar( + view: CalendarView.week, + specialRegions: _getTimeRegions(), + ), ), ); } @@ -225,11 +315,11 @@ The recurring time region on a daily, weekly, monthly, or yearly interval. The r final List regions = []; regions.add(TimeRegion( startTime: DateTime.now(), - endTime: DateTime.now().add(Duration(hours: 1)), + endTime: DateTime.now().add(const Duration(hours: 1)), enablePointerInteraction: false, recurrenceRule: 'FREQ=DAILY;INTERVAL=1', - textStyle: TextStyle(color: Colors.black45, fontSize: 15), - color: Colors.grey.withOpacity(0.2), + textStyle: const TextStyle(color: Colors.black45, fontSize: 15), + color: Colors.grey.withValues(alpha: 0.2), text: 'Break')); return regions; @@ -246,14 +336,26 @@ You can refer to [here](https://help.syncfusion.com/flutter/calendar/appointment You can delete any occurrence that is an exception from the recurrence pattern time region by using the [recurrenceExceptionDates](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeRegion/recurrenceExceptionDates.html) property of [TimeRegion](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeRegion-class.html). The deleted occurrence date will be considered as a recurrence exception date. {% tabs %} -{% highlight dart hl_lines="20" %} +{% highlight dart hl_lines="30" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} -@override +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override Widget build(BuildContext context) { - return Container( - child: SfCalendar( - view: CalendarView.week, - specialRegions: _getTimeRegions(), + return MaterialApp( + home: Scaffold( + body: SfCalendar( + view: CalendarView.week, + specialRegions: _getTimeRegions(), + ), ), ); } @@ -262,12 +364,12 @@ You can delete any occurrence that is an exception from the recurrence pattern t final List regions = []; regions.add(TimeRegion( startTime: DateTime.now(), - endTime: DateTime.now().add(Duration(hours: 1)), + endTime: DateTime.now().add(const Duration(hours: 1)), enablePointerInteraction: false, recurrenceRule: 'FREQ=DAILY;INTERVAL=1', - textStyle: TextStyle(color: Colors.black45, fontSize: 15), - color: Colors.grey.withOpacity(0.2), - recurrenceExceptionDates: [DateTime.now().add(Duration(days: 2))], + textStyle: const TextStyle(color: Colors.black45, fontSize: 15), + color: Colors.grey.withValues(alpha: 0.2), + recurrenceExceptionDates: [DateTime.now().add(const Duration(days: 2))], text: 'Break')); return regions; @@ -282,14 +384,26 @@ You can delete any occurrence that is an exception from the recurrence pattern t The `specialTimeRegion` background color can be customized by using the [color](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeRegion/color.html) and [textStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeRegion/textStyle.html) properties of [TimeRegion](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeRegion-class.html) that is used to customize the text style for the [text](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeRegion/text.html) and [iconData](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeRegion/iconData.html) of the `specialTimeRegion`. {% tabs %} -{% highlight dart hl_lines="17 18 19" %} +{% highlight dart hl_lines="27 28 29" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; -@override +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override Widget build(BuildContext context) { - return Container( - child: SfCalendar( - view: CalendarView.week, - specialRegions: _getTimeRegions(), + return MaterialApp( + home: Scaffold( + body: SfCalendar( + view: CalendarView.week, + specialRegions: _getTimeRegions(), + ), ), ); } @@ -298,10 +412,10 @@ The `specialTimeRegion` background color can be customized by using the [color]( final List regions = []; regions.add(TimeRegion( startTime: DateTime.now(), - endTime: DateTime.now().add(Duration(hours: 1)), + endTime: DateTime.now().add(const Duration(hours: 1)), enablePointerInteraction: false, - textStyle: TextStyle(color: Colors.red, fontSize: 15), - color: Color.fromRGBO(255, 236, 179, 1.0), + textStyle: const TextStyle(color: Colors.red, fontSize: 15), + color: const Color.fromRGBO(255, 236, 179, 1.0), iconData: Icons.group)); return regions; @@ -318,18 +432,31 @@ The `specialTimeRegion` background color can be customized by using the [color]( The calendar time interval height and width can be adjusted based on the screen height by changing the value of the [timeIntervalHeight](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeSlotViewSettings/timeIntervalHeight.html) and [timeIntervalWidth](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeSlotViewSettings/timeIntervalWidth.html) property to -1. It will auto fit the screen height and width. {% tabs %} -{% highlight dart hl_lines="7" %} - -@override -Widget build(BuildContext context) { - return Container( - child: SfCalendar( - view: CalendarView.week, - timeSlotViewSettings: TimeSlotViewSettings( - timeIntervalHeight: -1, +{% highlight dart hl_lines="17" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: SfCalendar( + view: CalendarView.week, + timeSlotViewSettings: const TimeSlotViewSettings( + timeIntervalHeight: -1, + ), + ), ), - ), - ); + ); + } } {% endhighlight %} @@ -342,20 +469,31 @@ Widget build(BuildContext context) { You can customize the size of the time ruler view where the labels mentioning the time are placed by using the [timeRulerSize](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeSlotViewSettings/timeRulerSize.html) property of [TimeSlotViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeSlotViewSettings-class.html/). {% tabs %} -{% highlight dart hl_lines="8" %} - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Container( - child: SfCalendar( - view: CalendarView.week, - timeSlotViewSettings: TimeSlotViewSettings(timeRulerSize: 100), +{% highlight dart hl_lines="18" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Container( + child: SfCalendar( + view: CalendarView.week, + timeSlotViewSettings: const TimeSlotViewSettings(timeRulerSize: 100), + ), ), ), - ), - ); + ); + } } {% endhighlight %} @@ -368,29 +506,40 @@ Widget build(BuildContext context) { The [minimumAppointmentDuration](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeSlotViewSettings/minimumAppointmentDuration.html) property in timeSlotViewSettings is to set an arbitrary height to appointments when it has minimum duration, in timeslot views, so that the subject can be readable. {% tabs %} -{% highlight dart hl_lines="10" %} - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Container( - child: SfCalendar( - view: CalendarView.week, - dataSource: _getCalendarDataSource(), - timeSlotViewSettings: TimeSlotViewSettings( - minimumAppointmentDuration: Duration(minutes: 30)), +{% highlight dart hl_lines="20" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Container( + child: SfCalendar( + view: CalendarView.week, + dataSource: _getCalendarDataSource(), + timeSlotViewSettings: const TimeSlotViewSettings( + minimumAppointmentDuration: Duration(minutes: 30)), + ), ), ), - ), - ); + ); + } } _AppointmentDataSource _getCalendarDataSource() { List appointments = []; appointments.add(Appointment( startTime: DateTime.now(), - endTime: DateTime.now().add(Duration(minutes: 10)), + endTime: DateTime.now().add(const Duration(minutes: 10)), subject: 'Meeting', color: Colors.blue, startTimeZone: '', @@ -423,21 +572,32 @@ class _AppointmentDataSource extends CalendarDataSource { You can customize the height of appointment in timeline views using the [timelineAppointmentHeight](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeSlotViewSettings/timelineAppointmentHeight.html) property of [TimeSlotViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeSlotViewSettings-class.html). {% tabs %} -{% highlight dart hl_lines="9" %} - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Container( - child: SfCalendar( - view: CalendarView.timelineWeek, - timeSlotViewSettings: - TimeSlotViewSettings(timelineAppointmentHeight: 100), +{% highlight dart hl_lines="19" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Container( + child: SfCalendar( + view: CalendarView.timelineWeek, + timeSlotViewSettings: const TimeSlotViewSettings( + timelineAppointmentHeight: 100), + ), ), ), - ), - ); + ); + } } {% endhighlight %} @@ -450,21 +610,32 @@ Widget build(BuildContext context) { You can customize the date and day format of SfCalendar ViewHeader by using the [dateFormat](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeSlotViewSettings/dateFormat.html) and [dayFormat](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeSlotViewSettings/dayFormat.html) properties of [TimeSlotViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeSlotViewSettings-class.html). {% tabs %} -{% highlight dart hl_lines="9" %} - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Container( - child: SfCalendar( - view: CalendarView.week, - timeSlotViewSettings: - TimeSlotViewSettings(dateFormat: 'd', dayFormat: 'EEE'), +{% highlight dart hl_lines="19" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Container( + child: SfCalendar( + view: CalendarView.week, + timeSlotViewSettings: const TimeSlotViewSettings( + dateFormat: 'd', dayFormat: 'EEE'), + ), ), ), - ), - ); + ); + } } {% endhighlight %} @@ -476,21 +647,32 @@ Widget build(BuildContext context) { You can customize the format for the labels mentioning the time, by setting the [timeFormat](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeSlotViewSettings/timeFormat.html) property of [TimeSlotViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeSlotViewSettings-class.html) in calendar. {% tabs %} -{% highlight dart hl_lines="9" %} - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Container( - child: SfCalendar( - view: CalendarView.week, - timeSlotViewSettings: TimeSlotViewSettings( - timeInterval: Duration(minutes: 30), timeFormat: 'h:mm'), +{% highlight dart hl_lines="19" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Container( + child: SfCalendar( + view: CalendarView.week, + timeSlotViewSettings: const TimeSlotViewSettings( + timeInterval: Duration(minutes: 30), timeFormat: 'h:mm'), + ), ), ), - ), - ); + ); + } } {% endhighlight %} @@ -503,17 +685,27 @@ Widget build(BuildContext context) { You can customize the text style for the labels mentioning the time, by setting the [timeTextStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeSlotViewSettings/timeTextStyle.html) property of [TimeSlotViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeSlotViewSettings-class.html) in calendar. {% tabs %} -{% highlight dart hl_lines="9 10 11 12 13 14" %} - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Container( - child: SfCalendar( - view: CalendarView.week, - timeSlotViewSettings: TimeSlotViewSettings( - timeTextStyle: TextStyle( +{% highlight dart hl_lines="19 20 21 22 23 24" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Container( + child: SfCalendar( + view: CalendarView.week, + timeSlotViewSettings: const TimeSlotViewSettings( + timeTextStyle: TextStyle( fontWeight: FontWeight.w500, fontStyle: FontStyle.italic, fontSize: 15, @@ -521,8 +713,8 @@ Widget build(BuildContext context) { )), ), ), - ), - ); + ); + } } {% endhighlight %} @@ -534,21 +726,32 @@ Widget build(BuildContext context) { All day panel background color can be customized by using the [allDayPanelColor](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeSlotViewSettings/allDayPanelColor.html) property of [TimeSlotViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeSlotViewSettings-class.html) in the calendar. {% tabs %} -{% highlight dart hl_lines="9 " %} - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Container( - child: SfCalendar( - view: CalendarView.week, - timeSlotViewSettings: - TimeSlotViewSettings(allDayPanelColor: Colors.green), +{% highlight dart hl_lines="19" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +void main() { + runApp(const CalendarApp()); +} + +class CalendarApp extends StatelessWidget { + const CalendarApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Container( + child: SfCalendar( + view: CalendarView.week, + timeSlotViewSettings: const TimeSlotViewSettings( + allDayPanelColor: Colors.green), + ), ), ), - ), - ); + ); + } } {% endhighlight %} diff --git a/Flutter/calendar/timezone.md b/Flutter/calendar/timezone.md index 0b07db6c3..acc54d86e 100644 --- a/Flutter/calendar/timezone.md +++ b/Flutter/calendar/timezone.md @@ -16,7 +16,7 @@ documentation: ug * Display appointments based on calendar time zone. * Display appointments at the same time everywhere regardless of client’s time zone. -We have added the following Time Zone’s for the respective countries to cover all the time zone regions, you can use any of the time zones from the following list for calendar time zone. +We have added the following Time Zones for the respective countries to cover all time zone regions. You can use any of the time zones from the following list for calendar time zone.