Skip to content

Scheduler/agenda-view.md #3334

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 11 commits into
base: development
Choose a base branch
from
Open

Scheduler/agenda-view.md #3334

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
86e9eba
Scheduler/agenda-view.md
NatarajanSF4844 Jun 10, 2025
d439f33
Show/Hide Error Label feature UG
NatarajanSF4844 Jun 10, 2025
e44a081
Tool Bar new features UG
NatarajanSF4844 Jun 10, 2025
7be0c2d
Added UG to Ripple effect in sfsegmented control
NatarajanSF4844 Jun 10, 2025
65bbc9b
CI status CHK
NatarajanSF4844 Jun 11, 2025
6f14a90
CI status CHK
NatarajanSF4844 Jun 11, 2025
71885ef
CI status CHK
NatarajanSF4844 Jun 11, 2025
960b743
CI status CHK
NatarajanSF4844 Jun 11, 2025
35bf118
CI status chk
NatarajanSF4844 Jun 11, 2025
d83c83a
Tabs adjusted
NatarajanSF4844 Jun 11, 2025
d440c3e
Code Review Suggestion
NatarajanSF4844 Jun 11, 2025
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
52 changes: 52 additions & 0 deletions MAUI/DataForm/Validation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,6 +197,58 @@ private void OnDataFormValidateProperty(object sender, DataFormValidatePropertyE

The data form supports customizing the style of both error and valid message label style easily.

## Show/Hide error label visiblity customization

The error label visiblity can be customized by switching it's value between true or false by changing ShowErrorLabel property of the [DataformItem](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataForm.DataFormItem.html?tabs=tabid-53%2Ctabid-58%2Ctabid-100%2Ctabid-33%2Ctabid-38%2Ctabid-6%2Ctabid-1%2Ctabid-28%2Ctabid-63%2Ctabid-8%2Ctabid-48%2Ctabid-96%2Ctabid-68%2Ctabid-76%2Ctabid-18%2Ctabid-13%2Ctabid-23%2Ctabid-72%2Ctabid-84%2Ctabid-92%2Ctabid-80%2Ctabid-88%2Ctabid-43)

{% tabs %}
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="6" %}

<ContentPage
...
xmlns:dataForm="clr-namespace:Syncfusion.Maui.DataForm;assembly=Syncfusion.Maui.DataForm">
<dataForm:SfDataForm x:Name="dataForm" AutoGenerateItems="False">
<dataForm:SfDataForm.Items>
<dataForm:DataFormTextItem x:Name="TextItem" ShowErrorLabel="false"/>
</dataForm:SfDataForm.Items>
</dataForm:SfDataForm>
</ContentPage>

{% endhighlight %}
{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="2" %}

this.dataForm.AutoGenerateItems = false;
this.TextItem.ShowErrorLabel = false;

{% endhighlight %}
{% endtabs %}

## Show/Hide valid label visiblity customization

The valid message label visiblity can be customized by switching it's value between true or false by changing ShowValidMessageLabel property of the [DataformItem](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataForm.DataFormItem.html?tabs=tabid-53%2Ctabid-58%2Ctabid-100%2Ctabid-33%2Ctabid-38%2Ctabid-6%2Ctabid-1%2Ctabid-28%2Ctabid-63%2Ctabid-8%2Ctabid-48%2Ctabid-96%2Ctabid-68%2Ctabid-76%2Ctabid-18%2Ctabid-13%2Ctabid-23%2Ctabid-72%2Ctabid-84%2Ctabid-92%2Ctabid-80%2Ctabid-88%2Ctabid-43)

{% tabs %}
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="6" %}

<ContentPage
...
xmlns:dataForm="clr-namespace:Syncfusion.Maui.DataForm;assembly=Syncfusion.Maui.DataForm">
<dataForm:SfDataForm x:Name="dataForm" AutoGenerateItems="False">
<dataForm:SfDataForm.Items>
<dataForm:DataFormTextItem x:Name="TextItem" ShowValidMessageLabel="false"/>
</dataForm:SfDataForm.Items>
</dataForm:SfDataForm>
</ContentPage>

