Customization of Calendar display is available for each of the calendars, in the form of override files. Each of the calendars give the user the ability to change many of their internal parameters.
In version 3.5.2, we introduced a new way of writing overrides. Instead of using ReactorFeed, we can now use the Override Helper (BlackBoxOverride). Put a Let statement into the WebViewer before the calendar function call. It's handy to set a global variable which logs all Reactor calls:
Let ( $$com.reactorize.log = $$com.reactorize.log & "¶" &
BlackBoxOverride(
"FunctionName" ;
"css" ;
".my-selector{ my: css; }"
);
FunctionName(
// .... BlackBox Parameters Here...
)
)
For the Day Calendar:
// Original Calendar
ReactorFeed( BlackBoxPath( "CalendarPack" ) &"DayCalendarOverride.css" ; MyTO::MyOverrides )
// For CalPack2
BlackBoxOverride( "DayCal2" ; "css" ; MyTO::MyOverrides )
For the Resource Calendar:
// Original Calendar
ReactorFeed( BlackBoxPath( "CalendarPack" ) &"ResourceCalendarOverride.css" ; MyTO::MyOverrides )
// For CalPack2
BlackBoxOverride( "ResourceCal2" ; "css" ; MyTO::MyOverrides )
For the Month Calendar:
// Original Calendar
ReactorFeed( BlackBoxPath( "CalPack2" ) &"MonthCalendarOverride.css" ; MyTO::MyOverrides )
// For CalPack2
BlackBoxOverride( "MonthCal2" ; "css" ; MyTO::MyOverrides )
The above examples are assuming that you've set your override values into a field (which could be a calculation field if you desired). However, its equally as valid to directly type your overrides into the calculation.
ReactorFeed (BlackBoxPath( "CalPack2" ) &"ResourceCalendarOverride.css" ; "html, body{font-family:georgia, serif;}" )
The only requirement is that the value in the second parameter is valid css.
Applying Custom Styles
The most suitable styles to override are background image and background color. We recommend that you don't touch positioning: left, right, border positioning etc, unless you really know what you are doing. Some of the positioning information is automatically written by the calendar when it loads, and changing these values may have undesired effects.
Care is needed, because a single change can affect more that one element - following the CSS inheritance rules, the styles you enter will appear on other matching elements. For example:
p{ font-family: "Comic Sans";
}
The above example would change the font for every 'paragraph' element - which will affect MOST text on the calendar, but not all. A more reliable way of setting the font in the calendar, would be this:
html, body{ font-family: "Comic Sans";
}
The above example should apply the font change to all the text in the calendar. Most selectors can have color, even if they are not listed as having a current value at present. Read the information below for more details about setting text colors.
Available Selectors for DayCal Override
| CSS Selector |
Purpose |
Current value |
| #viewer |
Styles for element that holds the days and appointments |
background-color: #fbfbfb; |
| div.nonwork |
sets style of hour cells that aren't in work time |
background-color: #f5f5f5; |
| div.booking |
base styles for appointments |
background: url( './images/from-white.png' ) repeat-x 0 -5px; |
| div.selected |
style for selected appointments |
|
| div.booking p.titleDisplay |
style for time display in appointments |
|
| div.booking div.removeButton |
the remove button on an appointment when deletion is enabled. |
background: transparent url( './images/remove.png' ) no-repeat 50% 50%; |
| pre.bookingDetails |
Style for appointment details section |
color: #fff; |
| pre.bookingDetails textarea.description |
Style for text area which allows user to edit
the description for an appointment |
|
| .dayblock |
style for day block - inside viewer, and contains hourblocks |
|
| .hourblock |
base style for hour blocks |
|
| .hourblock.half |
style for blocks which represent the 'half' hour mark. Usually used to set a different border color to differentiate an on the hour line from a half hour line. |
|
| #toolbar |
Style for left bar - contains hour labels, and scroll tools down bottom |
background-color: #D1DAE8; |
| #hourlabel |
hour labels div - inside toolbar and contains hour labels |
|
| .timeline |
hour labels for positioning. holds label text |
|
| .timeline p |
hour label text |
color: #444; |
| .timeline p span |
hour label text for emphasis
usually for AM - PM text |
color: #888; |
| #dateline |
bottom dateline holder |
color: #222;
background: #cacaca url( "./images/from-white.png" ) repeat-x 0% 0%; |
| .timecell |
holds date labels inside dateline div |
|
| .timecell p |
date text label inside the time cell |
|
| .timecell div.delimeter |
Displays a small white line to separate
dateline dates |
|
| .timecell div.month |
attached to a time cell that is the
last day of the month |
|
| p.today |
style for today's date (text label inside time cell) |
color: #9aa4ea; |
| #dateline div.today |
added to today's dateline date |
background: #091939 url( './images/dateline.png' ) repeat-x 0% 0%; |
| #viewer div.today |
added to all hour cells that fall on today's date |
background-color: #eef3f9; |
Useful Techniques:
Background Images
If you want to set a background image to any part of the Calendar, you'll need to 'feed' that image to Reactor. As a part of your second parameter, you could include the following CSS declaration:
"#viewer{
background-image: url('"& FeedReactor( 'MyImage.png'; TO::ImageContainer ) &"');
}"
This code, when included in a CSS override, would show the image from your container field in the background of the calendar (provided the '.hourblock' and 'div.nonwork' elements had a transparent background - otherwise these would obscure the image).
Text and Appointment Colors
Because of the way CSS works, text colors will need to be applied on every element that you want them to show on.
Appointment colors are set by parameters, or overridden by the
JavaScript Overrides. Setting a background color or a text color using the CSS overrides will have no effect.
/groups/docs/search/index.rss?sort=modifiedDate&sortDirection=reverse&tag=blackboxlist/groups/docs/search/?sort=modifiedDate&sortDirection=reverse&tag=blackboxBlackBox ControlsCustomTagSidebarCustomTagSidebar?sort=modifiedDate&sortDirection=reverse&tag=blackbox0/groups/docs/sidebar/CustomTagSidebarmodifiedDate5CustomTagSidebarreverseblackboxBlackBox Controlscustom/groups/docs/search/index.rss?tag=hotlist/groups/docs/search/?tag=hotWhat’s HotHotListHot!?tag=hot9/groups/docs/sidebar/HotListadded a to version number for consistency.samSam Sehnert2012-01-16 00:15:15+00:002012-01-16 00:15:15updated11wendyWendy Wethey2012-01-12 22:05:22+00:002012-01-12 22:05:22updated10wendyWendy Wethey2012-01-12 20:40:54+00:002012-01-12 20:40:54updated9wendyWendy Wethey2012-01-12 20:00:23+00:002012-01-12 20:00:23updated8wendyWendy Wethey2012-01-12 20:00:04+00:002012-01-12 20:00:04updated7craigCraig Saunders2012-01-11 09:24:57+00:002012-01-11 09:24:57updated6Added tag - release notescraigCraig Saunders2012-01-11 09:24:50+00:002012-01-11 09:24:50addTag5Removed tag - delcraigCraig Saunders2012-01-11 09:24:47+00:002012-01-11 09:24:47removeTag4Added tag - delcraigCraig Saunders2012-01-11 09:24:40+00:002012-01-11 09:24:40addTag3Added tag - hotcraigCraig Saunders2012-01-11 09:24:33+00:002012-01-11 09:24:33addTag2First createdcraigCraig Saunders2012-01-11 09:16:25+00:002012-01-11 09:16:25created1wiki2012-01-16T00:15:15+00:00groups/docs/wiki/d40e1FalseRelease Notes for v3.5.8a/groups/docs/wiki/d40e1/Release_Notes_for_v358a.htmlSam Sehnert11 updatesRelease Notes for v3.5.8a
Reactor v3.5.8a incorporates a bunch of tweaks and fixes along with a couple of new features. The installer for Mac OS X Lion now works under non...Falsesam2012-01-16T00:15:15+00:00added applying anchorsamSam Sehnert2012-01-16 00:08:46+00:002012-01-16 00:08:46updated21samSam Sehnert2012-01-16 00:08:16+00:002012-01-16 00:08:16updated20punctuationsamSam Sehnert2012-01-16 00:05:18+00:002012-01-16 00:05:18updated19Updated imagesamSam Sehnert2012-01-16 00:04:31+00:002012-01-16 00:04:31updated18samSam Sehnert2012-01-16 00:03:01+00:002012-01-16 00:03:01updated17samSam Sehnert2012-01-16 00:02:18+00:002012-01-16 00:02:18updated16Refined instructionssamSam Sehnert2012-01-15 23:14:10+00:002012-01-15 23:14:10updated15Added tag - troubleshootingsamSam Sehnert2011-06-27 02:23:28+00:002011-06-27 02:23:28addTag14Removed tag - blackbox managementsamSam Sehnert2011-06-27 02:23:25+00:002011-06-27 02:23:25removeTag13Added tag - blackbox managementsamSam Sehnert2011-06-27 02:23:24+00:002011-06-27 02:23:24addTag12Removed tag - debugsamSam Sehnert2011-06-27 02:23:23+00:002011-06-27 02:23:23removeTag11Added tag - customizationsamSam Sehnert2011-06-27 01:40:54+00:002011-06-27 01:40:54addTag10samSam Sehnert2010-09-30 23:27:31+00:002010-09-30 23:27:31updated9Added tag - hotsamSam Sehnert2010-08-16 05:12:06+00:002010-08-16 05:12:06addTag8Removed tag - advancedsamSam Sehnert2010-08-16 05:12:03+00:002010-08-16 05:12:03removeTag7Added tag - advancedsamSam Sehnert2010-08-16 05:12:01+00:002010-08-16 05:12:01addTag6samSam Sehnert2010-08-16 03:54:43+00:002010-08-16 03:54:43updated5Added tag - debugsamSam Sehnert2010-08-08 22:32:01+00:002010-08-08 22:32:01addTag4Added tag - overridesamSam Sehnert2010-08-08 22:31:54+00:002010-08-08 22:31:54addTag3Added override manager description.samSam Sehnert2010-08-08 22:30:38+00:002010-08-08 22:30:38updated2First additionsamSam Sehnert2010-08-08 22:15:13+00:002010-08-08 22:15:13created1wiki2012-01-16T00:08:46+00:00groups/docs/wiki/f072fFalseOverride Manager/groups/docs/wiki/f072f/Override_Manager.htmlSam Sehnert21 updatesOverride Manager
The Override Manager is a useful tool available in all BlackBoxes which support overrides. It will list all available overrides, and help you und...Falsesam2012-01-16T00:08:46+00:00Added anchors for lite and advanced.samSam Sehnert2012-01-15 23:18:07+00:002012-01-15 23:18:07updated12wendyWendy Wethey2011-10-03 21:53:23+00:002011-10-03 21:53:23updated11wendyWendy Wethey2011-09-01 22:58:47+00:002011-09-01 22:58:47updated10wendyWendy Wethey2011-09-01 22:53:29+00:002011-09-01 22:53:29updated9samSam Sehnert2011-06-30 07:02:03+00:002011-06-30 07:02:03updated8samSam Sehnert2011-06-30 06:52:51+00:002011-06-30 06:52:51updated7samSam Sehnert2011-06-30 05:25:13+00:002011-06-30 05:25:13updated6Added links through to lite blackbox pages.samSam Sehnert2011-06-30 04:49:43+00:002011-06-30 04:49:43updated5Added quick descriptions, but still need to link through to pages.samSam Sehnert2011-06-30 02:23:37+00:002011-06-30 02:23:37updated4Added tag - blackbox managementsamSam Sehnert2011-06-30 01:33:31+00:002011-06-30 01:33:31addTag3Added tag - hotsamSam Sehnert2011-06-30 01:33:26+00:002011-06-30 01:33:26addTag2First createdsamSam Sehnert2011-06-30 00:37:46+00:002011-06-30 00:37:46created1wiki2012-01-15T23:18:07+00:00groups/docs/wiki/5f2d4FalseBuilt in BlackBoxes/groups/docs/wiki/5f2d4/Built_in_BlackBoxes.htmlSam Sehnert12 updatesBuilt in BlackBoxes
Reactor comes bundled with two types of BlackBoxes. Ones that are available with the free version of Reactor, and ones that are only available w...Falsesam2012-01-15T23:18:07+00:00Added Norwegian creditssamSam Sehnert2011-12-20 21:14:49+00:002011-12-20 21:14:49updated14Added tag - overridesamSam Sehnert2011-06-27 02:12:40+00:002011-06-27 02:12:40addTag13Added german to creditssamSam Sehnert2011-04-19 22:00:52+00:002011-04-19 22:00:52updated12Added italian localization creditssamSam Sehnert2011-04-17 22:59:47+00:002011-04-17 22:59:47updated11samSam Sehnert2011-04-15 08:30:13+00:002011-04-15 08:30:13updated10samSam Sehnert2011-04-15 08:29:54+00:002011-04-15 08:29:54updated9fix typo in sp of SwedishcraigCraig Saunders2011-04-15 02:19:30+00:002011-04-15 02:19:30updated8samSam Sehnert2011-04-15 00:44:15+00:002011-04-15 00:44:15updated7Added first documentationsamSam Sehnert2011-04-15 00:43:32+00:002011-04-15 00:43:32updated6Added tag - customizationsamSam Sehnert2011-04-15 00:09:51+00:002011-04-15 00:09:51addTag5Added tag - languagesamSam Sehnert2011-04-15 00:09:41+00:002011-04-15 00:09:41addTag4Added tag - localizationsamSam Sehnert2011-04-15 00:09:39+00:002011-04-15 00:09:39addTag3Added tag - hotsamSam Sehnert2011-04-15 00:09:31+00:002011-04-15 00:09:31addTag2First createdsamSam Sehnert2011-04-15 00:05:20+00:002011-04-15 00:05:20created1wiki2011-12-20T21:14:49+00:00groups/docs/wiki/088b5FalseBlackBox Localization/groups/docs/wiki/088b5/BlackBox_Localization.htmlSam Sehnert14 updatesBlackBox Localization
We've developed a standard localization file for use with our BlackBoxes, which covers the most commonly used error messages, labels and date for...Falsesam2011-12-20T21:14:49+00:00removed beta message.samSam Sehnert2010-02-02 10:06:44+00:002010-02-02 10:06:44updated46Added tag - gantt chartwendyWendy Wethey2009-12-01 01:31:38+00:002009-12-01 01:31:38addTag45Removed tag - unfinishedwendyWendy Wethey2009-12-01 01:31:29+00:002009-12-01 01:31:29removeTag44wendyWendy Wethey2009-12-01 01:02:43+00:002009-12-01 01:02:43updated43wendyWendy Wethey2009-12-01 01:01:07+00:002009-12-01 01:01:07updated42wendyWendy Wethey2009-12-01 00:58:30+00:002009-12-01 00:58:30updated41wendyWendy Wethey2009-11-30 23:26:36+00:002009-11-30 23:26:36updated40wendyWendy Wethey2009-11-30 23:25:37+00:002009-11-30 23:25:37updated39wendyWendy Wethey2009-11-30 23:06:25+00:002009-11-30 23:06:25updated38wendyWendy Wethey2009-11-30 23:06:05+00:002009-11-30 23:06:05updated37wendyWendy Wethey2009-11-30 23:04:55+00:002009-11-30 23:04:55updated36wendyWendy Wethey2009-11-30 23:03:12+00:002009-11-30 23:03:12updated35wendyWendy Wethey2009-11-30 23:02:09+00:002009-11-30 23:02:09updated34wendyWendy Wethey2009-11-30 23:01:36+00:002009-11-30 23:01:36updated33wendyWendy Wethey2009-11-30 23:00:25+00:002009-11-30 23:00:25updated32added filter field name note.samSam Sehnert2009-11-30 02:34:32+00:002009-11-30 02:34:32updated31wendyWendy Wethey2009-11-24 01:49:03+00:002009-11-24 01:49:03updated30wendyWendy Wethey2009-11-24 01:30:28+00:002009-11-24 01:30:28updated29wendyWendy Wethey2009-11-24 01:29:47+00:002009-11-24 01:29:47updated28wendyWendy Wethey2009-11-24 01:15:57+00:002009-11-24 01:15:57updated27wendyWendy Wethey2009-10-27 04:03:11+00:002009-10-27 04:03:11updated26wendyWendy Wethey2009-10-27 03:40:10+00:002009-10-27 03:40:10updated25wendyWendy Wethey2009-10-27 03:18:03+00:002009-10-27 03:18:03updated24Final Beta notessamSam Sehnert2009-10-15 21:34:58+00:002009-10-15 21:34:58updated23craigCraig Saunders2009-10-14 09:13:14+00:002009-10-14 09:13:14updated22samSam Sehnert2009-09-15 01:57:58+00:002009-09-15 01:57:58updated21samSam Sehnert2009-09-15 01:56:58+00:002009-09-15 01:56:58updated20samSam Sehnert2009-09-15 01:56:21+00:002009-09-15 01:56:21updated19Added tag - unfinishedsamSam Sehnert2009-09-15 01:56:15+00:002009-09-15 01:56:15addTag18samSam Sehnert2009-09-15 01:44:00+00:002009-09-15 01:44:00updated17Added tag - betasamSam Sehnert2009-09-09 00:44:10+00:002009-09-09 00:44:10addTag16samSam Sehnert2009-09-09 00:44:01+00:002009-09-09 00:44:01updated15craigCraig Saunders2009-09-04 09:52:55+00:002009-09-04 09:52:55updated14added beta notessamSam Sehnert2009-09-04 04:21:58+00:002009-09-04 04:21:58updated13Added tag - extendedwendyWendy Wethey2009-09-04 04:19:53+00:002009-09-04 04:19:53addTag12Added tag - blackboxwendyWendy Wethey2009-09-04 04:19:27+00:002009-09-04 04:19:27addTag11wendyWendy Wethey2009-09-04 04:15:08+00:002009-09-04 04:15:08updated10wendyWendy Wethey2009-09-04 04:10:54+00:002009-09-04 04:10:54updated9wendyWendy Wethey2009-09-04 04:07:22+00:002009-09-04 04:07:22updated8wendyWendy Wethey2009-09-04 04:02:54+00:002009-09-04 04:02:54updated7wendyWendy Wethey2009-09-04 03:59:54+00:002009-09-04 03:59:54updated6wendyWendy Wethey2009-09-04 03:56:55+00:002009-09-04 03:56:55updated5wendyWendy Wethey2009-09-04 03:53:54+00:002009-09-04 03:53:54updated4wendyWendy Wethey2009-09-04 03:50:54+00:002009-09-04 03:50:54updated3wendyWendy Wethey2009-09-04 03:48:53+00:002009-09-04 03:48:53updated2First additionwendyWendy Wethey2009-09-04 03:45:53+00:002009-09-04 03:45:53created1wiki2011-10-10T23:25:34+00:00groups/docs/wiki/9c8ccFalseGanttChartPro/groups/docs/wiki/9c8cc/GanttChartPro.htmlWendy Wethey46 updatesGanttChartPro
GanttChartPro is a complete overhaul of the GanttChartLite. It enables tasks to be viewed from a resource (e.g. person, room) pers...Falsewendy2011-10-10T23:25:34+00:00hot/groups/docs/search/index.rss?sort=modifiedDate&kind=all&sortDirection=reverse&excludePages=wiki/welcomelist/groups/docs/search/?sort=modifiedDate&kind=all&sortDirection=reverse&excludePages=wiki/welcomeRecent ChangesRecentChangesListUpdates?sort=modifiedDate&kind=all&sortDirection=reverse&excludePages=wiki/welcome0/groups/docs/sidebar/RecentChangesListmodifiedDateallRecent ChangesRecentChangesListUpdateswiki/welcomeNo recent changes.reverse5search
Reactor Implementation Guide
Comments
Steve Wright (unauthenticated)
Sep 26, 2011
A useful css over-ride for the month calendar (when showing appointments) is :
div.day { overflow:auto; }
This enables the scroll bar automatically for a day where there are more appointments than can fit in the allocated space.
They are all loaded, so may as well have access to them and be able to interact with them.