StyleCalendar

A simple calendar component.

View larger

Close

View larger

Close

StyleCalendars goal is to offer a simple, extendable calendar component with an easily themeable client-side DOM structure.

Its features include:

• setting stylenames for individual days
• disabling date ranges and individual days
• customizable header and week numbers
• tooltip support

Also includes a StyleCalendarField component which is a simple textfield that uses StyleCalendar as a popup for date selection. This feature is experimental.

Sample code

Java:

StyleCalendar sc = new StyleCalendar();

sc.setDateStyleGenerator(new StyleCalendar.DateStyleGenerator()

           @Override
            public String getStyleName(Date date, StyleCalendar context) {
                Date now = new Date();

                if (date.after(now)) {
                    return "future";
                } else if (date.before(now)) {
                    return "past";
                } else {
                    return null;
                }
            }
});

CSS:

.v-stylecalendar .future {
	background-color: red;
}

.v-stylecalendar .past {
	background-color: blue;
}

Links

• Source code
• Demo
• Discussion Forum
• Issue Tracker

Compatibility