Skip to content

Commit 7ee38bc

Browse files
Sathish-087Sathish-087
committed
Added calendar popup SB
1 parent 32e6f48 commit 7ee38bc

File tree

6 files changed

+917
-7
lines changed

6 files changed

+917
-7
lines changed

‎maui/samples/Gallery/SampleList/CalendarSamplesList.xml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
<Sample Title="Selection" SampleName="DateSelection"/>
1818
<Sample Title="Calendar Identifier" SampleName="CalendarIdentifier"/>
1919
<Sample Title="Appointment Booking" SampleName="AppointmentBooking"/>
20+
<Sample Title ="Flight Booking" SampleName="FlightBooking"/>
2021
<Sample Title="Color Scheme" SampleName="HighlightDates" />
2122
<Sample Title="Customization" SampleName="AppearanceCustomization" />
2223
</Control>

‎maui/samples/Gallery/Samples/Calendar/AppointmentBooking/View/AppointmentBooking.xaml

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
33
x:Class="Syncfusion.Maui.ControlsGallery.Calendar.Calendar.AppointmentBooking"
44
xmlns:calendar="clr-namespace:Syncfusion.Maui.Toolkit.Calendar;assembly=Syncfusion.Maui.Toolkit"
5+
xmlns:popUp="clr-namespace:Syncfusion.Maui.Toolkit.Popup;assembly=Syncfusion.Maui.Toolkit"
56
xmlns:buttons="clr-namespace:Syncfusion.Maui.Toolkit.Buttons;assembly=Syncfusion.Maui.Toolkit"
67
xmlns:localCore="clr-namespace:Syncfusion.Maui.ControlsGallery;assembly=Syncfusion.Maui.ControlsGallery" BackgroundColor="{AppThemeBinding Light={StaticResource BackgroundLight}, Dark={StaticResource BackgroundDark}}" Margin="-4,-4,-6,-6">
78

@@ -255,8 +256,13 @@
255256
</FlexLayout>
256257
</Grid>
257258
<Grid Grid.Row="3" HorizontalOptions="Center" Padding="0,0,0,30">
258-
<Button Text="Book Appointment" HorizontalOptions="Center" Clicked="AppointmentanBooking" VerticalOptions="End" WidthRequest="150" HeightRequest="50" CornerRadius="20"/>
259-
</Grid>
259+
<Button Text="Book Appointment" HorizontalOptions="Center" Clicked="AppointmentanBooking" VerticalOptions="End" WidthRequest="150" HeightRequest="50" CornerRadius="20"/>
260+
<popUp:SfPopup Grid.Row="0" Grid.RowSpan="3" IsVisible="false" x:Name="popUp" FooterHeight="70" ShowHeader="True" HeaderHeight="65" ShowFooter="True" HeightRequest="200">
261+
<popUp:SfPopup.PopupStyle>
262+
<popUp:PopupStyle CornerRadius="15" MessageFontSize="15" HeaderFontSize="17" HeaderFontAttribute="Bold" />
263+
</popUp:SfPopup.PopupStyle>
264+
</popUp:SfPopup>
265+
</Grid>
260266
</Grid>
261267
</Grid>
262268
</localCore:SampleView>

‎maui/samples/Gallery/Samples/Calendar/AppointmentBooking/View/AppointmentBooking.xaml.cs

Lines changed: 146 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
using System.Globalization;
22
using Syncfusion.Maui.Toolkit.Calendar;
33
using Syncfusion.Maui.Toolkit.Buttons;
4+
using Syncfusion.Maui.Toolkit.Popup;
45
using Color = Microsoft.Maui.Graphics.Color;
56

67
namespace Syncfusion.Maui.ControlsGallery.Calendar.Calendar
@@ -27,6 +28,13 @@ public partial class AppointmentBooking : SampleView
2728
public AppointmentBooking()
2829
{
2930
InitializeComponent();
31+
32+
if (popUp != null)
33+
{
34+
popUp.FooterTemplate = GetFooterTemplate(popUp);
35+
popUp.ContentTemplate = GetContentTemplate(popUp);
36+
}
37+
3038
#if MACCATALYST
3139
border.IsVisible = true;
3240
border.Stroke = Colors.Transparent;
@@ -49,6 +57,128 @@ public AppointmentBooking()
4957
#endif
5058
}
5159

