Few days ago I got a requirement to show calendar for ticket booking app in windows but there is no default control to show calendar in windows phone. So i need to create custom control to achieve this task and also love to share it with you. Let’s start your Visual Studio, create a new Windows Phone app and paste these code snippets in you Xaml page.

  1. <StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="10,154,14,186">
  2. <StackPanel HorizontalAlignment="Center" Background="#FF575757">
  3. <StackPanel>
  4. <Grid>
  5. <Button Content="-" BorderBrush="{x:Null}" HorizontalAlignment="Left" Click="previousMonth" />
  6. <TextBlock Name="CalendarHeader" Text="October 2015" VerticalAlignment="Center" HorizontalAlignment="Center" FontWeight="ExtraLight" FontSize="26" />
  7. <Button Content="+" BorderBrush="{x:Null}" HorizontalAlignment="Right" Click="nextMonth" /> </Grid>
  8. </StackPanel>
  9. <StackPanel Orientation="Horizontal">
  10. <Grid Width="50" Height="50" Background="#FF363636">
  11. <TextBlock Text="S" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid>
  12. <Grid Width="50" Height="50" Background="#FF363636">
  13. <TextBlock Text="M" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid>
  14. <Grid Width="50" Height="50" Background="#FF363636">
  15. <TextBlock Text="T" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid>
  16. <Grid Width="50" Height="50" Background="#FF363636">
  17. <TextBlock Text="W" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid>
  18. <Grid Width="50" Height="50" Background="#FF363636">
  19. <TextBlock Text="T" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid>
  20. <Grid Width="50" Height="50" Background="#FF363636">
  21. <TextBlock Text="F" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid>
  22. <Grid Width="50" Height="50" Background="#FF363636">
  23. <TextBlock Text="S" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid>
  24. </StackPanel>
  25. <StackPanel Name="Calendar" Margin="0, 0, 0, 5">
  26. <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
  27. <Grid Width="50" Height="30">
  28. <TextBlock Text="" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid>
  29. <Grid Width="50" Height="30">
  30. <TextBlock Text="" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid>
  31. <Grid Width="50" Height="30">
  32. <TextBlock Text="" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid>
  33. <Grid Width="50" Height="30">
  34. <TextBlock Text="" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid>
  35. <Grid Width="50" Height="30">
  36. <TextBlock Text="" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid>
  37. <Grid Width="50" Height="30">
  38. <TextBlock Text="" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid>
  39. <Grid Width="50" Height="30">
  40. <TextBlock Text="" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid>
  41. </StackPanel>
  42. <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
  43. <Grid Width="50" Height="30">
  44. <TextBlock Text="" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid>
  45. <Grid Width="50" Height="30">
  46. <TextBlock Text="" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid>
  47. <Grid Width="50" Height="30">
  48. <TextBlock Text="" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid>
  49. <Grid Width="50" Height="30">
  50. <TextBlock Text="" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid>
  51. <Grid Width="50" Height="30">
  52. <TextBlock Text="" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid>
  53. <Grid Width="50" Height="30">
  54. <TextBlock Text="" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid>
  55. <Grid Width="50" Height="30">
  56. <TextBlock Text="" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid>
  57. </StackPanel>
  58. <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
  59. <Grid Width="50" Height="30">
  60. <TextBlock Text="" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid>
  61. <Grid Width="50" Height="30">
  62. <TextBlock Text="" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid>
  63. <Grid Width="50" Height="30">
  64. <TextBlock Text="" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid>
  65. <Grid Width="50" Height="30">
  66. <TextBlock Text="" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid>
  67. <Grid Width="50" Height="30">
  68. <TextBlock Text="" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid>
  69. <Grid Width="50" Height="30">
  70. <TextBlock Text="" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid>
  71. <Grid Width="50" Height="30">
  72. <TextBlock Text="" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid>
  73. </StackPanel>
  74. <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
  75. <Grid Width="50" Height="30">
  76. <TextBlock Text="" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid>
  77. <Grid Width="50" Height="30">
  78. <TextBlock Text="" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid>
  79. <Grid Width="50" Height="30">
  80. <TextBlock Text="" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid>
  81. <Grid Width="50" Height="30">
  82. <TextBlock Text="" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid>
  83. <Grid Width="50" Height="30">
  84. <TextBlock Text="" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid>
  85. <Grid Width="50" Height="30">
  86. <TextBlock Text="" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid>
  87. <Grid Width="50" Height="30">
  88. <TextBlock Text="" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid>
  89. </StackPanel>
  90. <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
  91. <Grid Width="50" Height="30">
  92. <TextBlock Text="" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid>
  93. <Grid Width="50" Height="30">
  94. <TextBlock Text="" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid>
  95. <Grid Width="50" Height="30">
  96. <TextBlock Text="" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid>
  97. <Grid Width="50" Height="30">
  98. <TextBlock Text="" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid>
  99. <Grid Width="50" Height="30">
  100. <TextBlock Text="" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid>
  101. <Grid Width="50" Height="30">
  102. <TextBlock Text="" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid>
  103. <Grid Width="50" Height="30">
  104. <TextBlock Text="" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid>
  105. </StackPanel>
  106. <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
  107. <Grid Width="50" Height="30">
  108. <TextBlock Text="" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid>
  109. <Grid Width="50" Height="30">
  110. <TextBlock Text="" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid>
  111. <Grid Width="50" Height="30">
  112. <TextBlock Text="" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid>
  113. <Grid Width="50" Height="30">
  114. <TextBlock Text="" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid>
  115. <Grid Width="50" Height="30">
  116. <TextBlock Text="" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid>
  117. <Grid Width="50" Height="30">
  118. <TextBlock Text="" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid>
  119. <Grid Width="50" Height="30">
  120. <TextBlock Text="" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid>
  121. </StackPanel>
  122. </StackPanel>
  123. </StackPanel>
  124. </StackPanel>
