Windows 10 #UWP Apps: Now Calendar Controls are available for Phone, beginners tutorials (C#-XAML)

Introduction:
In prev post i was explained about how to use TimePicker & DatePicker controls in WinRT windows phone 8.1.But the DatePicker is optimized for picking a known date, such as a date of birth, where the context of the calendar is not important. Fortunately from Windows 10 OS(version 10.0.10240.0) Microsoft introduce CalendarView & CalendarDatePicker controls, so these controls can gives you a standardized way to let users view and interact with a calendar. 

Requirements:

• This article is targeted for windows 10 Universal Windows Platform(Version 1511) , so make sure you’ve downloaded and installed the latest Windows 10 SDK from here.
• We no longer need a developer license with Windows 10. But we must Enable Developer Mode to your device for development.
• This post assumes you’re using Microsoft Visual Studio 2015 or Later.
• This article is developed on windows 8.1 machine. So Visual Studio settings may differ from windows 10 OS VS.

Note: Windows 10 SDK works best on the Windows 10 operating system. And it is also supported on: Windows 8.1, Windows 8, Windows 7, Windows Server 2012, Windows Server 2008 R2, but not all tools are supported on these operating systems.

Description:
This article can explain you about below topics
1. How to create new project in Windows 10?
2. How to use CalendarView control in Windows 10?
3. How to use CalendarDatePicker control in Windows 10?
4. How to run Windows 10 UWP app in emulator?

1. How to create new project in Windows 10?
Before to use calendar controls, first we need to create new project. 

• Launch Visual Studio 2015
• On the File menu, select New > Project.
• The New Project dialog appears. The left pane of the dialog lets you select the type of templates to display.In the left pane, expand Installed > Templates > Visual C# > Windows, then pick the Universal template group. The dialog's center pane displays a list of project templates for Universal Windows Platform (UWP) apps.
• In the center pane, select the Blank App (Universal Windows) template.The Blank App template creates a minimal UWP app that compiles and runs, but contains no user-interface controls or data. You add controls to the app over the course of this tutorial.In the Name text box, type "UWPCalenderControl".Click OK to create the project.

Visual Studio creates your project and displays it in the Solution Explorer.

2. How to use CalendarView control in Windows 10?
Now its time to use calendar controls and from windows 10 OS we have an in-built class called CalendarView, which can provide a standardized way to let users view and interact with a calendar. If you need to let a user select multiple dates, you must use a CalendarView.
Okay now lets start to use CalendarView in our MainPage.xaml like below:

1. <CalendarView x:Name="MyCalendarView DisplayMode="Month" SelectionMode="Multiple" CalendarItemBackground="LightBlue" BorderBrush="Orange" BorderThickness="3"/>  

In above code 
SelectionMode property is set to Multiple to let a user select multiple dates. DisplayMode property is useful to set calendar startup view and it is having three values(Month,Year,Decade). By default, it starts with the month view open.

So when users click the header in the month view to open the year view, and click the header in the year view to open the decade view. Users pick a year in the decade view to return to the year view, and pick a month in the year view to return to the month view. The two arrows to the side of the header navigate forward or backward by month, by year, or by decade.
And in C# code we can also set selected date, MinDate & MaxDate like below:

1. MyCalendarView.SelectedDates.Add(new DateTime(2016, 3, 11));// Set selected date is March 3rd 2016);  
2. MyCalendarView.MinDate = new DateTime(2016, 2, 28);//Min date is FEB 28th 2016  
3. MyCalendarView.MaxDate = DateTime.Now.AddMonths(3); //Max date is 3 months from current date
4. MyCalendarView.NumberOfWeeksInView = 6;//Month view show 6 weeks at a time  

3. How to use CalendarDatePicker control in Windows 10?

The CalendarView gives you a standardized way to let users view and interact with a calendar. If you need to let a user select multiple dates, you must use a CalendarView. If you need to let a user pick only a single date and don’t need a calendar to be always visible, consider using a CalendarDatePicker or DatePicker control.  So CalendarDatePicker can represents a control that allows a user to pick a date from a calendar display.

Okay now lets start to use CalendarDatePicker in our MainPage.xaml like below:

1. <CalendarDatePicker x:Name="MyCalendarDatePicker"/>  

