Skip to main content
Version: 8.1

Vision - Day View

Component Palette Icon:


This component displays a timeline for a single day, similar to what you might find in a personal planner/organizer. By filling in the Calendar Events dataset property, the component will display events that occur on this day. Each event can have custom text and a custom display color associated with it.


PropertyDescriptionProperty TypeScriptingCategory
24 Hour FormatWhether or not to show 24 hour or 12 hour format.boolean.twentyFourHourAppearance
BorderThe border surrounding this component. Options are No border, Etched (Lowered), Etched (Raised), Bevel (Lowered), Bevel (Raised), Bevel (Double), and Field Border.
Note: The border is unaffected by rotation.

Changed in 8.1.21
As of 8.1.21, the "Button Border" and "Other Border" options are removed.
Calendar Background ColorThe color of the calendar's background. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector.Color.calendarBackgroundAppearance
Calendar eventsContains the calendar events.Dataset.eventsData
CursorThe mouse cursor to use when hovering over this component. Options are: Default, Crosshair, Text, Wait, Hand, Move, SW Resize, or SE
DaySet the calendar's
Day Outline ColorThe color of the day's outline. See Color Selector.Color.boxOutlineAppearance
Event FontThe font for all calendar events.Font.eventFontAppearance
Grid marksSet the amount of grid
Hour FontThe font for the hour of the day.Font.hourFontAppearance
Hour Foreground ColorThe foreground color for hours in a day. See Color Selector.Color.hourForegroundAppearance
Hover Background ColorThe background color of the hovered time. See Color Selector.Color.hoverBackgroundAppearance
Hovered EventThe calendar's hovered
Hovered TimeThe calendar's hovered time.String.hoveredTimeData
MonthSet the calendar's
Mouseover TextThe text that is displayed in the tooltip which pops up on mouseover of this component.String.toolTipTextCommon
NameThe name of this component.String.nameCommon
Non-Working Hours Background ColorThe background color for the non-working hours of the day. See Color Selector.Color.nonWorkingHourBackgroundAppearance
QualityThe data quality code for any Tag bindings on this component.QualityCode.qualityData
Selected EventThe calendar's selected
StylesContains the component's styles.Dataset.stylesAppearance
Today's Background ColorThe color of the today's background. See Color Selector.Color.todayBackgroundAppearance
VisibleIf disabled, the component will be hidden.boolean.visibleCommon
Week Day Background ColorThe color of the week day's background. See Color Selector.Color.weekDaysBackgroundAppearance
Week Day FontThe font of the week day's text.Font.weekdayFontAppearance
Week Day Foreground ColorThe color of the week day's text. See Color Selector.Color.weekDaysForegroundAppearance
Working End HourThe end hour of a working
Working Start HourThe start hour of a working
YearSet the calendar's
ZoomZooms into the specified zoom time-range.boolean.autoZoomAppearance
Zoomed End HourThe end hour zoomed
Zoomed Start HourThe start hour zoomed

Deprecated Properties

PropertyDescriptionProperty TypeScriptingCategory
Data QualityThe data quality code for any Tag bindings on this


Component Functions

This component does not have component functions associated with it.

Extension Functions

This component does not have extension functions associated with it.

Event Handlers

Event handlers allow you to run a script based off specific triggers. See the full list of available event handlers on the Component Events page