Skip to content

Commit f388add

Browse files
SwethavasanthSF3977SwethavasanthSF3977
committed
Merge branch 'development' of https://github.com/syncfusion-content/maui-toolkit-docs into 943738_UGUpdate
2 parents 249cb66 + 6ed0a04 commit f388add

24 files changed

+654
-98
lines changed

‎maui-toolkit-toc.html‎

Lines changed: 40 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,16 @@
1616
</ul>
1717
</li>
1818
<li><a href="/maui-toolkit/Migration">Migrate from Syncfusion .NET MAUI</a></li>
19-
19+
<li>
20+
SfAccordion
21+
<ul>
22+
<li><a href="/maui-toolkit/Accordion/overview">Overview</a></li>
23+
<li><a href="/maui-toolkit/Accordion/getting-started">Getting Started</a></li>
24+
<li><a href="/maui-toolkit/Accordion/appearance">Appearance</a></li>
25+
<li><a href="/maui-toolkit/Accordion/bindablelayout">BindableLayout</a></li>
26+
<li><a href="/maui-toolkit/Accordion/events">Events</a></li>
27+
</ul>
28+
</li>
2029
<li>
2130
SfBottomSheet
2231
<ul>
@@ -53,6 +62,7 @@
5362
<li><a href="/maui-toolkit/Calendar/getting-started">Getting Started</a></li>
5463
<li><a href="/maui-toolkit/Calendar/views">Views</a></li>
5564
<li><a href="/maui-toolkit/Calendar/selections">Selections</a></li>
65+
<li><a href="/maui-toolkit/Calendar/calendar-mode">Calendar Mode</a></li>
5666
<li><a href="/maui-toolkit/Calendar/calendar-identifier">Calendar Identifier</a></li>
5767
<li><a href="/maui-toolkit/Calendar/date-navigation">Date Navigation</a></li>
5868
<li><a href="/maui-toolkit/Calendar/date-restrictions">Date Restrictions</a></li>
@@ -125,7 +135,8 @@
125135
<li><a href="/maui-toolkit/cartesian-charts/stackedarea">Stacked Area Chart</a></li>
126136
<li><a href="/maui-toolkit/cartesian-charts/stackedarea100">Stacked Area 100 Chart</a></li>
127137
<li><a href="/maui-toolkit/cartesian-charts/bubble">Bubble Chart</a></li>
128-
<li><a href="/maui-toolkit/cartesian-charts/scatter">Scatter Chart</a></li>
138+
<li><a href="/maui-toolkit/cartesian-charts/scatter">Scatter Chart</a></li>
139+
<li><a href="/maui-toolkit/cartesian-charts/fastscatter">Fast Scatter Chart</a></li>
129140
<li><a href="/maui-toolkit/cartesian-charts/range-column">Range Column Chart</a></li>
130141
<li><a href="/maui-toolkit/cartesian-charts/stackedcolumn">Stacked Column Chart</a></li>
131142
<li><a href="/maui-toolkit/cartesian-charts/stackedcolumn100">Stacked Column 100 Chart</a></li>
@@ -137,6 +148,7 @@
137148
<li><a href="/maui-toolkit/cartesian-charts/histogram">Histogram Chart</a></li>
138149
</ul>
139150
</li>
151+
<li><a href="/maui-toolkit/cartesian-charts/emptypoints">Empty Points</a></li>
140152
<li><a href="/maui-toolkit/cartesian-charts/Appearance">Appearance</a></li>
141153
<li><a href="/maui-toolkit/cartesian-charts/plotband">Plot Band</a></li>
142154
<li><a href="/maui-toolkit/cartesian-charts/annotation">Annotation</a></li>
@@ -219,6 +231,14 @@
219231
<li><a href="/maui-toolkit/Effects-View/Events">Events</a></li>
220232
</ul>
221233
</li>
234+
<li>
235+
SfExpander
236+
<ul>
237+
<li><a href="/maui-toolkit/Expander/overview">Overview</a></li>
238+
<li><a href="/maui-toolkit/Expander/getting-started">Getting Started</a></li>
239+
<li><a href="/maui-toolkit/Expander/appearance">Appearance</a></li>
240+
</ul>
241+
</li>
222242
<li>
223243
SfFunnelChart
224244
<ul>
@@ -314,6 +334,23 @@
314334
<li><a href="/maui-toolkit/polar-charts/Exporting">Exporting</a></li>
315335
</ul>
316336
</li>
337+
<li>
338+
SfPopup
339+
<ul>
340+
<li><a href="/maui-toolkit/Popup/overview">Overview</a></li>
341+
<li><a href="/maui-toolkit/Popup/getting-started">Getting Started</a></li>
342+
<li><a href="/maui-toolkit/Popup/popup-positioning">Popup Positioning</a></li>
343+
<li><a href="/maui-toolkit/Popup/popup-size">Popup Size</a></li>
344+
<li><a href="/maui-toolkit/Popup/layout-customizations">Layout Customizations</a></li>
345+
<li><a href="/maui-toolkit/Popup/styles">Styles</a></li>
346+
<li><a href="/maui-toolkit/Popup/popup-animations">Popup Animations</a></li>
347+
<li><a href="/maui-toolkit/Popup/modal-window">Modal Window</a></li>
348+
<li><a href="/maui-toolkit/Popup/Popup-Events">Events and Commands</a></li>
349+
<li><a href="/maui-toolkit/Popup/working-with-mvvm">Working with MVVM</a></li>
350+
<li><a href="/maui-toolkit/Popup/localization">Localization</a></li>
351+
</ul>
352+
</li>
353+
317354
<li>
318355
SfPullToRefresh
319356
<ul>
@@ -398,6 +435,7 @@
398435
<li>
399436
Release Notes
400437
<ul>
438+
<li><a href="/maui-toolkit/release-notes/v1.0.4">v1.0.4</a></li>
401439
<li><a href="/maui-toolkit/release-notes/v1.0.3">v1.0.3</a></li>
402440
<li><a href="/maui-toolkit/release-notes/v1.0.2">v1.0.2</a></li>
403441
<li><a href="/maui-toolkit/release-notes/v1.0.1">v1.0.1</a></li>

