diff --git a/MAUI/Scheduler/images/month-view/appointment-indicator-stroke-thickness-maui-scheduler.png b/MAUI/Scheduler/images/month-view/appointment-indicator-stroke-thickness-maui-scheduler.png new file mode 100644 index 0000000000..1e9d905ed6 Binary files /dev/null and b/MAUI/Scheduler/images/month-view/appointment-indicator-stroke-thickness-maui-scheduler.png differ diff --git a/MAUI/Scheduler/images/month-view/appointment-renderer-mode-stroke-maui-scheduler.png b/MAUI/Scheduler/images/month-view/appointment-renderer-mode-stroke-maui-scheduler.png new file mode 100644 index 0000000000..5120079a30 Binary files /dev/null and b/MAUI/Scheduler/images/month-view/appointment-renderer-mode-stroke-maui-scheduler.png differ diff --git a/MAUI/Scheduler/images/resource-view/customize-adapter-header-template-in-maui-scheduler.png b/MAUI/Scheduler/images/resource-view/customize-adapter-header-template-in-maui-scheduler.png new file mode 100644 index 0000000000..c90b9f6030 Binary files /dev/null and b/MAUI/Scheduler/images/resource-view/customize-adapter-header-template-in-maui-scheduler.png differ diff --git a/MAUI/Scheduler/images/resource-view/customize-drawer-background-in-maui-scheduler.png b/MAUI/Scheduler/images/resource-view/customize-drawer-background-in-maui-scheduler.png new file mode 100644 index 0000000000..cea4272e31 Binary files /dev/null and b/MAUI/Scheduler/images/resource-view/customize-drawer-background-in-maui-scheduler.png differ diff --git a/MAUI/Scheduler/images/resource-view/customize-drawer-resource-selection-color-in-maui-scheduler.png b/MAUI/Scheduler/images/resource-view/customize-drawer-resource-selection-color-in-maui-scheduler.png new file mode 100644 index 0000000000..c352cc6e88 Binary files /dev/null and b/MAUI/Scheduler/images/resource-view/customize-drawer-resource-selection-color-in-maui-scheduler.png differ diff --git a/MAUI/Scheduler/images/resource-view/customize-drawer-resource-template-in-maui-scheduler.png b/MAUI/Scheduler/images/resource-view/customize-drawer-resource-template-in-maui-scheduler.png new file mode 100644 index 0000000000..f246f84319 Binary files /dev/null and b/MAUI/Scheduler/images/resource-view/customize-drawer-resource-template-in-maui-scheduler.png differ diff --git a/MAUI/Scheduler/images/resource-view/customize-hamburger-icon-color-in-maui-scheduler.png b/MAUI/Scheduler/images/resource-view/customize-hamburger-icon-color-in-maui-scheduler.png new file mode 100644 index 0000000000..19a57abb8e Binary files /dev/null and b/MAUI/Scheduler/images/resource-view/customize-hamburger-icon-color-in-maui-scheduler.png differ diff --git a/MAUI/Scheduler/images/timeline-views/hide-non-working-days-in-timelinemonth-maui-scheduler.png b/MAUI/Scheduler/images/timeline-views/hide-non-working-days-in-timelinemonth-maui-scheduler.png new file mode 100644 index 0000000000..a235262ab2 Binary files /dev/null and b/MAUI/Scheduler/images/timeline-views/hide-non-working-days-in-timelinemonth-maui-scheduler.png differ diff --git a/MAUI/Scheduler/month-view.md b/MAUI/Scheduler/month-view.md index 750d612967..34816c3780 100644 --- a/MAUI/Scheduler/month-view.md +++ b/MAUI/Scheduler/month-view.md @@ -109,6 +109,62 @@ this.Scheduler.MonthView.AppointmentIndicatorSize = 10; ![change-appointment-indicator-size-in-maui-scheduler](images/month-view/appointment-indicator-size-maui-scheduler.png){:width="325" height="600" loading="lazy" .lazy .shadow-effect .section-padding .img-padding} +## Appointment indicator renderer mode + +The scheduler month view allows you to customize the appointment indicator rendering mode by using the `AppointmentIndicatorRenderMode` property of the [MonthView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerMonthView.html). The `AppointmentIndicatorRenderMode` property supports three different types: `Fill`, `Stroke` and `FillAndStroke`. By default, the `AppointmentIndicatorRenderMode` is set to Fill. + +{% tabs %} +{% highlight XAML hl_lines="5" %} + + + + + + + +{% endhighlight %} +{% highlight C# hl_lines="4" %} + +this.Scheduler.View = SchedulerView.Month; +this.Scheduler.MonthView.AppointmentDisplayMode = SchedulerMonthAppointmentDisplayMode.Indicator; +this.Scheduler.MonthView.AppointmentIndicatorRenderMode = AppointmentIndicatorRenderMode.Stroke; +this.Scheduler.MonthView.AppointmentIndicatorSize = 15; +this.Scheduler.MonthView.AppointmentIndicatorCount = 2; + +{% endhighlight %} +{% endtabs %} + +![appointment-renderer-mode-stroke-maui-scheduler](images/month-view/appointment-renderer-mode-stroke-maui-scheduler.png){:width="325" height="600" loading="lazy" .lazy .shadow-effect .section-padding .img-padding} + +## Appointment indicator stroke thickness + +The scheduler month view allows you to customize the appointment indicator stroke thickness by using the `AppointmentIndicatorStrokeThickness` property of the [MonthView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerMonthView.html). By default, the `AppointmentIndicatorStrokeThickness` is set to 1d. + +{% tabs %} +{% highlight XAML hl_lines="5" %} + + + + + + + +{% endhighlight %} +{% highlight C# hl_lines="6" %} + +this.Scheduler.View = SchedulerView.Month; +this.Scheduler.MonthView.AppointmentDisplayMode = SchedulerMonthAppointmentDisplayMode.Indicator; +this.Scheduler.MonthView.AppointmentIndicatorRenderMode = AppointmentIndicatorRenderMode.Stroke; +this.Scheduler.MonthView.AppointmentIndicatorSize = 20; +this.Scheduler.MonthView.AppointmentIndicatorStrokeThickness = 4; + +{% endhighlight %} +{% endtabs %} + +![appointment-indicator-stroke-thickness-maui-scheduler](images/month-view/appointment-indicator-stroke-thickness-maui-scheduler.png){:width="325" height="600" loading="lazy" .lazy .shadow-effect .section-padding .img-padding} + ## Hide leading and trailing dates The previous and next month dates from a Scheduler month view can be hidden by using the [ShowLeadingAndTrailingDates](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerMonthView.html#Syncfusion_Maui_Scheduler_SchedulerMonthView_ShowLeadingAndTrailingDates) property in the [MonthView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerMonthView.html). The `ShowLeadingAndTrailingDates` property defaults to `true.` diff --git a/MAUI/Scheduler/resource-view.md b/MAUI/Scheduler/resource-view.md index 84ab6711bd..6ad4437180 100644 --- a/MAUI/Scheduler/resource-view.md +++ b/MAUI/Scheduler/resource-view.md @@ -114,7 +114,7 @@ this.Scheduler.AppointmentsSource = appointment; ![Resource sharing in .NET MAUI Scheduler.](images/resource-view/resource-view-sharing-in-net-maui-scheduler.png) -## Resource Grouping in Days View +## Resource Grouping in Days View - Desktop In the day, week, and work week views, you can control whether dates are grouped under resources or resources are grouped under dates by using the [`ResourceGroupType`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerResourceView.html#Syncfusion_Maui_Scheduler_SchedulerResourceView_ResourceGroupType) property of the [`SchedulerResourceView`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerResourceView.html#Syncfusion_Maui_Scheduler_SchedulerResourceView_Resources) class. @@ -172,6 +172,264 @@ this.Scheduler.ResourceView.ResourceGroupType = SchedulerResourceGroupType.Date; ![Resource Grouping By Date in Days View in .NET MAUI Scheduler.](images/resource-view/group-resources-by-date-in-days-view-in-net-maui-scheduler.png) +## Resource Grouping in Days View - Mobile + +In Mobile platforms, the resource view for the day, week, and work week view where grouped under an adaptive header. + +N> The adaptive header display of resources in the **Day**, **Week**, and **Work Week** views is supported only on .NET MAUI mobile platforms (**Android** and **iOS**). + +### Customize hamburger icon color + +The hamburger icon color can be customized by using the `HamburgerIconColor` property of the [SchedulerResourceView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerResourceView.html?tabs=tabid-13%2Ctabid-6). + +{% tabs %} +{% highlight XAML hl_lines="4" %} + + + + + + + +{% endhighlight %} +{% highlight C# hl_lines="9" %} +var Resources = new ObservableCollection() +{ + new SchedulerResource() { Name = "Sophia", Id = "1000" }, + new SchedulerResource() { Name = "Zoey Addison", Id = "1001" }, + new SchedulerResource() { Name = "James William", Id = "1002" }, +}; + +this.Scheduler.ResourceView.Resources = Resources; +this.Scheduler.ResourceView.HamburgerIconColor = Colors.Red; + +{% endhighlight %} +{% endtabs %} + +![customize-hamburger-icon-color-in-maui-scheduler](images/resource-view/customize-hamburger-icon-color-in-maui-scheduler.png) + +### Customize drawer resource selection color + +The drawer resource selection color can be customized by using the `DrawerResourceSelectionColor` property of the [SchedulerResourceView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerResourceView.html?tabs=tabid-13%2Ctabid-6). + +{% tabs %} +{% highlight XAML hl_lines="4" %} + + + + + + + +{% endhighlight %} +{% highlight C# hl_lines="9" %} +var Resources = new ObservableCollection() +{ + new SchedulerResource() { Name = "Sophia", Id = "1000" }, + new SchedulerResource() { Name = "Zoey Addison", Id = "1001" }, + new SchedulerResource() { Name = "James William", Id = "1002" }, +}; + +this.Scheduler.ResourceView.Resources = Resources; +this.Scheduler.ResourceView.DrawerResourceSelectionColor = Brush.DodgerBlue; + +{% endhighlight %} +{% endtabs %} + +![customize-drawer-resource-selection-color-in-maui-scheduler](images/resource-view/customize-drawer-resource-selection-color-in-maui-scheduler.png) + +### Customize drawer background + +The drawer background can be customized by using the `DrawerBackground` property of the [SchedulerResourceView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerResourceView.html?tabs=tabid-13%2Ctabid-6). + +{% tabs %} +{% highlight XAML hl_lines="4" %} + + + + + + + +{% endhighlight %} +{% highlight C# hl_lines="9" %} +var Resources = new ObservableCollection() +{ + new SchedulerResource() { Name = "Sophia", Id = "1000" }, + new SchedulerResource() { Name = "Zoey Addison", Id = "1001" }, + new SchedulerResource() { Name = "James William", Id = "1002" }, +}; + +this.Scheduler.ResourceView.Resources = Resources; +this.Scheduler.ResourceView.DrawerBackground = Brush.LightGoldenrodYellow; + +{% endhighlight %} +{% endtabs %} + +![customize-drawer-background-in-maui-scheduler](images/resource-view/customize-drawer-background-in-maui-scheduler.png) + +### Customize adaptive header appearance using DataTemplate + +The adaptive header appearance customization can be achieved by using the `AdaptiveHeaderTemplate` property of [SchedulerResourceView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerResourceView.html?tabs=tabid-13%2Ctabid-6) in the [SfScheduler](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SfScheduler.html). + +{% tabs %} +{% highlight xaml tabtitle="MainPage.xaml" %} + + + + + + + + + + + + + + + + + +{% endhighlight %} +{% highlight c# tabtitle="MainPage.xaml.cs" %} + +var Resources = new ObservableCollection() +{ + new SchedulerResource() { Name = "Sophia", Id = "1000" }, + new SchedulerResource() { Name = "Zoey Addison", Id = "1001" }, + new SchedulerResource() { Name = "James William", Id = "1002" }, +}; + +this.Scheduler.ResourceView.Resources = Resources; +this.Scheduler.ResourceView.AdaptiveHeaderTemplate = new DataTemplate(() => +{ + var grid = new Grid + { + Padding = 8, + BackgroundColor = Colors.PaleGreen + }; + + var stack = new HorizontalStackLayout + { + Spacing = 8, + VerticalOptions = LayoutOptions.Center + }; + + var menuLabel = new Label + { + Text = "☰", + FontSize = 16, + TextColor = Colors.Red, + VerticalTextAlignment = TextAlignment.Center, + HorizontalTextAlignment = TextAlignment.Center, + Margin = new Thickness(0, 0, 12, 0) + }; + + var tap = new TapGestureRecognizer(); + tap.Tapped += OnTapped; + menuLabel.GestureRecognizers.Add(tap); + var nameLabel = new Label + { + FontAttributes = FontAttributes.Bold, + FontSize = 14, + TextColor = Colors.DarkViolet + }; + + nameLabel.SetBinding(Label.TextProperty, "Resource.Name"); + stack.Add(menuLabel); + stack.Add(nameLabel); + grid.Add(stack); + return grid; +}); + +private void OnTapped(object sender, TappedEventArgs e) +{ + if (sender is Label label && label.BindingContext is SchedulerAdaptiveResource resource) + { + resource.ToggleResourceDrawerView(); + } +} + +{% endhighlight %} +{% endtabs %} + +![customize-adapter-header-template-in-maui-scheduler](images/resource-view/customize-adapter-header-template-in-maui-scheduler.png) + +N> + +* The BindingContext of the `AdaptiveHeaderTemplate` is the `SchedulerAdaptiveResource.` +* The `ToggleResourceDrawerView` method should be called on the `SchedulerAdaptiveResource` instance obtained from the control’s BindingContext. It toggles the visibility of the drawer resource view. It is used only when the `AdaptiveHeaderTemplate` is applied. + +### Customize drawer resource appearance using DataTemplate + +The drawer resource appearance customization can be achieved by using the `DrawerResourceTemplate` property of [SchedulerResourceView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerResourceView.html?tabs=tabid-13%2Ctabid-6) in the [SfScheduler](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SfScheduler.html). + +{% tabs %} +{% highlight xaml tabtitle="MainPage.xaml" %} + + + + + + + + + + + + + + + + + + +{% endhighlight %} +{% highlight c# tabtitle="MainPage.xaml.cs" %} + +public class Employee +{ + public string Name { get; set; } + public object Id { get; set; } + public Brush BackgroundBrush { get; set; } + public Brush ForegroundBrush { get; set; } +} + +var Resources = new ObservableCollection() +{ + new Employee() { Name = "Sophia", Id = "1000", BackgroundBrush = Brush.PaleGreen, ForegroundBrush = Brush.Black }, + new Employee() { Name = "Zoey Addison", Id = "1001", BackgroundBrush = Brush.SkyBlue, ForegroundBrush = Brush.Black }, + new Employee() { Name = "James William", Id = "1002", BackgroundBrush = Brush.LightPink, ForegroundBrush = Brush.Black }, +}; + +this.scheduler.ResourceView.Resources = Resources; + +{% endhighlight %} +{% endtabs %} + +![customize-drawer-resource-template-in-maui-scheduler](images/resource-view/customize-drawer-resource-template-in-maui-scheduler.png) + +N> The BindingContext of the `DrawerResourceTemplate` is the [SchedulerResource.](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerResource.html) and the custom data object can be bound in `DrawerResourceTemplate` by using `SchedulerResource.DataItem`. + ## Visible Resource Count The number of resources shown in the day, week, work week, timelineday, timelineweek, timelineworkweek views can be controlled using the [`VisibleResourceCount`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerResourceView.html#Syncfusion_Maui_Scheduler_SchedulerResourceView_VisibleResourceCount) property of the [`SchedulerResourceView`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerResourceView.html#Syncfusion_Maui_Scheduler_SchedulerResourceView_Resources) class. This lets you define how many resources are visible at a time. diff --git a/MAUI/Scheduler/timeline-views.md b/MAUI/Scheduler/timeline-views.md index 0f9a1c2823..f0be34dacd 100644 --- a/MAUI/Scheduler/timeline-views.md +++ b/MAUI/Scheduler/timeline-views.md @@ -136,6 +136,37 @@ this.Content = scheduler; N> The `Timeline workweek` view displays exactly the defined working days on Scheduler control, whereas other views displays all the days. +## Hide non-working days in timeline month + +The `HideNonWorkingDays` property of the [TimelineView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerTimelineView.html) allows you to control the visibility of non-working days in `TimelineMonth`. By default, the `HideNonWorkingDays` property is set to false. + +{% tabs %} +{% highlight XAML hl_lines="6" %} + + + + + + + +{% endhighlight %} +{% highlight C# hl_lines="5" %} + +SfScheduler scheduler = new SfScheduler(); +scheduler.View = SchedulerView.TimelineMonth; +scheduler.TimelineView.NonWorkingDays = SchedulerWeekDays.Monday | SchedulerWeekDays.Wednesday; +scheduler.TimelineView.HideNonWorkingDays = true; +this.Content = scheduler; + +{% endhighlight %} +{% endtabs %} + +![hide-non-working-days-in-timelinemonth-maui-scheduler](images/timeline-views/hide-non-working-days-in-timelinemonth-maui-scheduler.png) + +N> The `HideNonWorkingDays` property will be applicable only for `TimelineMonth` view, and not be applicable for the remaining views. + ## Flexible working hours The default values for [StartHour](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerTimeSlotView.html#Syncfusion_Maui_Scheduler_SchedulerTimeSlotView_StartHour) and [EndHour](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerTimeSlotView.html#Syncfusion_Maui_Scheduler_SchedulerTimeSlotView_EndHour) are `0` and `24` respectively, to show all the time slots for a timeline day, timeline week, or timeline workweek view. You may set these properties to show only the required time periods in [TimelineView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerTimelineView.html). You can set [StartHour](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerTimeSlotView.html#Syncfusion_Maui_Scheduler_SchedulerTimeSlotView_StartHour) and [EndHour](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerTimeSlotView.html#Syncfusion_Maui_Scheduler_SchedulerTimeSlotView_EndHour) in the time duration to show the required time duration in minutes. @@ -167,7 +198,7 @@ this.Content = scheduler; ![flexible-working-hours-in-maui-scheduler](images/timeline-views/flexible-working-hours-in-maui-scheduler.png) N> -* The `NonWorkingDays` property will be applicable only for `workWeek` and `TimelineWorkWeek` views only, and not be applicable for the remaining views. +* The `NonWorkingDays` property will be applicable only for `workWeek` , `TimelineWorkWeek` and `TimelineMonth` views only, and not be applicable for the remaining views. * No need to specify the decimal point values for `StartHour` and `EndHour`, if you do not want to set the minutes. * The number of time slots will be calculated based on total minutes of a day and time interval (total minutes of a day ((start hour - end hour) * 60) / time interval). * If a custom timeInterval is given, then the number of time slots calculated based on the given `TimeInterval` should result in an integer value (total minutes % timeInterval = 0), otherwise the next immediate time interval that results in integer value when dividing total minutes of a day will be considered. For example, if TimeInterval=2 Hours 15 minutes and total minutes = 1440 (24 Hours per day), then the `TimeInterval` will be changed to ‘144’ (1440%144=0) by considering (total minutes % TimeInterval = 0), it will return integer value for time slots rendering.