Configuring the appearance of the Vaadin Calendar component is one of the basic tasks. At the least, you need to consider its sizing in your user interface. You also quite probably want to use some color or colors for events.
The Vaadin Calendar supports the dynamic size system of Vaadin, with both defined and undefined sizes. When using defined sizes, the Calendar calculates the correct height for the cells so that it fits to the size given.
When using an undefined size for the calendar, all the sizes come from CSS. In addition, when the height is undefined, a scrollbar is displayed in the weekly view to better fit the cells to the user interface. See the section called “Style for Undefined Size” for information about customizing the undefined sizes.
The Calendar has a default theme defined in the widget set. You may choose
to overwrite the style names from the default theme file
calendar.css. The file is located in a folder named
public under the src folder in
the JAR file. Vaadin will find the CSS from inside the JAR package.
Usually, you do not need to overwrite any of the default styles, but a
Calendar with undefined size is a exception. Below is a list of style
names that define the size of a Calendar with undefined size (these
are the defaults from calendar.css):
.v-calendar-month-sizedheight .v-calendar-month-day {
height: 100px;
}
.v-calendar-month-sizedwidth .v-calendar-month-day {
width: 100px;
}
.v-calendar-header-month-Hsized .v-calendar-header-day {
width: 101px;
}
/* for IE */
.v-ie6 .v-calendar-header-month-Hsized .v-calendar-header-day {
width: 104px;
}
/* for others */
.v-calendar-header-month-Hsized td:first-child {
padding-left: 21px;
}
.v-calendar-header-day-Hsized {
width: 200px;
}
.v-calendar-week-numbers-Vsized .v-calendar-week-number {
height: 100px;
line-height: 100px;
}
.v-calendar-week-wrapper-Vsized {
height: 400px;
overflow-x: hidden !important;
}
.v-calendar-times-Vsized .v-calendar-time {
height: 38px;
}
.v-calendar-times-Hsized .v-calendar-time {
width: 42px;
}
.v-calendar-day-times-Vsized .v-slot,.v-calendar-day-times-Vsized .v-slot-even {
height: 18px;
}
.v-calendar-day-times-Hsized, .v-calendar-day-times-Hsized .v-slot,.v-calendar-day-times-Hsized .v-slot-even {
width: 200px;
}
Events can be styled with CSS by setting them a style name
suffix. The suffix is retrieved with the
getStyleName() method in
CalendarEvent. If you use
BasicEvent events, you can set the suffix with
setStyleName().
BasicEvent event = new BasicEvent("Wednesday Wonder", ... );
event.setStyleName("mycolor");
calendar.addEvent(event);
Suffix mycolor would create
v-calendar-event-mycolor class for regular events
and v-calendar-event-mycolor-add-day for all-day
events. You could style the events with the following rules:
.v-calendar .v-calendar-event-mycolor {}
.v-calendar .v-calendar-event-mycolor-all-day {}
.v-calendar .v-calendar-event-mycolor .v-calendar-event-caption {}
.v-calendar .v-calendar-event-mycolor .v-calendar-event-content {}
As we saw in Section 16.3.1, “Setting the Date Range”, you can set the
range of dates that are shown by the Calendar. But what if you wanted to
show the entire month but hide the weekends? Or show only hours from 8 to
16 in the weekly view? The setVisibleDays() and
setVisibleHours() methods allow you to do that.
calendar.setVisibleDays(1,5); // Monday to Friday calendar.setVisibleHours(0,15); // Midnight until 4 pm
After the above settings, only weekdays from Monday to Friday would be shown. And when the calendar is in the weekly view, only the time range from 00:00 to 16:00 would be shown.
Note that the excluded times are never shown so you should take care when setting the date range. If the date range contains only dates / times that are excluded, nothing will be displayed. Also note that even if a date is not rendered because these settings, the event provider may still be queried for events for that date.