FullCalendar (<b:fullCalendar />)

Basic usage

Put a short description in simple words here.

Live preview

Reference section

Attribute Default value Description
all-day-slot
allDaySlot (alternative writing)
true String value to determine if the 'all-day' slot is displayed at the top of the calendar in agenda views
auto-update
autoUpdate (alternative writing)
false Setting this flag updates the widget on every AJAX request.
business-hours
businessHours (alternative writing)
{start: '8:00', end: '18:00', dow: [1, 2, 3, 4, 5]} String value that contains the business hours and the days of week, for example: {start: '8:00', end: '18:00', dow: \[1, 2, 3, 4, 5\]}
calendar-header
calendarHeader (alternative writing)
{left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay'} String value that contains the calendar header, for example: {left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay'}
col-lg
colLg (alternative writing)
-1 Integer value to specify how many columns to span on large screens (≥1200 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
col-md
colMd (alternative writing)
-1 Integer value to specify how many columns to span on medium screens (≥992 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
col-sm
colSm (alternative writing)
-1 Integer value to specify how many columns to span on small screens (≥768p pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
col-xs
colXs (alternative writing)
-1 Integer value to specify how many columns to span on tiny screens (≤ 767 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
day-click
dayClick (alternative writing)
function(calEvent, jsEvent, view){ $(this).css('background', 'yellow'); } String value to bind a javascript function to the on click event of a day; javascript signature is function(calEvent, jsEvent, view){ ... }; calEvent contains a day when clicked on the month's calendar, a day time of a slot otherwise
defaultDate (none) String value of default date in iso 8601 format; this is the date where the calendar position is set on loading
defaultView month String value to determine which view to display on page load; use one of month, basicDay, basicWeek, agendaDay, agendaWeek
display block If you use the "visible" attribute, the value of this attribute is added. Legal values: block, inline, inline-block. Default: block.
editable false Boolean value to specify if this calendar is editable
event-click
eventClick (alternative writing)
function(calEvent, jsEvent, view){ $(this).css('background', 'yellow'); } String value to bind a javascript function to the on click event on a date; javascript signature is function(calEvent, jsEvent, view){ ... }
events [] String value that contains events of this calendar in json notation; see http:\/\/fullcalendar.io/docs/event_data/Event_Object/ for details; also, use net.bootsfaces.component.fullCalendar.FullCalendarEventList to generate a json string from java beans
height 480 Integer value to specify the height of the calender
hidden (none) This column is hidden on a certain screen size and below. Legal values: lg, md, sm, xs.
id (none) Unique identifier of the component in a namingContainer.
lang en String value to specify the calendar language
large-screen
largeScreen (alternative writing)
-1 Alternative spelling to col-lg. Integer value to specify how many columns to span on large screens (≥1200 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
medium-screen
mediumScreen (alternative writing)
-1 Alternative spelling to col-md. Integer value to specify how many columns to span on medium screens (≥992 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
offset (none) Integer value to specify how many columns to offset.
offset-lg
offsetLg (alternative writing)
(none) Integer value to specify how many columns to offset.
offset-md
offsetMd (alternative writing)
(none) Integer value to specify how many columns to offset.
offset-sm
offsetSm (alternative writing)
(none) Integer value to specify how many columns to offset.
offset-xs
offsetXs (alternative writing)
(none) Integer value to specify how many columns to offset.
rendered false Boolean value to specify the rendering of the component, when set to false the component will not be rendered.
scroll-time
scrollTime (alternative writing)
06:00:00 String value that contains the hour where weekly and daily calendars start, for example: 06:00:00 (default), 12:00:00, 09:00:00
slot-duration
slotDuration (alternative writing)
00:30:00 String value to define the duration of a slot; default is 00:30:00 for 30 minutes
small-screen
smallScreen (alternative writing)
-1 Alternative spelling to col-sm. Integer value to specify how many columns to span on small screens (≥768p pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
span (none) Integer value to specify how many columns to span on medium screens (≥992 pixels). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
style (none) Inline style of the input element.
style-class
styleClass (alternative writing)
(none) Style class of this element.
tiny-screen
tinyScreen (alternative writing)
-1 Alternative spelling to col-xs. Integer value to specify how many columns to span on tiny screens (≤ 767 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
tooltip (none) The text of the tooltip.
tooltip-container
tooltipContainer (alternative writing)
body Where is the tooltip div generated? That's primarily a technical value that can be used to fix rendering errors in special cases. Also see data-container in the documentation of Bootstrap. The default value is body.
tooltip-delay
tooltipDelay (alternative writing)
0 The tooltip is shown and hidden with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay).
tooltip-delay-hide
tooltipDelayHide (alternative writing)
0 The tooltip is hidden with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay).
tooltip-delay-show
tooltipDelayShow (alternative writing)
0 The tooltip is shown with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay).
tooltip-position
tooltipPosition (alternative writing)
(none) Where is the tooltip to be displayed? Possible values: "top", "bottom", "right", "left", "auto", "auto top", "auto bottom", "auto right" and "auto left". Default to "bottom".
visible (none) This column is shown on a certain screen size and above. Legal values: lg, md, sm, xs.
week-mode
weekMode (alternative writing)
liquid String value to specify calendar size, one of liquid, fixed or variable
week-numbers
weekNumbers (alternative writing)
false Boolean value to specify if this calendar should display week numbers
weekends true Boolean value to specify if this calendar should display weekends
  • Tell the world which CSS classes can be used to change the look of the component.