But we can also add more below properties to CalendarDatePicker

• customize Header
• PlaceholderText
• We can also set DateFormat
• DisplayMode of calendar(Month, Year, Decade)

1. <CalendarDatePicker x:Name="MyCalendarDatePicker" Grid.Row="0" DisplayMode="Month" IsCalendarOpen="True" DateChanged="MyCalendarDatePicker_DateChanged" DateFormat = "{}{dayofweek.full}‎, ‎{month.full}‎ ‎{day.integer}‎, ‎{year.full}" PlaceholderText="Choose your date">  
2.                 <!--Customising CalendarDatePicker HeaderTemplate -->  
3.                 <CalendarDatePicker.HeaderTemplate>  
4.                     <DataTemplate>  
5.                         <TextBlock FontSize="18" FontWeight="Bold" Foreground="Green">  
6.                             <Underline>  
7.                                 Windows 10 Calendar control  
8.                             </Underline>  
9.                         </TextBlock>  
10.                     </DataTemplate>  
11.                 </CalendarDatePicker.HeaderTemplate>  
12.             </CalendarDatePicker>  

And in C# code we can also set selected date, MinDate & MaxDate like below:

1. MyCalendarDatePicker.Date = new DateTime(2016, 3, 11);//Selected date is March 3rd 2016  
2. MyCalendarDatePicker.MinDate = new DateTime(2016, 2, 28);//FEB 28th 2016  
3. MyCalendarDatePicker.MaxDate = DateTime.Now.AddMonths(3);//Max date is 3 months from current date  

We can get selected date of calendar view in 'DateChanged' event and in below code I am trying to display selected date in ContentDialog.

1. private void MyCalendarDatePicker_DateChanged(CalendarDatePicker sender, CalendarDatePickerDateChangedEventArgs args)  
2.     {  
3.         //Checking selected date is null  
4.         if (args.NewDate != null)  
5.             {  
6.                 /* Getting selected new date value*/  
7.                 DisplayDate(args.NewDate.Value.ToString());  
8.             }  
9.      }  
10. private async void DisplayDate(string SelectedDate)  
11.      {  
12.           ContentDialog noWifiDialog = new ContentDialog()  
13.           {  
14.                 Title = "Windows 10 Calendar Control",  
15.                 Content = "Selected date is: " + SelectedDate,  
16.                 PrimaryButtonText = "Ok"  
17.           };  
18.             noWifiDialog.Margin = new Thickness(0, 100, 0, 0);  
19.             await noWifiDialog.ShowAsync();  
20.       }  

4. How to run Windows 10 UWP app in emulator?
Now its time to test our sample, so follow below steps to run the app.
Step 1: In addition to the options to Debug on a desktop device, Visual Studio provides options for deploying and debugging your app on a physical mobile device connected to the computer, or on a mobile device emulator. You can choose among emulators for devices with different memory and display configurations like below

Note: 

1. It's a good idea to test your app on a deivce with a small screen and limited memory, so use the Emulator 10.0.10240.0 WVGA 4 inch 512MB option.

2. If you want to test our app in physical device, you must Register your Windows Phone device for development.

3. If you already have .APPx file, you can deploy it from WinAppDeployCmd.exe tool

After selecting emulator/device, From the Debug menu, click Start Debugging or Press F5. Then we can found below screen on emulator/device:

Important Notes:

1. A user can clear the selected date by clicking the selected date in the calendar view to deselect it.
2. By default, the minimum date shown in the CalendarView is 100 years prior to the current date, and the maximum date shown is 100 years past the current date. You can change the minimum and maximum dates that the calendar shows by setting the MinDate and MaxDate properties.
3. By default, the month view shows 6 weeks at a time. You can change the number of weeks shown by setting the NumberOfWeeksInView property. The minimum number of weeks to show is 2; the maximum is 8.

4. This sample will be work on all window 10 devices OS devices. And this sample was tested in Emulator & Lumia 735 device with Windows 10 OS (version 1511).

5. Windows 10 SDK works best on the Windows 10 operating system. And it is also supported on: Windows 8.1, Windows 8, Windows 7, Windows Server 2012, Windows Server 2008 R2, but not all tools are supported on these operating systems

6. This article is developed on windows 8.1 OS Machine with 64 bit. 

