GWT Calendar o Datepicker para mostrar las estaciones en un año

I'm trying to find the best component to display date ranges among a year. An idea is to display are months as boxes (12 boxes) and paint the seasons with a different colour.

GWT Datepicker does not really fit my needs since is not extendible enough ( A calendar component is too much complicated. GXT datepicker lacks of extendibility too.

That's a sample of what I'd like to acheive:

Thats a simple sample of what I want to do

Any idea? I'm using GXT as library.

preguntado el 22 de mayo de 12 a las 19:05

1 Respuestas

In my opinion, using DatePicker isn't such a bad idea. Here's a little example that covers a single month. I think it won't be too hard to extend this to a full year by arranging 12 of these in a grid:


final DateTimeFormat format = DateTimeFormat.getFormat("yyyy-MM-dd");

final DatePicker datePicker = new DatePicker();

final Date start = format.parse("2012-01-17");
final Date end = format.parse("2012-01-28");

for (final Date date = start; date.compareTo(end) <= 0; CalendarUtil
    .addDaysToDate(date, 1)) {

  datePicker.addStyleToDates("my-green", date);


.my-green { background-color: green !important; }
.my-cal .datePickerPreviousButton { visibility: hidden; }
.my-cal .datePickerNextButton { visibility: hidden; }

With the "clean" theme, it looks like this:

enter image description here

P. S. Here's how the full calendar could look like:

enter image description here

Código completo:

contestado el 22 de mayo de 12 a las 21:05

Hello, I've already tried this solution out but I can't delete the filler dates. You can hide them but still when you click on them the calendar switches the month. It is impossible to override this behaviour because the class is final and to copy paste the class is neither a solution cause it used package private classes. See the ticket: - Jordi PS

@Jordi: How are you hiding them? I'm using .datePickerDayIsFiller {visibility: hidden;}, and this makes them unclickable (tested on chrome in dev mode, GWT 2.4.0). - chris lercher

Also, you could override setCurrentMonth() either in DatePicker or in CalendarModel (which are not final), in a way that they don't allow changing the current month, once you have set it. - chris lercher

I used the solution you proposed and worked smoothly. Here the code I used: - Jordi PS

Awesome. Thanks for sharing the result! - chris lercher

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.