Now paste the C# code to show the monthly calendar like below.

C# code
  1. using System;
  2. using System.Collections.Generic;
  3. using System.IO;
  4. using System.Linq;
  5. using System.Runtime.InteropServices.WindowsRuntime;
  6. using Windows.Foundation;
  7. using Windows.Foundation.Collections;
  8. using Windows.UI.Xaml;
  9. using Windows.UI.Xaml.Controls;
  10. using Windows.UI.Xaml.Controls.Primitives;
  11. using Windows.UI.Xaml.Data;
  12. using Windows.UI.Xaml.Input;
  13. using Windows.UI.Xaml.Media;
  14. using Windows.UI.Xaml.Navigation;
  15. // The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=391641
  16. namespace CalendarDemo
  17. {
  18. /// <summary>
  19. /// An empty page that can be used on its own or navigated to within a Frame.
  20. /// </summary>
  21. public sealed partial class MainPage: Page
  22. {
  23. DateTime calendarDate;
  24. public MainPage()
  25. {
  26. this.InitializeComponent();
  27. calendarDate = DateTime.Today;
  28. this.NavigationCacheMode = NavigationCacheMode.Required;
  29. }
  30. /// <summary>
  31. /// Invoked when this page is about to be displayed in a Frame.
  32. /// </summary>
  33. /// <param name="e">Event data that describes how this page was reached.
  34. /// This parameter is typically used to configure the page.</param>
  35. protected override void OnNavigatedTo(NavigationEventArgs e)
  36. {
  37. UpdateCalendar(calendarDate);
  38. }
  39. public void UpdateCalendar(DateTime objdate)
  40. {
  41. CalendarHeader.Text = objdate.ToString("MMMM yyyy");
  42. objdate = new DateTime(objdate.Year, objdate.Month, 1);
  43. int dayOfWeek = (int) objdate.DayOfWeek + 1;
  44. int daysOfMonth = DateTime.DaysInMonth(objdate.Year, objdate.Month);
  45. int i = 1;
  46. foreach(var o1 in Calendar.Children)
  47. {
  48. foreach(var o2 in (o1 as StackPanel).Children)
  49. {
  50. var o3 = (o2 as Grid).Children[0] as TextBlock;
  51. if (i >= dayOfWeek && i < (daysOfMonth + dayOfWeek))
  52. {
  53. o3.Text = (i - dayOfWeek + 1).ToString();
  54. }
  55. else
  56. {
  57. o3.Text = "";
  58. }
  59. i++;
  60. }
  61. }
  62. }
  63. private void previousMonth(object sender, RoutedEventArgs e)
  64. {
  65. calendarDate = calendarDate.AddMonths(-1);
  66. UpdateCalendar(calendarDate);
  67. }
  68. private void nextMonth(object sender, RoutedEventArgs e)
  69. {
  70. calendarDate = calendarDate.AddMonths(1);
  71. UpdateCalendar(calendarDate);
  72. }
  73. }
  74. }
The calendar is linked to a Universal DateTime object which is used to track the actual Month/ Year, I used to make it Universal and in this way it will make it easier to switch to the next or previous month. It looks simpler just like this.

Now run the app and show the output as in the following screenshot:

calendar