Silverlight Calendar Control

The Silverlight Calendar control is great for scenarios where date selection by an end user is needed. Here we have a simple example which shows how to display the calendar in XAML and how to respond to date changes in C#.

Customize your calendar

How to Use the Calendar Control

To use it on your Silverlight page:

<UserControl x:Class="Calendar.Page"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:liquid="clr-namespace:Liquid;assembly=Liquid"
    xmlns:extended="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
    Width="400" Height="300">
     <Canvas>
          <extended:Calendar x:Name="testCal" Canvas.Top="10" Canvas.Left="10" />
     </Canvas>
</UserControl>
 

In your Silverlight C# code behind file you can refer to your calendar using testCal. The Calendar has a SelectedDate property which allows you to set or read the currently selected date.

The Calendar exposes a click event which is fired (named SelectedDateChanged) when a day is clicked on, you can attach an event handler to this to read the date value.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace Calendar
{
     public partial class Page : UserControl
     {
          public Page()
          {
               InitializeComponent();
            testCal.SelectedDatesChanged += new EventHandler<SelectionChangedEventArgs>(testCal_SelectedDatesChanged);
          }
        void testCal_SelectedDatesChanged(object sender, SelectionChangedEventArgs e)
        {
            DateTime selectedDate = testCal.SelectedDate.Value;
        }
     }
}
 

Example Silverlight Calendar Control:

Silverlight Calendar Control

Your Comments and Questions Answered

 You are not logged in. You need to login to post new messages, if you do not have a login you can register for free!

samnus said:

My English is very poor, I can understand! !

If there is a Chinese is very good!

04/27/2009 08:08
 
priyagee said:

Hai

i want to change the date color , if i set the foreground color only the days color is changed (ie.Mon,Tue,Wed....)but not the date color is changed. Please tell me how to change the date color . Please help me..

01/21/2009 02:12
 
vijendra said:

i want to reduce the size of the calendar to a height of 115 and width 160
but i am not able to see all the dates using the scale transform
can you just help me

Thanks for the resources anyway....

12/28/2008 05:00
 
jeremygwa said:

do I have to use csharp?

can I use php for serverside and javascript for client?

10/30/2008 10:50
 
dan said:

Hi Nina,

It is not possible to set individual background color at the moment, but it is a good suggestion and one which we will look to implementing in the next version. Thanks for the suggestion!

08/14/2008 04:56
 
Nina said:

hi!

Is it possible to set a background color for specific dates?
thx in advance!

08/13/2008 02:20
 
dan said:

Hello,

At the moment the day text cannot be changed, this is a bit of an oversight and has been added to the features list for the next version. Using the SetSkin() method only general styling of a control can be changed and not the text property, thanks for your patience, a fix is on the way.

03/03/2008 05:36
 
Marek Bober said:

Hello,
I have a problem with setting text to day title. I would like to change to CZECH name by this:

skins.Add("Calendar.Tue.Text", "Ut");

But is not working, can you help me, please? I am using version 3.0.

03/03/2008 03:48
 
dan said:

Hello,

No, not at the moment, this functionality is included in the next build and will be released shortly. Let me know if you have any other suggestions for inclusion in the datagrid.

02/26/2008 05:11
 
prejeshvp said:

Hi Dan,
Thanks for your earlier info.
Can we add checkboxes and dropdownlist in editable datagrid?

02/26/2008 04:55
 
prejeshvp said:

Hi Dan,
No, i was using older version (2.4)
Thanks, i will try with newer version

02/25/2008 08:34
 
dan said:

Hello,

Are you using verision 3.0? This only works with the latest version:

// This changes the Selected date background color to Green:
skins.Add("Calendar.Day.Background.Selected.Fill", "<SolidColorBrush Color=\"#ff00ff00\" />");
skins.Add("Calendar.Weekend.Background.Selected.Fill", "<SolidColorBrush Color=\"#ff00ff00\" />");

// This changes the Current date (Todays date) background color to Red:
skins.Add("Calendar.Day.Background.Current.Fill", "<SolidColorBrush Color=\"#ffff0000\" />");
skins.Add("Calendar.Weekend.Background.Current.Fill", "<SolidColorBrush Color=\"#ffff0000\" />");