FeedBack Note:

Please share your thoughts,what you think about this post,Is this post really helpful for you?I always welcome if you drop comments on this post and it would be impressive.

Follow me always at  @Subramanyam_B 

Have a nice day by Subramanyam Raju :)

Customizing windowsphone 8 calender control c#

Introduction

Firstly i would like to say very thanks to http://wpcontrols.codeplex.com/, here we can get calender control for windows phone,which is can support both windowsphone 7.1 and windowsphone 8 OS.I was really impressed by this open source custom control and i would like to say very thanks to making source code available in codeplex.It will be more helpful for developers to customize calender as per their requirement .By the way i want to share a few things about "How to customize this windowsphone calender control"

Source File at :WindowsPhone 8 Calender Control

Building the Sample

We need to download source code of windowsphone calender control from http://wpcontrols.codeplex.com/.Here there is an option for  downloading source code which can support both windows phone 7.1 & windowsphone 8.

Description

However this article can explain the way of easily  customizing  the "WindowsPhone calender control" with our reuirements.Here iam going to explain about 

1)How to set background image to windowsphone calender

2)Customized Next and Previous month buttons for calender

3)webservice responce data binding to windowsphone calender

4)How to display events with specific date color

5)Screenshots
6)WindowsPhone calender gestures

So lets start start with simple steps to making our requiremnts

1)How to set background image to windowsphone calender

One  ineresting of windowsphone calender is default with transferent background color.And so it is helpful more for developers to change bg colot of calender by put into grid background like this way,

XAML

<Grid x:Name="ContentPanel"  Grid.Row="1" Margin="12,0,12,101"> 
            <Grid.Background> 
                <ImageBrush Stretch="Fill" ImageSource="/shade_white (2).png"/> 
            </Grid.Background> 
            <Grid.RowDefinitions> 
                <RowDefinition Height="*"/> 
                <RowDefinition Height="Auto"/> 
            </Grid.RowDefinitions> 
            <!--ColorConverter="{StaticResource ColorConverter}"--> 
            <wpControls:Calendar Grid.Row="0" 
                x:Name="Cal"  
                ColorConverter="{StaticResource ColorConverter}" 
                MonthChanged="Cal_MonthChanged" 
                MonthChanging="Cal_MonthChanging" 
                SelectionChanged="Cal_SelectionChanged" 
                DateClicked="Cal_DateClicked" 
                EnableGestures="False" StartingDayOfWeek="Monday" Margin="0,0,0,109" 
                /> 
            <!--<wpControls:Calendar  
                x:Name="Cal"/>--> 
            
 </Grid>

2)Customized Next and Previous month buttons for calender

One of the most important thing point of windowsphone is "Generic.xaml" page ,it is main head of every custom control in windowsphone ,or if you want to know more about "Generic.xaml" you may visit my favorite website is http://www.geekchamp.com/articles/creating-a-wp7-custom-control-in-7-steps

we can found this file under "WpControls=>Thems=>Generic.xaml" 

So,open that page and you may observed in this there is two buttons next/prev as names are x:Name="PreviousMonthButton" and x:Name="NextMonthButton" 

XAML

<Style TargetType="local:Calendar"> 
<Button  
                           Height="80" 
                            Width="80"  
                            Grid.Column="1" 
                            BorderThickness="0" 
                            x:Name="PreviousMonthButton"  
                            HorizontalAlignment="Right"  
                            VerticalAlignment="Center"  
                            Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ShowNavigationButtons, Converter={StaticResource BooleanToVisibilityConverter}}"> 
                            <Button.Background> 
                                <ImageBrush Stretch="Fill" ImageSource="/backwrd_1.PNG"/> 
                            </Button.Background> 
                        </Button> 
                        <Button  
                            Height="80" 
                            Width="80"  
                            Grid.Column="2"  
                            BorderThickness="0" 
                            x:Name="NextMonthButton"  
                            HorizontalAlignment="Right"  
                            VerticalAlignment="Center"  
                            Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ShowNavigationButtons, Converter={StaticResource BooleanToVisibilityConverter}}"> 
                            <Button.Background> 
                                <ImageBrush Stretch="Fill" ImageSource="/frwd_1.PNG"/> 
                            </Button.Background> 
                        </Button> 
</Setter>

