Customising the user interface (UI) of the TMS IntraWeb Planner allows you to deliver a scheduling experience that feels native to your web application. The default layout provides a solid foundation, but tailoring the visual elements improves readability and user engagement. Here are the top tips for optimizing your planner’s UI using built the component properties, styles, and custom rendering. Leverage the Built-In Skin Controller
The fastest way to transform the look of your planner is through the TIWPlannerSkinController. Instead of modifying individual sub-components manually, this controller allows you to apply global themes.
Consistency: It ensures all headers, positions, and time slots share a unified color palette.
Efficiency: You can switch between light, dark, or corporate themes with minimal code. Optimise the Timeline and Header Layouts
The Header and TimeLine properties control how users navigate schedules. Standard settings can look cluttered if your time increments are too small.
Adjust Text Alignment: Use the Header.Alignment and Header.VAlignment properties to center text dynamically.
Custom Fonts: Apply distinct font styles via Header.Font to differentiate between resource columns and time slots.
Dynamic Heights: Use Header.Height to provide enough breathing room for multi-line titles or custom icons. Customise Item Appearances Dynamically
Planner items (appointments or tasks) should convey information at a glance. You can change how individual items look based on their data using the OnGetItemDisplayParams event.
Color Coding: Assign different background colors to items based on status, priority, or category.
Font Styling: Bold critical tasks or italicize tentative appointments to establish visual hierarchy.
Border Adjustments: Modify item borders to indicate specific states, such as locked or recurring events. Implement HTML Templating in Planner Items
The TMS IntraWeb Planner supports HTML formatting inside item text, which breaks you out of standard plain-text limitations. Ensure Item.HTML or the global HTML properties are enabled.
Rich Formatting: Use standard tags like , , and to highlight key details.
Layout Control: Insert
Custom Images: Embed small status icons directly into the item text using
A busy grid can overwhelm users. Fine-tuning how the grid lines and time slots render makes the planner much easier to read.
OnDrawDisplaySlot: Utilize this event to background-color specific time ranges, such as marking non-working hours, lunch breaks, or holidays in gray.
Grid Lines: Adjust GridColor and GridLines to soften the background grid, keeping the focus entirely on the scheduled items.
Display Scales: Match the DisplayScale property to your business logic so users do not have to scroll endlessly through empty hours.
To help tailor these tips to your project, could you share a few more details?
What specific version of Delphi/C++Builder and TMS IntraWeb Planner are you using?
What is the primary use case for your planner (e.g., medical booking, resource tracking, conference scheduling)?
Leave a Reply