Blogs

I just put up some Calendar tutorials at support.nitobi.com for all you keeners out there.

Implementing Date Ranges
Localizing the Calendar
Standalone Calendar/DateInput
Validation
Date Masking Syntax

Enjoy!

Forgot to include this screencast in my last post where I go through the new features. What you can’t see in the video is all my nervous sweating, which is a good thing.

Included in the 2008 Q3 release of CUI is a brand spankin’ new version of Calendar! We’ve put in loads of new features to really improve the usefulness of the component. I’ll go over some of my favourite features.

Multi Month
Using the new monthrows and monthcolumns attributes, you can render as many months you want!

Quick Nav
Another useful feature is the quick nav panel which allows you to jump to any month/year without having to go month to month. To activate the quick nav panel, you just need to click on the title of the calendar.

Natural Language Dates
For the attributes that require you to specify a date (selecteddate, mindate, maxdate, etc.), you can use some natural language dates. The following are accepted:

• today
• yesterday
• tomorrow
• last week
• next week
• last month
• next month
• last year
• next year

Databound Events
Another neat new feature is the ability to define event information for a date. You can define a url that will return event information for a date as an xml document. You can use our server side libraries to help you with this (just like with Grid). You can also define custom disabled dates in this way.

Themes
Our designer extraordinaire, Yohei Shimomae, has put together some sweet new themes for the Calendar. Loads of ‘em too!

And that’s just a small taste! There are a total of 14 new themes!

Ok, so that’s just a few of the new features. Q3 will be available to download July 17, 2008. Live samples of the new Calendar will be up then as well.

I was just going over the Calendar component when I found some useful functionality that was all tucked away, obscured from prying eyes. But the time has come to unleash it upon you all!

1. Formatting

There’s a method, DatePicker#getFormattedDate that will return the selected date as a string in the ubiquitous ISO8601 format (YYYY-MM-DD HH:MM:SS).

What’s better still, you can customize the format returned by getFormattedDate by using the formatter attribute on the Calendar declaration to specify a custom formatting function.

The Function
Let’s say I want the Calendar to format dates like this: MM/DD/YYYY.

function customFormatter(date)
{
if (nitobi.base.DateMath.invalid(date)) return "";
return nitobi.lang.padZeros(date.getMonth() + 1) + "/" + nitobi.lang.padZeros(date.getDate()) + "/" + date.getFullYear();
};


A couple things to note here:

• First, it’s very important we ensure the date is valid.
• Second, we use a helper method nitobi.lang.padZeros to ensure single digits get padded correctly (e.g. “1″ will become “01″, but “10″ will remain “10″).
• Third, the argument is a Javascript Date object.

The Declaration
Next, we change our Calendar declaration and specify this custom function as the formatter:

<ntb:datepicker id="cal1" formatter="customFormatter"></ntb:datepicker>


Now when we call #getFormattedDate we’ll get a string of the form MM/DD/YYYY.

2. Hidden Inputs
Another useful tidbit is the Calendar renders with a hidden input field that will store the formatted date which makes using it in a form pretty simple. For a Calendar with an id of “calendar1″, the hidden input will have an id of “calendar1.value”.

Go figure!