02/25/2008 05:15
 
prejeshvp said:

Hi Dan,
Thanks for info

itseems that selected date and todays date background color are same, is there any way of having 2 different colors for these days?

02/25/2008 04:04
 
dan said:

Hello,

In your example below you are using an empty string as the XAML to fill the background rectangle. What you need to do is specify valid XAML and that should fix your problem:

skins.Add("Calendar.Day.Background.Selected.Fill", "<SolidColorBrush Color=\"#ff00ff00\" />");

This will make the selected day Green, it is important to note that the above will only affect selected dates that are not weekends, to modify the selected date fill property for weekends you will need to add:

skins.Add("Calendar.Weekend.Background.Selected.Fill", "<SolidColorBrush Color=\"#ff00ff00\" />");

Your earlier request to be able to control the background color of the current date has been implemented in version 3.0 and the syntax is similar to the above. The example on Custom Visualizations shows how to set the XAML for both Selected and Current dates.

02/25/2008 02:15
 
prejeshvp said:

Hi dan,
When i try to apply skin, skins.Add("Calendar.Day.Background.Selected.Fill", "");

i am getting following exception. But other skins are working except one mentioned below

A first chance exception of type 'System.Windows.Markup.XamlParseException' occurred in agclr.dll

02/24/2008 08:43
 
prejeshvp said:

Thanks Dan

02/24/2008 08:21
 
dan said:

Yes, using the example on the Calendar Visual Customizations you could add the following line to the ApplySkin() method:

skins.Add("Calendar.Day.Background.Selected.Fill", "");

The selected element of a calendar day is a Rectangle so you can apply other properties such as the opacity:

skins.Add("Calendar.Day.Background.Selected.Opacity", "0.8");

Hope this helps.

02/22/2008 11:28
 
prejeshvp said:

Hi Dan,

Thanks for that Info. Can you please share how to style selected date?

02/22/2008 09:02
 
dan said:

Hello,

Thanks for the info. the datagrid demo seems to be working now, it may have just been a dll versioning conflict as were updating the demos all the time.

With regards to you question about the calendar, at the moment there is no way to control the styling of the current date, only the selected date can be styled. It is a good suggestion has been added to the list of improvements for the next version which is available soon, along with the datagrid.

Thanks for your feedback.

02/22/2008 05:30
 
prejeshvp said:

Hi Dan,

Silverlight grid Demo shows some parse error plz check it.

Can we change the background color of todays date. i want selected date and todays date to be in different colors ,is there any way of doing it?

02/22/2008 03:51
 
dan said:

When using the latest version of the controls, images are no longer required. Images are only needed for versions 2.0 and below.

01/12/2008 12:05
 
dan said:

The images should be placed in a folder called images. This folder should be in your root folder, i.e. the same level as your ClientBin folder, not in the ClentBin folder.

11/27/2007 02:13
 
MrCyprom said:

Hi,
I tried to use your Calendar but I get this Error : error 1001 download error . I suppose it is caused by the images which must be pasted in a specific location. I tried in the ClientBin directory of my project : ClientBin/Images or directly paste the images into ClientBin but it does not work.
Do you have a solution ?

Regards.

11/25/2007 08:23

Silverlight 3

Latest News

  • Silverlight 2 Controls V5.2.1 Released
    Jul, 03 2009

    After several months since the last release we have implemented many fixes to the controls library. The Rich TextBox has been improved with Links...

  • Silverlight 3 BETA Controls Released
    Mar, 30 2009

    As Silverlight 3 BETA is available now to test we thought we would present the Liquid Controls library for Silverlight 3. This BETA...

Silverlight 2 Controls

  • Rich TextBox

    Create and edit rich content with this slick and expandable Rich TextBox...

  • TreeView

    This easy to use TreeView comes with drag and drop, sorting, searching and much more...

  • Context Menu

    You too can have cool popup context menus in your Silverlight applications...

  • Resizable Dialog

    Draggable and resizable popup dialogs are what serious Silverlight developers need...

  • Spell Checker

    Real-time spell checking in Silverlight? We did it first here...