60+
/// <summary>
61+
/// Method to get the dynamic color.
62+
/// </summary>
63+
/// <param name="resourceName">The resource name.</param>
64+
/// <returns>The color.</returns>
65+
Color GetDynamicColor(string? resourceName = null)
66+
{
67+
if (resourceName != null && App.Current != null && App.Current.Resources.TryGetValue(resourceName, out var colorValue) && colorValue is Color color)
68+
{
69+
return color;
70+
}
71+
else
72+
{
73+
if (App.Current != null && App.Current.RequestedTheme == AppTheme.Light)
74+
{
75+
return Color.FromRgb(0xFF, 0xFF, 0xFF);
76+
}
77+
else if (App.Current != null && App.Current.RequestedTheme == AppTheme.Dark)
78+
{
79+
return Color.FromRgb(0x38, 0x1E, 0x72);
80+
}
81+
}
82+
83+
return Colors.Transparent;
84+
}
85+
86+
/// <summary>
87+
/// Method to get the Ok button style.
88+
/// </summary>
89+
/// <returns>The button style.</returns>
90+
Style GetOkButtonStyle()
91+
{
92+
return new Style(typeof(Button))
93+
{
94+
Setters =
95+
{
96+
new Setter { Property = Button.CornerRadiusProperty, Value = 15 },
97+
new Setter { Property = Button.BorderColorProperty, Value = Color.FromArgb("#6750A4") },
98+
new Setter { Property = Button.BorderWidthProperty, Value = 1 },
99+
new Setter { Property = Button.BackgroundColorProperty, Value = GetDynamicColor("SfCalendarTodayHighlightColor") },
100+
new Setter { Property = Button.TextColorProperty, Value = GetDynamicColor() },
101+
new Setter { Property = Button.FontSizeProperty, Value = 14 },
102+
}
103+
};
104+
}
105+
106+
/// <summary>
107+
/// Method to get the footer template.
108+
/// </summary>
109+
/// <param name="popup">The pop up.</param>
110+
/// <returns>The data template.</returns>
111+
DataTemplate GetFooterTemplate(SfPopup popup)
112+
{
113+
var footerTemplate = new DataTemplate(() =>
114+
{
115+
var grid = new Grid
116+
{
117+
ColumnSpacing = 12,
118+
Padding = new Thickness(24)
119+
};
120+
grid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Star });
121+
grid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Star });
122+
var oKButton = new Button
123+
{
124+
Text = "OK",
125+
Style = GetOkButtonStyle(),
126+
WidthRequest = 96,
127+
HeightRequest = 40
128+
};
129+
oKButton.Clicked += (sender, args) =>
130+
{
131+
popup.Dismiss();
132+
};
133+
grid.Children.Add(oKButton);
134+
Grid.SetColumn(oKButton, 1);
135+
return grid;
136+
});
137+
138+
return footerTemplate;
139+
}
140+
141+
/// <summary>
142+
/// Method to get the content template.
143+
/// </summary>
144+
/// <param name="popup">The pop up.</param>
145+
/// <returns>The data template.</returns>
146+
DataTemplate GetContentTemplate(SfPopup popup)
147+
{
148+
var contentTemplate = new DataTemplate(() =>
149+
{
150+
var grid = new Grid();
151+
grid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Star });
152+
grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(0.1, GridUnitType.Star) });
153+
var label = new Label
154+
{
155+
LineBreakMode = LineBreakMode.WordWrap,
156+
Padding = new Thickness(20, 0, 0, 0),
157+
FontSize = 16,
158+
HorizontalOptions = LayoutOptions.Start,
159+
HorizontalTextAlignment = TextAlignment.Start,
160+
WidthRequest = 300,
161+
};
162+
163+
label.BindingContext = popup;
164+
label.SetBinding(Label.TextProperty, "Message");
165+
var stackLayout = new StackLayout
166+
{
167+
Margin = new Thickness(0, 2, 0, 0),
168+
HeightRequest = 1,
169+
};
170+
171+
stackLayout.BackgroundColor = _isLightTheme ? Color.FromArgb("#611c1b1f") : Color.FromArgb("#61e6e1e5");
172+
grid.Children.Add(label);
173+
grid.Children.Add(stackLayout);
174+
Grid.SetRow(label, 0);
175+
Grid.SetRow(stackLayout, 1);
176+
return grid;
177+
});
178+
179+
return contentTemplate;
180+
}
181+
52182
/// <summary>
53183
/// Initialize the calendar.
54184
/// </summary>
@@ -135,6 +265,8 @@ void AppointmentanBooking(object sender, EventArgs e)
135265
BookAppointment(mobileAppointmentBooking, mobileFlexLayout);
136266
}
137267
#endif
268+
269+
popUp.Show();
138270
}
139271

140272
/// <summary>
@@ -144,22 +276,29 @@ void AppointmentanBooking(object sender, EventArgs e)
144276
/// <param name="buttonLayout">Time slot button layout.</param>
145277
void BookAppointment(SfCalendar calendar, FlexLayout buttonLayout)
146278
{
279+
if (popUp == null)
280+
{
281+
return;
282+
}
283+
147284
if (calendar.SelectedDate == null)
148285
{
149-
Application.Current?.Windows[0].Page?.DisplayAlert("Alert !", "Please select a date to book an appointment ", "Ok");
286+
popUp.HeaderTitle = "Alert !";
287+
popUp.Message = "Please select a date to book an appointment";
150288
return;
151289
}
152290

153291
if (_timeSlot == string.Empty)
154292
{
155-
Application.Current?.Windows[0].Page?.DisplayAlert("Alert !", "Please select a time to book an appointment ", "Ok");
293+
popUp.HeaderTitle = "Alert !";
294+
popUp.Message = "Please select a time to book an appointment";
156295
return;
157296
}
158297

298+
popUp.HeaderTitle = "Confirmation";
159299
DateTime dateTime = calendar.SelectedDate.Value;
160300
string dayText = dateTime.ToString("MMMM" + " " + dateTime.Day.ToString() + ", " + dateTime.ToString("yyyy"), CultureInfo.CurrentUICulture);
161-
string text = "Appointment booked for " + dayText + " " + _timeSlot;
162-
Application.Current?.Windows[0].Page?.DisplayAlert("Confirmation", text, "Ok");
301+
popUp.Message = "Appointment booked for " + dayText + " " + _timeSlot;
163302
calendar.SelectedDate = DateTime.Now.Date;
164303
calendar.DisplayDate = DateTime.Now.Date;
165304
_timeSlot = string.Empty;
@@ -203,7 +342,9 @@ void UpdateTimeSlotSelection(SfCalendar calendar, SfButton selectedButton, FlexL
203342
{
204343
if (calendar.SelectedDate == null)
205344
{
206-
Application.Current?.Windows[0].Page?.DisplayAlert("Alert !", "Please select a date to book an appointment ", "Ok");
345+
popUp.HeaderTitle = "Alert !";
346+
popUp.Message = "Please select a date to book an appointment ";
347+
popUp.Show();
207348
return;
208349
}
209350

0 commit comments

Comments
 (0)