MonoTouch Calendar control is here!

Posted by ESCOZ on Friday, January 22, 2010

Here’s a new MonoTouch UIView many people will probably find useful: CalendarMonthView. As you can see in the picture on the side, this control is a copy of the built in Month View calendar control, used in Apple’s calendar app. This includes animations when moving between months, highlighting of the cells being selected and current day, etc.

Even if you’re not going to use the control anytime soon, I would still recommend taking a look at the code simply an example of how to develop a control like it. This code is based on the calendar control from the great Tapku Library, created by Devin Ross, and reading over that was a great way of learning more about the UIKit.

Using this control is really simple, as you can see in the sample CalendarMonthViewController. All you have to do is instantiate a new CalendarMonthView control, and add it as a subview to the current view:

public class CalendarMonthViewController : UIViewController
{
    public CalendarMonthView MonthView;

        public override void ViewDidLoad()
        {
            MonthView = new CalendarMonthView();

            MonthView.OnDateSelected += (date) => {
                Console.WriteLine(String.Format("Selected {0}", date.ToShortDateString()));
            };
            MonthView.OnFinishedDateSelection += (date) => {
                Console.WriteLine(String.Format("Finished selecting {0}", date.ToShortDateString()));
            };
            MonthView.IsDayMarkedDelegate += (date) => {
                return (date.Day % 2==0) ? true : false;
            };

            View.AddSubview(MonthView);
        }
}

During the next few days, I’ll be adding a few new features to the control, like Range selection, more events, etc. The code still have a few small rendering bugs, which I’m working on. If there’s anything you would like to see implemented, let me know!

The full source code can be downloaded from my samples library in GitHub.

Update: I just committed a couple of changes to the control, one of them being the new delegate IsDateMarkedDelegate, which is used to display a mark for a day in the grid. To use this, simply create a new delegate or lambda expression (as above), and return true to display the mark. This to me seems considerably easier to implement then passing a list of DateTime objects that should have the dates, which is how this is implemented in the Tapku control.