{% endhighlight %}
{% highlight c# tabtitle="MainPage.xaml.cs" %}

this.dataForm.AutoGenerateItems = false;
this.TextItem.ShowErrorLabel = false;

{% endhighlight %}
{% endtabs %}

#### Customize error label text style

The error label style can be customized by changing the [ErrorLabelTextStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataForm.SfDataForm.html#Syncfusion_Maui_DataForm_SfDataForm_ErrorLabelTextStyle) property of the [SfDataForm](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataForm.SfDataForm.html).
Expand Down
37 changes: 37 additions & 0 deletions MAUI/Scheduler/agenda-view.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -308,6 +308,43 @@ this.Scheduler.AppointmentTextStyle = appointmentTextStyle;

![appointment-text-appearence-customization-in-maui-scheduler](images/agenda-view/appointment-text-appearence-customization-in-maui-scheduler.png)

## No Events text color customization
The No events text style can be customized by using the NoEventsTextStyle property of [SfScheduler](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SfScheduler.html).

{% tabs %}
{% highlight XAML hl_lines="6 7 8" %}

<scheduler:SfScheduler x:Name="scheduler"
View="Agenda"
AllowedViews="Day, Agenda">
<scheduler:SfScheduler.AgendaView>
<scheduler:SchedulerAgendaView>
<scheduler:SchedulerAgendaView.NoEventsTextStyle>
<scheduler:SchedulerTextStyle TextColor="DarkSlateGrey" FontAttributes="Italic" FontSize="15"/>
</scheduler:SchedulerAgendaView.NoEventsTextStyle>
</scheduler:SchedulerAgendaView>
</scheduler:SfScheduler.AgendaView>
</scheduler:SfScheduler>

{% endhighlight %}
{% highlight C# hl_lines="10" %}

// Customizing the No events text style in agenda view
var textStyle = new SchedulerTextStyle()
{
TextColor = Colors.DarkSlateGrey,
FontAttributes = FontAttributes.Italic,
FontSize = 15,
FontAutoScalingEnabled = true
};
// Setting the TextStyle for the NoEvets text.
this.scheduler.AgendaView.NoEventsTextStyle = textStyle;

{% endhighlight %}
{% endtabs %}

N> When there is No appointments in Current Date and [DisplayDate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SfScheduler.html#Syncfusion_Maui_Scheduler_SfScheduler_DisplayDate) of the scheduler [AgendaView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerAgendaView.html), No Events Text will appear.

## Change the appointment time format

You can customize the appointment time format of the scheduler by using the [AppointmentTimeFormat](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerAgendaView.html#Syncfusion_Maui_Scheduler_SchedulerAgendaView_AppointmentTimeFormat) property of [AgendaView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerAgendaView.html).
Expand Down
44 changes: 42 additions & 2 deletions MAUI/Segmented-Control/selection.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -268,7 +268,7 @@ N> The `Background` property of `SelectionIndicatorSettings` is applicable only
Customize the selected segment background of each segment item using the [SelectedSegmentBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSegmentItem.html#Syncfusion_Maui_Buttons_SfSegmentItem_SelectedSegmentBackground) property of [SfSegmentItem](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSegmentItem.html).

{% tabs %}
{% highlight C# tabtitle="MainPage.xaml.cs"%}
{% highlight C# tabtitle="MainPage.xaml.cs" %}

using Syncfusion.Maui.Buttons;
. . .
Expand Down Expand Up @@ -344,7 +344,7 @@ public partial class MainPage : ContentPage
Customize the selected segment text color of each segment item using the [SelectedSegmentTextColor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSegmentItem.html#Syncfusion_Maui_Buttons_SfSegmentItem_SelectedSegmentTextColor) property of [SfSegmentItem](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSegmentItem.html).

{% tabs %}
{% highlight C# tabtitle="MainPage.xaml.cs"%}
{% highlight C# tabtitle="MainPage.xaml.cs" %}

using Syncfusion.Maui.Buttons;
. . .
Expand Down Expand Up @@ -460,6 +460,46 @@ public partial class MainPage : ContentPage

![Selected segment border thickness customization in .NET MAUI Segmented control.](images/selection/border-stroke-thickness.png)

## Customizing the ripple effect animation of the segments

The ripple effect of the segments when the segment clicked can be customized by switching between true or false by using the property of [EnableRippleEffect](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ButtonBase.html#Syncfusion_Maui_Core_ButtonBase_EnableRippleEffect) in the [SfSegmentedControl](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSegmentedControl.html)

{% tabs %}
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="2" %}

<button:SfSegmentedControl x:Name="segmentedControl"
EnableRippleEffect="False">
<button:SfSegmentedControl.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>Day</x:String>
<x:String>Week</x:String>
<x:String>Month</x:String>
<x:String>Year</x:String>
</x:Array>
</button:SfSegmentedControl.ItemsSource>
</button:SfSegmentedControl>

{% endhighlight %}
{% endtabs %}

{% tabs %}
{% highlight xaml tabtitle="MainPage.xaml.cs" hl_lines="10" %}

SfSegmentedControl segmentedControl = new SfSegmentedControl();
List<SfSegmentItem> itemList = new List<SfSegmentItem>
{
new SfSegmentItem() {Text = "Day"},
new SfSegmentItem() {Text = "Week"},
new SfSegmentItem() {Text = "Month"},
new SfSegmentItem() {Text = "Year"},
};
segmentedControl.ItemsSource = itemList;
segmentedControl.EnableRippleEffect = false;
this.Content = segmentedControl;

{% endhighlight %}
{% endtabs %}

## Notifying segment selection changes
The [SelectionChanged](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSegmentedControl.html#Syncfusion_Maui_Buttons_SfSegmentedControl_SelectionChanged) event is triggered once the segment is selected in the segmented control. The [SelectionChangedEventArgs](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SelectionChangedEventArgs.html) has the following values, which provide information for the `SelectionChanged` event.

Expand Down
87 changes: 86 additions & 1 deletion MAUI/Toolbar/customization.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ The toolbar control supports customization of toolbar items using properties [Is
* **IsEnabled** : This property is used to enable or disable the toolbar item.
* **TextStyle** : This property is used to customize the text style of the toolbar item.
* **Color** : This property is used to set color for the icon in the toolbar.
* **SelectionHighlightColor** : This property is used to set the color for the selected toolbar item.

The following code sample demonstrates how to create a toolbar control with toolbar Items customization.

Expand Down Expand Up @@ -210,11 +211,95 @@ The following code sample demonstrates how to create a toolbar control with tool

![toolbar-items-customization](images/toolbaritem-customization.png)

## Selected Item Highlight Color Customization
This Property used to customize the highlight color of the selected toolbar item using the property of SelectionHighlightColor in the [SfToolbarItem](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Toolbar.SfToolbarItem.html).

{% tabs %}
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="5 9 13 21" %}

<toolbar:SfToolbar x:Name="toolbar" OverflowMode="MoreButton" WidthRequest="390">
<toolbar:SfToolbar.Items>
<toolbar:SfToolbarItem Name="Bold"
Text="Bold"
SelectionHighlightColor="LightGreen">
</toolbar:SfToolbarItem>
<toolbar:SfToolbarItem Name="Underline"
Text="Underline"
SelectionHighlightColor="LightBlue">
</toolbar:SfToolbarItem>
<toolbar:SfToolbarItem Name="Italic"
Text="Italic"
SelectionHighlightColor="Violet">
<toolbar:SfToolbarItem.Icon>
<FontImageSource Glyph="&#xE771;"
FontFamily="MauiMaterialAssets"/>
</toolbar:SfToolbarItem.Icon>
</toolbar:SfToolbarItem>
<toolbar:SfToolbarItem Name="AlignLeft"
Text="Align-Left"
SelectionHighlightColor="Yellow">
<toolbar:SfToolbarItem.Icon>
<FontImageSource Glyph="&#xE751;"
FontFamily="MauiMaterialAssets" />
</toolbar:SfToolbarItem.Icon>
</toolbar:SfToolbarItem>
<toolbar:SfToolbarItem Name="AlignRight"
ToolTipText="Align-Right"
SelectionHighlightColor="Turquoise">
<toolbar:SfToolbarItem.Icon>
<FontImageSource Glyph="&#xE753;"
FontFamily="MauiMaterialAssets" />
</toolbar:SfToolbarItem.Icon>
</toolbar:SfToolbarItem>
<toolbar:SfToolbarItem Name="AlignCenter"
ToolTipText="Align-Center"
SelectionHighlightColor="LavenderBlush">
<toolbar:SfToolbarItem.Icon>
<FontImageSource Glyph="&#xE752;"
FontFamily="MauiMaterialAssets" />
</toolbar:SfToolbarItem.Icon>
</toolbar:SfToolbarItem>
<toolbar:SfToolbarItem Name="AlignJustify"
ToolTipText="Align-Justify"
SelectionHighlightColor="Wheat">
<toolbar:SfToolbarItem.Icon>
<FontImageSource Glyph="&#xE74F;"
FontFamily="MauiMaterialAssets" />
</toolbar:SfToolbarItem.Icon>
</toolbar:SfToolbarItem>
</toolbar:SfToolbar.Items>
</toolbar:SfToolbar>

{% endhighlight %}
{% endtabs %}

{% tabs %}
{% highlight c# tabtitle="MainPage.xaml.cs" %}

SfToolbar toolbar = new SfToolbar();
toolbar.HeightRequest = 56;
SfToolbarItem toolbarItem = new SfToolbarItem
{
Name = "Bold",
Text = "Bold",
SelectionHighlightColor = Colors.Transparent,
Icon = new FontImageSource()
{
Glyph = "\uE770",
FontFamily = "MaterialAssets"

};
}
toolbar.Items.Add(toolbarItem);
this.Content = toolbar;

{% endhighlight %}
{% endtabs %}

## Separator Item Customization

The toolbar control supports customization of separator item using properties [Stroke](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Toolbar.SeparatorToolbarItem.html#Syncfusion_Maui_Toolbar_SeparatorToolbarItem_Stroke) and [StrokeThickness](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Toolbar.SeparatorToolbarItem.html#Syncfusion_Maui_Toolbar_SeparatorToolbarItem_StrokeThickness).


* **Stroke** : This property is used to customize the stroke color of the separator item.
* **StrokeThickness** : This property is used to customize the stroke thickness of the separator item.

Expand Down