‎maui-toolkit/Calendar/calendar-mode.md‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
---
2+
layout: post
3+
title: Calendar Modes in MAUI Calendar Control | Syncfusion<sup>&reg;</sup>
4+
description: Learn about the calendar modes in Syncfusion<sup>&reg;</sup> Calendar for .NET MAUI (SfCalendar) control and its basic features.
5+
platform: maui
6+
control: SfCalendar
7+
documentation: ug
8+
---
9+
10+
# Calendar mode in .NET MAUI Calendar (SfCalendar)
11+
12+
The Calendar mode is specified in the calendar property enumeration, which is used to display the calendar based on the modes. It offers three modes: [Default](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Calendar.CalendarMode.html#Syncfusion_Maui_Toolkit_Calendar_CalendarMode_Default), [Dialog](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Calendar.CalendarMode.html#Syncfusion_Maui_Toolkit_Calendar_CalendarMode_Dialog), and [RelativeDialog](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Calendar.CalendarMode.html#Syncfusion_Maui_Toolkit_Calendar_CalendarMode_RelativeDialog). The default calendar mode in the [SfCalendar](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Calendar.SfCalendar.html) is [Default](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Calendar.CalendarMode.html#Syncfusion_Maui_Toolkit_Calendar_CalendarMode_Default).
13+
14+
## Dialog Mode
15+
16+
The dialog mode is used to display the calendar in a pop-up by setting the [Mode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Calendar.SfCalendar.html#Syncfusion_Maui_Toolkit_Calendar_SfCalendar_Mode) property to [Dialog](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Calendar.CalendarMode.html#Syncfusion_Maui_Toolkit_Calendar_CalendarMode_Dialog) in [SfCalendar](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Calendar.SfCalendar.html).
17+
18+
{% tabs %}
19+
20+
{% highlight xaml tabtitle="XAML" hl_lines="2" %}
21+
22+
<calendar:SfCalendar x:Name="calendar"
23+
Mode="Dialog"/>
24+
25+
{% endhighlight %}
26+
27+
{% highlight c# tabtitle="C#" hl_lines="3" %}
28+
29+
SfCalendar calendar = new SfCalendar()
30+
{
31+
Mode = CalendarMode.Dialog
32+
};
33+
34+
this.Content = calendar;
35+
36+
{% endhighlight %}
37+
38+
{% endtabs %}
39+
40+
The Calendar can be opened programmatically by setting the [IsOpen](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Calendar.SfCalendar.html#Syncfusion_Maui_Toolkit_Calendar_SfCalendar_IsOpen) property to `true` of [SfCalendar](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Calendar.SfCalendar.html). By default, the [IsOpen](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Calendar.SfCalendar.html#Syncfusion_Maui_Toolkit_Calendar_SfCalendar_IsOpen) property is `false`.
41+
42+
N> This property is automatically changed to `false` when you close the dialog by clicking outside of it.
43+
44+
{% tabs %}
45+
46+
{% highlight xaml tabtitle="MainPage.xaml" %}
47+
48+
<Grid>
49+
<calendar:SfCalendar x:Name="calendar"
50+
Mode="Dialog"/>
51+
<Button Text="Open Calendar"
52+
x:Name="calendarButton"
53+
Clicked="Button_Clicked"
54+
HorizontalOptions="Center"
55+
VerticalOptions="Center"
56+
HeightRequest="50"
57+
WidthRequest="150">
58+
</Button>
59+
</Grid>
60+
61+
{% endhighlight %}
62+
63+
{% highlight c# tabtitle="MainPage.xaml.cs" %}
64+
65+
private void Button_Clicked(object sender, System.EventArgs e)
66+
{
67+
this.calendar.IsOpen = true;
68+
}
69+
70+
{% endhighlight %}
71+
72+
{% endtabs %}
73+
74+
![Dialog mode in .NET MAUI Calendar.](images/calendar-mode/calendar_popup.gif)
75+
76+
77+
## Relative Dialog Mode
78+
79+
The relative dialog mode displays the calendar in a pop-up by setting the [Mode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Calendar.SfCalendar.html#Syncfusion_Maui_Toolkit_Calendar_SfCalendar_Mode) property to [RelativeDialog](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Calendar.CalendarMode.html#Syncfusion_Maui_Toolkit_Calendar_CalendarMode_RelativeDialog). It is used to align the calendar in a specific position. You can set the position by using the [RelativePosition](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Calendar.SfCalendar.html#Syncfusion_Maui_Toolkit_Calendar_SfCalendar_RelativePosition) property in the [SfCalendar](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Calendar.SfCalendar.html).
80+
81+
### Relative position
82+
83+
The [RelativePosition](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Calendar.SfCalendar.html#Syncfusion_Maui_Toolkit_Calendar_SfCalendar_RelativePosition) is specified in the calendar property enumeration, which is used to align the calendar in a specific position. It provides eight positions such as [AlignTop](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Calendar.CalendarRelativePosition.html#Syncfusion_Maui_Toolkit_Calendar_CalendarRelativePosition_AlignTop), [AlignToLeftOf](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Calendar.CalendarRelativePosition.html#Syncfusion_Maui_Toolkit_Calendar_CalendarRelativePosition_AlignToLeftOf), [AlignToRightOf](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Calendar.CalendarRelativePosition.html#Syncfusion_Maui_Toolkit_Calendar_CalendarRelativePosition_AlignToRightOf), [AlignBottom](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Calendar.CalendarRelativePosition.html#Syncfusion_Maui_Toolkit_Calendar_CalendarRelativePosition_AlignBottom), [AlignTopLeft](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Calendar.CalendarRelativePosition.html#Syncfusion_Maui_Toolkit_Calendar_CalendarRelativePosition_AlignTopLeft), [AlignTopRight](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Calendar.CalendarRelativePosition.html#Syncfusion_Maui_Toolkit_Calendar_CalendarRelativePosition_AlignTopRight), [AlignBottomLeft](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Calendar.CalendarRelativePosition.html#Syncfusion_Maui_Toolkit_Calendar_CalendarRelativePosition_AlignBottomLeft), and [AlignBottomRight](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Calendar.CalendarRelativePosition.html#Syncfusion_Maui_Toolkit_Calendar_CalendarRelativePosition_AlignBottomRight). The default relative position in the [SfCalendar](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Calendar.SfCalendar.html) is [AlignTop](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Calendar.CalendarRelativePosition.html#Syncfusion_Maui_Toolkit_Calendar_CalendarRelativePosition_AlignTop).
84+
85+
The Calendar can be opened programmatically by setting the [IsOpen](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Calendar.SfCalendar.html#Syncfusion_Maui_Toolkit_Calendar_SfCalendar_IsOpen) property to `true` of [SfCalendar](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Calendar.SfCalendar.html). By default, the [IsOpen](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Calendar.SfCalendar.html#Syncfusion_Maui_Toolkit_Calendar_SfCalendar_IsOpen) property is `false`.
86+
87+
N> This property is automatically changed to `false` when you close the dialog by clicking outside of it.
88+
89+
{% tabs %}
90+
91+
{% highlight xaml tabtitle="MainPage.xaml" %}
92+
93+
<Grid>
94+
<calendar:SfCalendar x:Name="calendar"
95+
Mode="RelativeDialog"
96+
RelativePosition="AlignTopLeft">
97+
</calendar:SfCalendar>
98+
<Button Text="Open calendar"
99+
x:Name="calendarButton"
100+
Clicked="Button_Clicked"
101+
HorizontalOptions="Center"
102+
VerticalOptions="Center"
103+
HeightRequest="50"
104+
WidthRequest="150">
105+
</Button>
106+
</Grid>
107+
108+
{% endhighlight %}
109+
110+
{% highlight c# tabtitle="MainPage.xaml.cs" %}
111+
112+
private void Button_Clicked(object sender, System.EventArgs e)
113+
{
114+
this.calendar.IsOpen = true;
115+
}
116+
117+
{% endhighlight %}
118+
119+
{% endtabs %}

‎maui-toolkit/Calendar/images/calendar-mode/calendar_popup.gif‎

78.6 KB
Loading

0 commit comments

Comments
 (0)