3)Binding WebService responce data to windowsphone calender

Now days in most of requiremnt want to this feature in their apps,and so as developer we need to get responce data from webservice and finnaly need to map the list of events from calander.And it is little bit difficult to synchrounise webservice data with our calender,off cource wp calender makes it is as very simple by introducing the bellow class .However this is explaned more cleraly in next important heading.

C#

public class ColorConverter : IDateToBrushConverter 
    { 
}

4)How to display events with specific date color

 In step the 3 i had explaned about "ColorConverter.cs" class.It is more helpful for displaying events date with specific color broush ,here i was displayed the events with "yellow" color

Here iam statically taken the events on today dates of 2,11,21,30,so i hope you will check like this with webservice repsonce list of events data

Note:I just want giving the idea about changing the bg color of particular event date.

C#

using System; 
using System.Net; 
using System.Windows; 
using System.Windows.Controls; 
using System.Windows.Documents; 
using System.Windows.Ink; 
using System.Windows.Input; 
using System.Windows.Media; 
using System.Windows.Media.Animation; 
using System.Windows.Shapes; 
using WPControls; 
 
namespace WpControlsExample 
{ 
    public class ColorConverter : IDateToBrushConverter 
    { 
 
        public Brush Convert(DateTime dateTime, bool isSelected, Brush defaultValue, BrushType brushType) 
        { 
            if (brushType == BrushType.Background) 
            { 
                if (dateTime == new DateTime(DateTime.Today.Year, DateTime.Today.Month, 2) || dateTime == new DateTime(DateTime.Today.Year, DateTime.Today.Month, 11) || dateTime == new DateTime(DateTime.Today.Year, DateTime.Today.Month, 21) || dateTime == new DateTime(DateTime.Today.Year, DateTime.Today.Month, 30)) 
                { 
                    return new SolidColorBrush(Colors.Yellow); 
                } 
                else 
                { 
                    return defaultValue; 
                } 
            } 
            else 
            { 
                if (dateTime == new DateTime(DateTime.Today.Year, DateTime.Today.Month, 6)) 
                { 
                    return new SolidColorBrush(Colors.Cyan); 
                } 
                else 
                { 
                    return defaultValue; 
                } 
            } 
 
        } 
    } 
} 

5)ScreenShots of customized windowsphone 8 calender

5.1)Customized next/prev buttons

5.2)Customized  background image

5.3)Displaying events with yellow color 

6) windowsphone 8 calender gestures

However windowsphone calender provide gestures functionality.it is more helpful for user can flick on calender dates

6.1)Disable gesture from windowsphone calender

XAML

<wpControls:Calendar Grid.Row="0" 
                x:Name="Cal"  
                ColorConverter="{StaticResource ColorConverter}" 
                MonthChanged="Cal_MonthChanged" 
                MonthChanging="Cal_MonthChanging" 
                SelectionChanged="Cal_SelectionChanged" 
                DateClicked="Cal_DateClicked" 
                EnableGestures="False" StartingDayOfWeek="Monday" Margin="0,0,0,109" 
                />

6.2)Enabling gesture from windowsphone calender

XAML

<wpControls:Calendar Grid.Row="0" 
                x:Name="Cal"  
                ColorConverter="{StaticResource ColorConverter}" 
                MonthChanged="Cal_MonthChanged" 
                MonthChanging="Cal_MonthChanging" 
                SelectionChanged="Cal_SelectionChanged" 
                DateClicked="Cal_DateClicked" 
                EnableGestures="True" StartingDayOfWeek="Monday" Margin="0,0,0,109" 
                />

Source Code Files

You may get total knowledge of source file hierachy after downloading the source file what i had provided in this article.

More Information

Note: Don't be miss use of this code for security of mine,and i really thanks again to codeplex.com by sergey

Windows Phone tutorials for beginners key points


This section is included for only windows phone beginners.However this article can covers following questions.Off course these key words are more helpful for getting more best results about this topic in search engines like google/bing/yahoo.. 




1. How to customize calender control in windows phone 8 c#



2.How to display events dates in windowsphone calender




3.How to set background image to windowsphone calender




4. Previous and NextButton in windows phone 8 c#




5.WindowsPhone calender gestures enable/disable

Have a nice day by Subramanyam Raju