Skip to content

Commit d042e21

Browse files
Harish-SF4429Harish-SF4429
committed
Added content for the new features for scheduler
1 parent 6a55b58 commit d042e21

File tree

3 files changed

+193
-2
lines changed

3 files changed

+193
-2
lines changed

‎MAUI/Scheduler/month-view.md‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,56 @@ this.Scheduler.MonthView.AppointmentIndicatorSize = 10;
109109

110110
![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}
111111

112+
## Appointment indicator renderer mode
113+
114+
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). By default, the `AppointmentIndicatorRenderMode` is set to Fill.
115+
116+
{% tabs %}
117+
{% highlight XAML hl_lines="5" %}
118+
119+
<schedule:SfScheduler x:Name="Scheduler"
120+
View="Month" >
121+
<schedule:SfScheduler.MonthView>
122+
<schedule:SchedulerMonthView AppointmentDisplayMode="Indicator" AppointmentIndicatorRenderMode="FillAndStroke"/>
123+
</schedule:SfScheduler.MonthView>
124+
</schedule:SfScheduler>
125+
126+
{% endhighlight %}
127+
{% highlight C# hl_lines="4" %}
128+
129+
this.Scheduler.View = SchedulerView.Month;
130+
this.Scheduler.MonthView.AppointmentDisplayMode = SchedulerMonthAppointmentDisplayMode.Indicator;
131+
this.Scheduler.MonthView.AppointmentIndicatorRenderMode = AppointmentIndicatorRenderMode.FillAndStroke;
132+
133+
{% endhighlight %}
134+
{% endtabs %}
135+
136+
## Appointment indicator stroke thickness
137+
138+
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.
139+
140+
{% tabs %}
141+
{% highlight XAML hl_lines="5" %}
142+
143+
<schedule:SfScheduler x:Name="Scheduler"
144+
View="Month" >
145+
<schedule:SfScheduler.MonthView>
146+
<schedule:SchedulerMonthView AppointmentDisplayMode="Indicator" AppointmentIndicatorSize="20" AppointmentIndicatorRenderMode="FillAndStroke" AppointmentIndicatorStrokeThickness="4"/>
147+
</schedule:SfScheduler.MonthView>
148+
</schedule:SfScheduler>
149+
150+
{% endhighlight %}
151+
{% highlight C# hl_lines="6" %}
152+
153+
this.Scheduler.View = SchedulerView.Month;
154+
this.Scheduler.MonthView.AppointmentDisplayMode = SchedulerMonthAppointmentDisplayMode.Indicator;
155+
this.Scheduler.MonthView.AppointmentIndicatorRenderMode = AppointmentIndicatorRenderMode.FillAndStroke;
156+
this.Scheduler.MonthView.AppointmentIndicatorSize = 20;
157+
this.Scheduler.MonthView.AppointmentIndicatorStrokeThickness = 4;
158+
159+
{% endhighlight %}
160+
{% endtabs %}
161+
112162
## Hide leading and trailing dates
113163

114164
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.`

‎MAUI/Scheduler/resource-view.md‎

Lines changed: 115 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ this.Scheduler.AppointmentsSource = appointment;
114114

115115
![Resource sharing in .NET MAUI Scheduler.](images/resource-view/resource-view-sharing-in-net-maui-scheduler.png)
116116

117-
## Resource Grouping in Days View
117+
## Resource Grouping in Days View - Desktop
118118

119119
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.
120120

@@ -172,6 +172,120 @@ this.Scheduler.ResourceView.ResourceGroupType = SchedulerResourceGroupType.Date;
172172

173173
![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)
174174

175+
## Resource Grouping in Days View - Mobile
176+
177+
In Mobile platforms, the resource view for the day, week, and work week view where grouped under an adaptive header.
178+
179+
### Customize hamburger icon color
180+
181+
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).
182+
183+
{% tabs %}
184+
{% highlight XAML hl_lines="4" %}
185+
186+
<syncfusion:SfScheduler x:Name="Scheduler">
187+
<syncfusion:SfScheduler.ResourceView>
188+
<syncfusion:SchedulerResourceView HamburgerIconColor="Black" />
189+
</syncfusion:SfScheduler.ResourceView>
190+
</syncfusion:SfScheduler>
191+
192+
{% endhighlight %}
193+
{% highlight C# hl_lines="2" %}
194+
195+
this.Scheduler.ResourceView.HamburgerIconColor = Colors.Black;
196+
197+
{% endhighlight %}
198+
{% endtabs %}
199+
200+
### Customize drawer resource selection color
201+
202+
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).
203+
204+
{% tabs %}
205+
{% highlight XAML hl_lines="4" %}
206+
207+
<syncfusion:SfScheduler x:Name="Scheduler">
208+
<syncfusion:SfScheduler.ResourceView>
209+
<syncfusion:SchedulerResourceView DrawerResourceSelectionColor="DodgerBlue" />
210+
</syncfusion:SfScheduler.ResourceView>
211+
</syncfusion:SfScheduler>
212+
213+
{% endhighlight %}
214+
{% highlight C# hl_lines="2" %}
215+
216+
this.Scheduler.ResourceView.DrawerResourceSelectionColor = Brush.DodgerBlue;
217+
218+
{% endhighlight %}
219+
{% endtabs %}
220+
221+
### Customize drawer background
222+
223+
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).
224+
225+
{% tabs %}
226+
{% highlight XAML hl_lines="4" %}
227+
228+
<syncfusion:SfScheduler x:Name="Scheduler">
229+
<syncfusion:SfScheduler.ResourceView>
230+
<syncfusion:SchedulerResourceView DrawerBackground="Red" />
231+
</syncfusion:SfScheduler.ResourceView>
232+
</syncfusion:SfScheduler>
233+
234+
{% endhighlight %}
235+
{% highlight C# hl_lines="2" %}
236+
237+
this.Scheduler.ResourceView.DrawerBackground = Brush.Red;
238+
239+
{% endhighlight %}
240+
{% endtabs %}
241+
242+
### Customize adaptive header appearance using DataTemplate
243+
244+
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).
245+
246+
{% tabs %}
247+
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="5 6 7 8 9 10 11 12 13 14 15" %}
248+
249+
<schedule:SfScheduler x:Name="Scheduler">
250+
<schedule:SfScheduler.ResourceView>
251+
<schedule:SchedulerResourceView>
252+
<schedule:SchedulerResourceView.AdaptiveHeaderTemplate>
253+
<DataTemplate>
254+
<Grid Padding="8">
255+
<HorizontalStackLayout Spacing="8" VerticalOptions="Center">
256+
<Label Text="{Binding Name}"
257+
FontAttributes="Bold"
258+
FontSize="14" />
259+
</HorizontalStackLayout>
260+
</Grid>
261+
</DataTemplate>
262+
</schedule:SchedulerResourceView.AdaptiveHeaderTemplate>
263+
</schedule:SchedulerResourceView>
264+
</schedule:SfScheduler.ResourceView>
265+
</schedule:SfScheduler>
266+
267+
{% endhighlight %}
268+
{% highlight c# tabtitle="MainPage.xaml.cs" %}
269+
270+
this.Scheduler.ResourceView.AdaptiveHeaderTemplate = new DataTemplate(() =>
271+
{
272+
var nameLabel = new Label
273+
{
274+
FontAttributes = FontAttributes.Bold,
275+
FontSize = 14,
276+
VerticalOptions = LayoutOptions.Center
277+
};
278+
nameLabel.SetBinding(Label.TextProperty, "Name");
279+
280+
var row = new HorizontalStackLayout { Spacing = 8, VerticalOptions = LayoutOptions.Center };
281+
row.Children.Add(nameLabel);
282+
283+
return new Grid { Padding = 8, Children = { row } };
284+
});
285+
286+
{% endhighlight %}
287+
{% endtabs %}
288+
175289
## Visible Resource Count
176290

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

‎MAUI/Scheduler/timeline-views.md‎

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,33 @@ this.Content = scheduler;
136136

137137
N> The `Timeline workweek` view displays exactly the defined working days on Scheduler control, whereas other views displays all the days.
138138

139+
## Hide non-working days in timeline month
140+
141+
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.
142+
143+
{% tabs %}
144+
{% highlight XAML hl_lines="6" %}
145+
146+
<scheduler:SfScheduler x:Name="Scheduler"
147+
View="TimelineMonth">
148+
<scheduler:SfScheduler.TimelineView>
149+
<scheduler:SchedulerTimelineView
150+
NonWorkingDays="Monday,Wednesday" HideNonWorkingDays = "True"/>
151+
</scheduler:SfScheduler.TimelineView>
152+
</scheduler:SfScheduler>
153+
154+
{% endhighlight %}
155+
{% highlight C# hl_lines="5" %}
156+
157+
SfScheduler scheduler = new SfScheduler();
158+
scheduler.View = SchedulerView.TimelineMonth;
159+
scheduler.TimelineView.NonWorkingDays = SchedulerWeekDays.Monday | SchedulerWeekDays.Wednesday;
160+
scheduler.TimelineView.HideNonWorkingDays = true;
161+
this.Content = scheduler;
162+
163+
{% endhighlight %}
164+
{% endtabs %}
165+
139166
## Flexible working hours
140167

141168
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 +194,7 @@ this.Content = scheduler;
167194
![flexible-working-hours-in-maui-scheduler](images/timeline-views/flexible-working-hours-in-maui-scheduler.png)
168195

169196
N>
170-
* The `NonWorkingDays` property will be applicable only for `workWeek` and `TimelineWorkWeek` views only, and not be applicable for the remaining views.
197+
* The `NonWorkingDays` property will be applicable only for `workWeek` , `TimelineWorkWeek` and `TimelineMonth` views only, and not be applicable for the remaining views.
171198
* No need to specify the decimal point values for `StartHour` and `EndHour`, if you do not want to set the minutes.
172199
* 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).
173200
* 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.

0 commit comments

Comments
 (0)