I started new CodePlex project for controls for Windows Phone 7. One control I needed for my next application is calendar control. I could not find one, so I started thinking about one a little while ago. Today I published an alpha version of calendar control. You can find it here http://wpcontrols.codeplex.com/.
Calendar control supports the following features in the initial release:
- Next/Previous month buttons
- Ability to provide converters to color day number or date cell background
- Ability to select a date and apply background color
- Data binding to SelectedDate
Calendar also supports the following events
- MonthChanging is fired before calendar is rebuilt for the next month. Can be used to setup data for converters
- MonthChanged is fired after calendar is rebuilt for new month/year
- SelectionChanged is fired when a user selects a date
As part of download, you are provided with a working sample that shows how to do converters and calendar control without converters.
Here is the markup you can use in both cases:
Sample calendar control:
Converter simply have to implement a simple interface with one method:
Of course, instead of hard-coded date you can drive them based off your data on the phone. On a second note, if you need a simple, easy to use, yet powerful database for your Windows Phone 7 application, check out my other project on CodePlex: http://winphone7db.codeplex.com/
Here is what the control looks like on the phone:
Nice work 🙂 – I was just starting to look into implementing something like this. Saves me a lot of time!
if I want to set a color date cell background by the behind-code, how is it?
thank you 🙂
If you check out the sample project that is part of download, you will see an example. You have to create a converter. There is a also another post that I wrote as an update to calendar that shows how to do it. Please let me know if it is still not clear.
OK if I use this calendar control as a part of my application ?
Im am trying to build an application that needs a calendar control.
Sure. It is there for everyone to use,
How can I change the color date cell background after the launching of the program? I request a duration and a start time in my application and I want to change the color from the start date until the end of the term. I tested a lot of things but I have no solutions. May be a little help on that thing?
Once your parameters are established and your converter knows about them (I assume you are using IDateToBrushConverter), just call Refresh on the calendar or simply set DataSource to null and back to the original value.
Thank you, Sergei. I’m from Russia 🙂 You have helped me.
If I implement a swipe, you add it to your project?
i’m trying to run the sample code…but i’m stuck…
one question i want to ask is that is the code integrate with the Zune software ??
i solved the problems….and i’m still working on the map…thanks for your reply…..your project was awesome…
i solved the problems….and i’m still working on the map…thanks for your reply…..your project was awesome…thx
sorry…typo…is working on the calendar ^^
how can i implement this to my own application? I added the WPControls.dll as reference and the calendar was shown in the page but the calendar doesn’t indicate the current date and the static dates like from the example app. Can you please help me. Thanks
@The sample app has color converter in it, which is responsible for coloring certain dates. You can write your own, just take a look at the sample app code, you will see it.
Seriously though, I am a big fan of SpongeBob 🙂
How can i change the background color of the calendar? In what file can i change it? 🙂
and also how can i disable the touch function for the days in the calendar?
You do not really need to disable that, just do not respond to events. To change colors you can use ColorConverter (see included demo projects in the download). You can also just re-style the calendar and the calendar item controls.
Thanks for the help Sergey! I’m just new in wp mobile development and i need a calendar for my app so thanks again. I’m a fan of spongebob too! 🙂
In Calendar.cs > BuildItems() method please also add item.SetForecolor()
This is needed when i change DatesSource & add new items in it..
I assume you fixed it in your copy. I am waiting for WP 8 SDK to be released and then I will make the changes as well as publish it with WP 8 support.
I am trying to use this calendar control in Windows 8 Metro Style App.
But a problem i am facing is height of CalendarItem.
Is there any way to resize CalendarItem height according to Calendar’s height?
I have not tried this. You would need to edit the template, likely for both calendar and calendar items. I am kind of surprised this worked at all. I am planning to at some point convert the project to be usable in Metro, just have not had time to do that yet.
I am trying to change the selected background color(mouse onclick) and its default is red, which line i need to change??
The easiest way is to create a color converter. You get the selected flag and the date there, so you can pretty much do whatever you need there.
Hope this helps
It is working!! I’m really like your work, thanks you very much 🙂
Hi, thanks for your work!
i’m working on a pill-reminder and i need to convert the background color of some dates according to a different paramater than isSelected, is it possible?
You get a date as a parameter to color converter, so you can look in your data for the same date and use your custom logic to return any color you wish.
thanks for the quick reply! 🙂
i’m not sure i understood your answer…
here’s how my application should work:
as soon as the user click on the reminder, the date is used as a key to a dictionary (myDictionary).
the converter should then check if the date displayed in the calender is a key to de dictionary and a switch case on the enum should set the backround color.
i don’t know how to do the check against the dictionary key in the converter.
i’d like to do a thing like this:
public class ColorConverter : IDateToBrushConverter
public Brush Convert(DateTime dateTime, bool isSelected, Brush defaultValue, BrushType brushType)
if (brushType == BrushType.Background)
//here’s where i want to check the date of the calendar against the dictionary key
var value = myDictionary.tryGetValue(dateTime.Date);
return new SolidColorBrush(Colors.Red);
return new SolidColorBrush(Colors.Green);
return new SolidColorBrush(Colors.Yellow);
if (dateTime == new DateTime(DateTime.Today.Year, DateTime.Today.Month, 6))
return new SolidColorBrush(Colors.Red);
Thanks a lot!
Just expose your dictionary in a static variable or a property off Application object, and you will have access to it in the converter. Your code should work then.
First, many thanks for sharing this control to us.
I am new to windows phone development, I have question here.
I need to highlight a list of selected date instead the one in the example. Could you please tell what is the easiest way to bind it to the control.
There is currently no way to multi-select dates. However, you can build your UI to select them one at a time. Then, you can write a color converter that would look into your data based on the date passed in and return highlight color.
Hello, can u help me with this:
and i have error:
prefix local is not defined…
Can you show a full example of Background converter with xaml code?
What do i want to do, i implemented another button in your Calendar control – Today. If user presses the button calendar automaticaly opens
Cal.SelectedDate = DateTime.Now.Date;
Cal.SelectedMonth = DateTime.Now.Month;
Cal.SelectedYear = DateTime.Now.Year;
It works if user is on NOT current month, but if i am at September for example, and today is 5th and i pressed 10th and then pressed button “Today” it doesn’t highlight today’s date
If you download sample project, there is an example. If your case you need to fix the namespace in XAML to point to the place where your converter is.
Just Call Refresh() method after setting selected date.
Is there a way to set calendars CurrentCulture?
Can set current culture, but what do you expect to see when you do?
I set Thread.CurrentThread.CurrentCultere to LV and RU the calendar has changed it Mounths and Week days into needed culture – but WeekBegginingDay – remains the same. In Russia and Latvia week starts from monday… I need to change this…
I am guessing I was just thinking US when I wrote it. I did add some resources down the road to let you change the text in the calendar, but never put in a formal option to set first day of the week. I will try to add this to my to-do list, but likely is not going to happen until mid – September at the earliest. If you would like to develop it and email me the changes, I can try to put it in faster….
If, i could get your Source code, i would like to try adding this functionality.
Oh, it has always been available on CodePlex. https://wpcontrols.codeplex.com/
I’m having problems going through the TFS authorization
Just to to downloads, and download the release. It includes source code. Then just email me or submit your changes under discussions.
Hi, can you please help with this issue? http://stackoverflow.com/questions/18673109/how-to-change-the-color-of-multiple-days-using-wpcontrolscalendar
I’m really waiting and relying on your update on calendar tool (Possibility to change first day of week).
I posted my answer on StackOverflow for you. I think the problem is with your converter.
No pressure, right? 🙂
It is on my to-do list. I will try to get to it week after next, have some presentations I am doing in the next two weeks.
Thanks for your patience.
Offcourse not 🙂 By the way calendar is based on MVVM patterns?
@Sergey, Thank you for your assistance, we are working on it and will let you know if it works. Thanks again!
@Sergey, What u posted was regarding particular week days. But in my project the dates which I will be getting from my database is dynamic, it may be on any days of the year. So please give me some example related to dynamic dates.
I updates stack overflow answer.
@Sergey, I got ur update in stackoverflow. Thanx for responding…
One simple question please I want to know:
Whether I can change the border color of the calendar Days of wpControls?. Now I can change the Foreground Color of calendar Days.
Because right now border color is white.
I am not sure what exactly you mean by MVVM pattern. I think the answer is yes, since all properties are bindable.
Did you try setting borderbrush?
ya I tried that….
You can always create your own style with your own template and customize it as much as you want. Just copy the templates included in the download on CodePlex in the source code download and change them as you want.
Ya I changed a lot. But I am able to set the borderbrush. But some borders still der and I did not able to remove those…
If possible please send me any example
I added support for starting day of the week – http://dotnetspeak.com/2013/09/update-for-windows-phone-calendar