DayPilot Pro for ASP.NET WebForms 7.7

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)

scheduler-default-css-theme.png

calendar_default (DayPilot.Calendar)

event-calendar-default-css-theme.png

month_default (DayPilot.Month)

monthly-event-calendar-default-css-theme.png

navigator_default (DayPilot.Navigator)

calendar-navigator-default-css-theme.png

menu_default (DayPilot.Menu)

context-menu-default-css-theme.png

bubble_default (DayPilot.Bubble)

event-bubble-default-css-theme.png

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)

scheduler-traditional-css-theme.png

Demo: http://www.daypilot.org/demo/Scheduler/ThemeTraditional.aspx

Designer: http://themes.daypilot.org/scheduler/theme/m3km5n

Calendar (calendar_traditional)

event-calendar-traditional-css-theme.png

Demo: http://www.daypilot.org/demo/Calendar/ThemeTraditional.aspx

Designer: http://themes.daypilot.org/calendar/theme/japngi

Month (month_traditional)

monthly-event-calendar-traditional-css-theme.png

Demo: http://www.daypilot.org/demo/Month/ThemeTraditional.aspx

Designer: http://themes.daypilot.org/month/theme/bn47e7

Auto Cell Width

Fixed Cell Width

scheduler-cell-width-fixed.png

Auto Cell Width

scheduler-cell-width-auto.png

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.

scheduler-floating-events-false.png

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.

scheduler-floating-events-true.png

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.

scheduler-floating-time-headers-false.png

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.

scheduler-floating-time-headers-true.png

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)

Main menu

DayPilot for JavaScript, ASP.NET WebForms, ASP.NET MVC, Java