Release date: January 29, 2014 (build 7.7.5639)

CssOnly Mode Enabled by Default

You can switch to the legacy mode using CssOnly = false.

The support for the legacy mode will be phased out in the future.

To make the transition easier, you can use the Traditonal CSS Theme based on the default legacy look:

Default CSS Themes

scheduler_default (DayPilot.Scheduler)

scheduler default css theme

calendar_default (DayPilot.Calendar)

event calendar default css theme

month_default (DayPilot.Month)

monthly event calendar default css theme

navigator_default (DayPilot.Navigator)

calendar navigator default css theme

menu_default (DayPilot.Menu)

context menu default css theme

bubble_default (DayPilot.Bubble)

event bubble default css theme

The date picker uses the navigator_default theme as it is based on the Navigator.

The default theme is now used as the starting configuration in the online theme designer.

New CSS Theme Inspired by Google Calendar

It is a very simple CSS theme that includes almost no styles. It uses rectangular corner and darker event border.

Daily/Weekly Event Calendar

Monthly 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

Demo: http://mvc.daypilot.org/demo/Scheduler/ThemeTraditional

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

Calendar (calendar_traditional)

event calendar traditional css theme

Demo: http://mvc.daypilot.org/demo/Calendar/ThemeTraditional

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

Month (month_traditional)

monthly event calendar traditional css theme

Demo: http://mvc.daypilot.org/demo/Month/ThemeTraditional

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

Auto Cell Width

Fixed Cell Width

scheduler cell width fixed

Auto Cell Width

scheduler cell width auto

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
  • No horizontal scrollbar

Demo: http://mvc.daypilot.org/demo/Scheduler/AutoCellWidth

Floating Events (Scheduler)

In the previous version long events were sometimes difficult to read because the text was hidden.

scheduler floating events false

If the beginning of the event is not visible (for long events than span several days) it displays a special floating div over the event that displays the event HTML.

scheduler floating events true

You can enable/disable it using FloatingEvents property. It is enabled by default. You can test in the main Scheduler demo page:

Floating Time Headers (Scheduler)

In the previous version long header cells were sometimes difficult to read because the text/HTML was hidden.

scheduler floating time headers false

If the beginning of the header 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

You can enable/disable the floating time headers using FloatingTimeHeaders property. It is enabled by default. You can test in the main Scheduler demo page:

Default MoveBy Handling Unified

Calendar, Month,  and Scheduler 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)

When dragging an event over a row that has child nodes it is automatically expanded after a short delay.

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).

Improvements

  • Connection string removed. (build 5626)
  • [Scheduler] Scheduler: .cells.all() added. (build 5626)
  • [Scheduler] Scheduler: auto-expanding tree nodes during drag and drop. (build 5627)
  • [Scheduler] Scheduler: dynamic event loading compares events using id, start, and resource. (build 5628)
  • [Scheduler] Scheduler: text floating (events, time headers). Themes cleanup. (build 5631)
  • [Month] Month: OnBeforeHeaderRender implemented. (build 5632)
  • [Calendar] New themes, calendar demos updated. (build 5636)
  • Themes updated. (build 5636)
  • [Scheduler] Scheduler defaults: PreventParentUsage = false (build 5637)
  • [Scheduler] Scheduler: CellWidthSpec (build 5638)

Fixes

  • Remaining ResolveUrl commands fixed. (build 5626)
  • [Calendar] Calendar: HeaderClickHandling and HeaderClickJavaScript fixed. (build 5629)
  • [Calendar] New defaults: CssOnly = true, EventHeight = 25 (Month). CssClassPrefix -> Theme. Configuration themes removed (calendar, scheduler, month). (build 5633)
  • [Scheduler] New defaults: CssOnly = true, EventHeight = 25 (Month). CssClassPrefix -> Theme. Configuration themes removed (calendar, scheduler, month). (build 5633)
  • [Month] New defaults: CssOnly = true, EventHeight = 25 (Month). CssClassPrefix -> Theme. Configuration themes removed (calendar, scheduler, month). (build 5633)