Skip to content

FLUT-964937 - [Others] Included a Calendar UG improvement changes #1255

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: development
Choose a base branch
from
Open

FLUT-964937 - [Others] Included a Calendar UG improvement changes #1255

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion Flutter/DateRangePicker/headers.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ Widget build(BuildContext context) {
fontStyle: FontStyle.normal,
fontSize: 25,
letterSpacing: 5,
color: Color(0xFFff5eaea),
color: Color(0xFFffeaea),
)),
),
);
Expand Down
8 changes: 4 additions & 4 deletions Flutter/calendar/accessibility.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ documentation: ug

## Screen reader support

The `SfCalendar` 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

Expand Down Expand Up @@ -54,7 +54,7 @@ The `SfCalendar` can easily be accessed by screen readers. Please find the follo

## Sufficient contrast

The `SfCalendar` [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)
Expand All @@ -70,7 +70,7 @@ The following APIs allow you to customize the colors of the following elements.

## Large fonts

The `SfCalendar` 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.textScaleFactor`. 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)
Expand All @@ -79,7 +79,7 @@ The `SfCalendar` font size can be adjusted automatically based on device setting

## Keyboard navigation

The following keyboard interactions are supported by the `SfCalendar`.
The following keyboard interactions are supported by the [SfCalendar](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar-class.html).


| Key | Description |
Expand Down
2 changes: 1 addition & 1 deletion Flutter/calendar/appointment-resizing.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ Widget build(BuildContext context) {

## 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]() 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 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.

* [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.
Expand Down
57 changes: 28 additions & 29 deletions Flutter/calendar/appointments.md
View file
Open in desktop

Large diffs are not rendered by default.

34 changes: 17 additions & 17 deletions Flutter/calendar/builders.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,10 @@ The [MonthCellBuilder](https://pub.dev/documentation/syncfusion_flutter_calendar

[MonthCellDetails](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthCellDetails-class.html) - returns the details of the month cell.

* `date` - returns the month cell date.
* `appointments` - returns the month cell appointments.
* `visibleDates` - returns the current view visible dates.
* `bounds` - returns the month cell bounds.
* [date](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthCellDetails/date.html) - returns the month cell date.
* [appointments](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthCellDetails/appointments.html) - returns the month cell appointments.
* [visibleDates](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthCellDetails/visibleDates.html) - returns the current view visible dates.
* [bounds](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthCellDetails/bounds.html) - returns the month cell bounds.


{% tabs %}
Expand Down Expand Up @@ -69,12 +69,12 @@ Widget build(BuildContext context) {

## Schedule view month header builder

You can design your custom view and assign this view to the month header of a schedule view in the calendar by returning an appropriate widget using the [scheduleViewMonthHeaderBuilder](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/scheduleViewMonthHeaderBuilder.html) in the `SfCalendar`.
You can design your custom view and assign this view to the month header of a schedule view in the calendar by returning an appropriate widget using the [scheduleViewMonthHeaderBuilder](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/scheduleViewMonthHeaderBuilder.html) in the [SfCalendar](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar-class.html).

[ScheduleViewMonthHeaderDetails](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ScheduleViewMonthHeaderDetails-class.html) - returns the required details of the schedule view month header.

* `date` - returns the header date.
* `bounds` - returns the header bounds.
* [date](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ScheduleViewMonthHeaderDetails/date.html) - returns the header date.
* [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" %}
Expand Down Expand Up @@ -120,15 +120,15 @@ Widget build(BuildContext context) {
![Schedule view header builder](images/builder/schedule_view_month_header_builder.png)

## Appointment builder
The [CalendarAppointmentBuilder](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarAppointmentBuilder.html) allows you to design your custom view and assign the view to the appointment UI of the calendar by returning an appropriate widget in the [appointmentBuilder](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/appointmentBuilder.html) of `SfCalendar`.
The [CalendarAppointmentBuilder](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarAppointmentBuilder.html) allows you to design your custom view and assign the view to the appointment UI of the calendar by returning an appropriate widget in the [appointmentBuilder](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/appointmentBuilder.html) of [SfCalendar](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar-class.html).

[CalendarAppointmentDetails](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarAppointmentDetails-class.html): Returns the details of the appointment view.


* `date`: The date associate with the appointment view.
* `appointments`: List of appointments associated with the appointment view.
*`bound`: Returns the appointment view bounds.
* `isMoreAppointmentRegion`: Determines whether the widget replaces the more appointment region.
* [date](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarAppointmentDetails/date.html): The date associate with the appointment view.
* [appointments](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarAppointmentDetails/appointments.html): List of appointments associated with the appointment view.
* [bounds](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarAppointmentDetails/bounds.html): Returns the appointment view bounds.
* [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" %}
Expand Down Expand Up @@ -258,9 +258,9 @@ The [TimeRegionBuilder](https://pub.dev/documentation/syncfusion_flutter_calenda

[TimeRegionDetails](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeRegionDetails-class.html): Returns the details of the time region view.

* `date`: The date associate with the time region view.
* `bound`: Returns the time region view bounds.
* `region`: The Region detail associated with the time region view.
* [date](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeRegionDetails/date.html): The date associate with the time region view.
* [bounds](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeRegionDetails/bounds.html): Returns the time region view bounds.
* [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" %}
Expand Down Expand Up @@ -323,8 +323,8 @@ The [ResourceViewHeaderBuilder](https://pub.dev/documentation/syncfusion_flutter

[ResourceViewHeaderDetails](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ResourceViewHeaderDetails-class.html) - returns the required details of the resource view header builder.

* `bound`: returns the resource view header bound.
* `resource`: returns the display name, color, id and image.
* [bounds](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ResourceViewHeaderDetails/bounds.html): returns the resource view header bounds.
* [resource](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ResourceViewHeaderDetails/resource.html): returns the display name, color, id and image.


{% tabs %}
Expand Down
73 changes: 38 additions & 35 deletions Flutter/calendar/callbacks.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ Calendar supports the [ViewChangedCallback](https://pub.dev/documentation/syncfu

The [onViewChanged](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/onViewChanged.html) callback triggers when the current view of calendar changed, that is view swiped to previous/next view, calendar view switched to another calendar view.

* `visibleDates` - returns the current view visible dates collection.
* [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" %}
Expand Down Expand Up @@ -45,9 +45,10 @@ Widget build(BuildContext context) {

The [onTap](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/onTap.html) callback triggers whenever the calendar is tapped.

* `date` - returns the selected date.
* `appointments` - returns the selected appointments.
* `targetElement` - returns the element tapped.
* [date](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarTouchDetails/date.html) - returns the selected date.
* [appointments](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarTouchDetails/appointments.html) - returns the selected appointments.
* [targetElement](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarTouchDetails/targetElement.html) - returns the element tapped.
* [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" %}
Expand Down Expand Up @@ -75,56 +76,58 @@ Widget build(BuildContext context) {

>**NOTE**
* For recurrence appointment, the tap details will always return as `Appointment`, even for the custom business object.
* The `onTap` and `onLongPress` callbacks are not applicable for pop-ups like allowedViews and date picker in the calendar header.
* The [onTap](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/onTap.html) and [onLongPress](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/onLongPress.html) callbacks are not applicable for pop-ups like allowedViews and date picker in the calendar header.

## 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.

* `date` - returns the date based on the given offset.
* `appointments` - returns the appointments based on the given offset.
* `targetElement` - returns the calendar element based on the given offset.
* `resource` - returns the resource based on the given offset.
* [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.
* [targetElement](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarTouchDetails/targetElement.html) - returns the calendar element based on the given offset.
* [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" %}

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: MouseRegion(
onHover: (PointerHoverEvent event) {
CalendarDetails? details = _calendarController
.getCalendarDetailsAtOffset!(event.localPosition);
if (details!.targetElement == CalendarElement.appointment) {
dynamic appointments = details.appointments;
final String subject =
details.appointments![0].subject.toString();
final dynamic startTime = details.appointments![0].startTime;
final dynamic endTime = details.appointments![0].endTime;
}
},
child: SfCalendar(
view: CalendarView.month,
controller: _calendarController,
dataSource: _getCalendarDataSource(),
))),
);
}
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: MouseRegion(
onHover: (PointerHoverEvent event) {
CalendarDetails? details = _calendarController
.getCalendarDetailsAtOffset!(event.localPosition);
if (details!.targetElement == CalendarElement.appointment) {
dynamic appointments = details.appointments;
final String subject =
details.appointments![0].subject.toString();
final dynamic startTime = details.appointments![0].startTime;
final dynamic endTime = details.appointments![0].endTime;
}
},
child: SfCalendar(
view: CalendarView.month,
controller: _calendarController,
dataSource: _getCalendarDataSource(),
),
),
),
);
}

{% endhighlight %}
{% endtabs %}

## Long press callback
The [onLongPress](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/onLongPress.html) callback is called, whenever the `SfCalendar` 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).

* `date` - returns the long-pressed date.
* `appointments` - returns the long-pressed appointments.
* `targetElement` - returns the long-pressed calendar element.
* [date](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarTouchDetails/date.html) - returns the long-pressed date.
* [appointments](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarTouchDetails/appointments.html) - returns the long-pressed appointments.
* [targetElement](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarTouchDetails/targetElement.html) - returns the long-pressed calendar element.
* [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" %}
Expand Down
Loading