Release date: January 28, 2014 (build 7.7.3045)
CssOnly Mode Enabled by Default
The CssOnly mode is now enabled by default.
Default CSS Themes
All ASP.NET controls now include a built-in CSS theme. If you don't specify a custom theme using Theme property the default CSS theme will be used. This makes switching to the new version easier - in previous version it was necessary to include a CSS theme stylesheet and specify the theme name.
scheduler_default (DayPilot.Scheduler)
calendar_default (DayPilot.Calendar)
month_default (DayPilot.Month)
navigator_default (DayPilot.Navigator)
menu_default (DayPilot.Menu)
bubble_default (DayPilot.Bubble)
The date picker uses the navigator_default theme as it is based on the Navigator.
New CSS Themes Inspired by Google Calendar
Daily/Weekly Event Calendar
Traditional CSS Themes
These themes are based on the traditional DayPilot look (in !CssOnly mode). You can use them as a starting point when switching to CssOnly mode.
The themes were created using the online theme designer and tweaked a bit (the duration bar border in calendar and scheduler was added manually).
Scheduler (scheduler_traditional)
Demo: http://www.daypilot.org/demo/Scheduler/ThemeTraditional.aspx
Designer: http://themes.daypilot.org/scheduler/theme/m3km5n
Calendar (calendar_traditional)
Demo: http://www.daypilot.org/demo/Calendar/ThemeTraditional.aspx
Designer: http://themes.daypilot.org/calendar/theme/japngi
Month (month_traditional)
Demo: http://www.daypilot.org/demo/Month/ThemeTraditional.aspx
Designer: http://themes.daypilot.org/month/theme/bn47e7
Auto Cell Width
Fixed Cell Width
Auto Cell Width
You can use CellWidthSpec="Auto" to adjust the cell width automatically so the full Scheduler width is used.
Behavior:
- The CellWidth property will be overwritten.
- The width will be recalculated when the browser window size is changed (window.onresize).
- No free space on the right (the grid extends to the right border)
- No horizontal scrollbar.
Demo: http://www.daypilot.org/demo/Scheduler/AutoCellWidth.aspx
Floating Events (Scheduler)
In the previous version long events were difficult to read because the text was hidden.
If the event start is not visible (long events than span several days) it displays a special floating div over the event that displays the event HTML.
You can enable/disable it using FloatingEvents property. It is enabled by default.
Floating Time Headers (Scheduler)
In the previous version long header cells were difficult to read because the text/HTML was hidden.
If the header start or end is not visible (for long headers, especially month and year time header groups) it displays a special floating div over the event that displays the event HTML.
You can enable/disable it using FloatingTimeHeaders property. It is enabled by default.
Default MoveBy Handling Unified
Calendar, Month, and Scheduler controls now use MoveBy="Full" by default.
New Default Settings
Scheduler
- EventHeight = 25
- HeaderHeight = 20
- CellWidth = 40
- MoveBy = "Full"
Calendar
- AllDayEventHeight = 25
- HeaderHeight = 20
- MoveBy = "Full"
Month
- EventHeight = 25
- HeaderHeight = 20
Loading Selected Dimension Properties from CSS
You can specify selection dimension properties in the CSS. This is helpful if the CSS is designed to work with different than default dimension. It will soon be added to the online theme designer as well.
This CSS value will override the value specified using the calendar object.
Loading Scheduler Dimensions from CSS Theme
Event Height (.eventHeight property):
*_event_height { height: 25px; }Header Height (.headerHeight property):
*_header_height { height: 20px; }Replace the asterisk with the theme name.
Loading Event Calendar Dimensions from CSS Theme
All-Day Event Height (.eventHeight property):
*_alldayevent_height { height: 25px; }Header Height (.headerHeight property):
*_header_height { height: 20px; }Replace the asterisk with the theme name.
Loading Monthly Event Calendar Dimensions from CSS Theme
Event Height (.eventHeight property):
*_event_height { height: 25px; }Day Header Height (.headerHeight property):
*_header_height { height: 20px; }Replace the asterisk with the theme name.
Auto-Expanding Tree Nodes on Hover during Drag and Drop Moving (Scheduler)
Business Cell Marked with a Special CSS Class (Scheduler)
The business cells are marked with a special CSS class.
*_cell_business
It is applied at the same level as *_cell so you would define the business cell style like this:
.scheduler_default_cell.scheduler_default_cell_business {
background-color: #fff;
}This class is not applied when you use .drawBlankCells = true and don't handle .onBeforeCellRender event (for performance reasons).
Dropping Support for IE7
For the list of supported browsers please see the compatibility page.
Other API Changes
- CssClassPrefix property is replaced by Theme property
Improvements
- [Scheduler] Scheduler: Cell background image applied correctly. (build 3007)
- [Scheduler] Scheduler: Event rendering optimizations. Builtin scheduler_default theme. CssOnly enabled. (build 3008)
- [Scheduler] Scheduler: Overriding background gradient using BackgroundColor in BeforeTimeHeaderRender, BeforeResHeaderRender. (build 3011)
- Sync. (build 3017)
- [Calendar] Calendar: ExportBitmap() added (auto vertical scroll position). (build 3027)
- [Calendar] Calendar: CssOnly="true" mode enabled by default. Using a default embedded CSS theme. (build 3028)
- [Scheduler] Scheduler: text floating (events, time headers). Themes cleanup. (build 3035)
- [Calendar] Calendar: MoveBy="Full" (new default value). (build 3041)
- [Month] Calendar, Month, Scheduler: Default CSS themes unified. (build 3041)
- [Calendar] Calendar, Month, Scheduler: Default CSS themes unified. (build 3041)
- [Scheduler] Calendar, Month, Scheduler: Default CSS themes unified. (build 3041)
- All demos switched to CssOnly="true". (build 3042)
Fixes
- [Calendar] Calendar: PNG export fixed (ViewType = Day, Week, WorkWeek). (build 3026)
- CssOnly -> true by default (all controls). CssClassPrefix -> Theme (all controls). Default themes. (build 3029)
- DatePicker: CssClassPrefix -> Theme. (build 3041)