FLUT-1020062: Enhanced Flutter Calendar UG documentation- #1510

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)

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<Appointment> appointments = <Appointment>[];
+  return _AppointmentDataSource(appointments);
+}
+
+class _AppointmentDataSource extends CalendarDataSource {
+  _AppointmentDataSource(List<Appointment> 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,30 +108,41 @@ 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.
 * [resizingOffset](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/AppointmentResizeUpdateDetails/resizingOffset.html) - Get the offset value.
 * [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,30 +156,41 @@ 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.
 * [endTime](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/AppointmentResizeEndDetails/endTime.html) - Get the end time.
 * [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) {