Google Customizing windowsphone 8 calender control c# | SubramanyamRaju Xamarin & Windows App Dev Tutorials

Thursday 19 December 2013

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"


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 

25 comments:

  1. Hi how can we show empty grids when there is no date? Ex: In the above example showing empty grids from monday to saturday in first row whereas date started from sunday.

    ReplyDelete
  2. Hi Radha,

    Please observe at below locations
    1) TargetType="local:CalendarItem" in "Generic.xaml" of Wpcontrol
    class library
    2)BuildItems() method in Calendar.cs file of Wpcontrol

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. Hi,
    Are you binding the color converter with your calender in your xaml?

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
    2. Have you checking,when the first time your calender loading is assign with your dates?as like you are assigned dates at month changed event occurs

      Delete
    3. This comment has been removed by the author.

      Delete
    4. Ok can you share your code sample link at onedrive?It may helpful for resolve your issue.

      Delete
    5. This comment has been removed by the author.

      Delete
    6. Hi,

      in your sample webservice url is not working for me,because your webservice is under local Ip address which is not run in my pc..So that can you share sample expected Json string from your webservcie?

      Delete
    7. This comment has been removed by the author.

      Delete
    8. Now I figured out issue is when we assigned dates for the first time ,we need to refresh the calender after assign the dates like this
      ((ColorConverter)Resources["ColorConverter"]).Dates = dates;
      Cal.Refresh();

      Delete
    9. This comment has been removed by the author.

      Delete
  5. I am working with a webservice, Instead of changing the color, I want to show symbol, something like * or ... or -
    How do we achieve that ? Thanks in advance

    ReplyDelete
  6. Hi, does this control support day and week view at a glance?

    ReplyDelete
    Replies
    1. No. It doesnot. we have to implement on our own

      Delete
  7. We have a DATESPAN component in console applications,which gives difference between two dates.How to get in windows phone c# apps?

    ReplyDelete
    Replies
    1. In windowsphone we can get differences between two dates like this,
      double diff = (date1 - date2).TotalDays;

      Delete
  8. hello how did you customized the color of sat and sun above the calendar ?

    ReplyDelete
  9. can i get the source code of this app ?

    ReplyDelete
  10. Hi,Nice example but i am working on windows phone 8.1 universal app.please provide me custom calendar for that. i will be thank full for that.

    ReplyDelete




  11. Excellent information with unique content and it is very useful to know about the information based on blogs.

    Friends Phone Case

    ReplyDelete
  12. @Subbu .B : Hello , when i bind data through webservice , my Month Changing event is not working next time. so i can not further proceed. Please give Solution. Thanks

    ReplyDelete

Search Engine Submission - AddMe