[Calendar Addon] - style cells not in current month

Flow
1

Is it possible to “style” the Vaadin calendar component so that when using it to display a full month, let say january 2012, the day prior to the 1st jan 2012 and after the 31. jan 2102 are displayed in some kind of grey cells.

At the moment when I use default settings with startDate=01.01.2012 and endDate=31.01.2012, cells for days at the end of dec 2011 and beginning of feb 2012 are also displayed.

in the attached image, I surrounded in red those cells I would like to style as “grey cells” for instance. (or even hide would be better)

thanks for the infos.
12176.png

2

here is a reply (or attempt) to myself in case someone wants to take over and go further on this :dry:

So here is the hack I did to make my initial idea work.

In my project, I’ve overriden the calendar widget class : com.vaadin.addon.calendar.gwt.client.ui.VCalendar and in the updateMonthGrid,
I’ve added some control logic to check if the current cell is within the current month range or not. Then I’ve added a simple “notinrange” css class to gray out
those out-of-range cells.

At the end I get what I wanted, this is a isolation in a month grid view of the day-cells that are not part of the
displayed month. I suppose the same could be achieve with some much nicer code with some parametrization on the Vaadin part
of the widget (no in the GWT class).

I think there is a ticket that could relate to this need ? : http://dev.vaadin.com/ticket/6775

and here is the piece of code I changed.

	[code]

	boolean currentMonth = false;
	for (int i = 0; i < daysCount; i++) {
		UIDL dayUidl = daysUidl.getChildUIDL(i);
		String date = dayUidl.getStringAttribute(ATTR_DATE);			
		Date d = dateformat_date.parse(date);
		int dayOfWeek = dayUidl.getIntAttribute(ATTR_DOW);
		int week = dayUidl.getIntAttribute(ATTR_WEEK);

		int dayOfMonth = d.getDate();
		// reset at start of each month
		if (dayOfMonth == 1) {
			monthNameDrawn = false;
			currentMonth = !currentMonth;
		}

		if (dayOfWeek < firstDay || dayOfWeek > lastDay) {
			continue;
		}
		int y = (pos / columns);
		int x = pos - (y * columns);
		if (x == 0 && daysCount > 7) {
			// Add week to weekToolbar for navigation
			weekToolbar.addWeek(week, d.getYear());
		}
		SimpleDayCell cell = new SimpleDayCell(this, y, x);
		cell.setMonthGrid(monthGrid);
		cell.setDate(d);
		if (!currentMonth) {
			cell.addStyleDependentName("notinrange");
		} else {
			cell.removeStyleDependentName("notinrange");
		}

		if (dayOfMonth >= 1 && !monthNameDrawn) {
			cell.setMonthNameVisible(true);
			monthNameDrawn = true;
		}

		if (today.getDate() == dayOfMonth && today.getYear() == d.getYear() && today.getMonth() == d.getMonth()) {
			cell.setToday(true);

		}
		monthGrid.setWidget(y, x, cell);
		pos++;
	}

[/code]

and the result :
12186.png