@@ -1,3 +1,4 @@ +//require "date" Element.addMethods({ center: function( container, element ) { element = $(element); @@ -45,7 +46,7 @@ UI.Calendar = Class.create(UI.Options, { this.container = new Element('div'); this.container.setStyle({ position: 'relative' }); - this.element.addClassName('ui_calendar'+(this.options.theme?' '+this.options.theme+'_ui_calendar':'')).insert({ top: this.container }); + this.element.addClassName('ui-calendar'+(this.options.theme?' ui-calendar__'+this.options.theme:'')).insert({ top: this.container }); this.initDate(this.options.startDate); this.buildTable(); @@ -140,16 +141,16 @@ UI.Calendar = Class.create(UI.Options, { monthDate = day.getDate(); if (day.getMonth() != this.date.getMonth()) { - classNames.push('non_current'); + classNames.push('ui-calendar_non_current'); cell.innerHTML = monthDate; } else { cell.innerHTML = '<a href="#">' + monthDate + '</a>'; - if (this.selectedDay && this.selectedDay.equalsDate(day)) classNames.push('selected'); + if (this.selectedDay && this.selectedDay.equalsDate(day)) classNames.push('ui-calendar_selected'); } - if (today.equalsDate(day)) classNames.push('today'); - if (cell.hasClassName('weekend')) classNames.push('weekend'); - if (cell.hasClassName('first')) classNames.push('first'); - if (cell.hasClassName('last')) classNames.push('last'); + if (today.equalsDate(day)) classNames.push('ui-calendar_today'); + if (cell.hasClassName('ui-calendar_weekend')) classNames.push('ui-calendar_weekend'); + if (cell.hasClassName('ui-calendar_first')) classNames.push('ui-calendar_first'); + if (cell.hasClassName('ui-calendar_last')) classNames.push('ui-calendar_last'); cell.className = classNames.join(' '); } @@ -160,7 +161,7 @@ UI.Calendar = Class.create(UI.Options, { this.daysRow.update(''); $R(0, 6).each(function(n){ this.daysRow.insert({ - bottom: new Element('th', {'class': 'dayname'}).update(dayNames[n].truncate(2,'')) + bottom: new Element('th', {'class': 'ui-calendar_dayname'}).update(dayNames[n].truncate(2,'')) }); }.bind(this)); }, @@ -169,16 +170,16 @@ UI.Calendar = Class.create(UI.Options, { event.stop(); var element = event.element(); if (element.tagName == 'A') element = element.up('td'); - if (element.hasClassName('non_current')) return; + if (element.hasClassName('ui-calendar_non_current')) return; var day = element.date; this.selectedDay = day; - $w('selected selected_next selected_prev').each(function(e){ this.table.select('.'+e).invoke('removeClassName', e); }.bind(this)); + $w('ui-calendar_selected ui-calendar_selected_next ui-calendar_selected_prev').each(function(e){ this.table.select('.'+e).invoke('removeClassName', e); }.bind(this)); - element.addClassName('selected'); + element.addClassName('ui-calendar_selected'); var next = element.next(), prev = element.previous(); - if (next) next.addClassName('selected_next'); - if (prev) prev.addClassName('selected_prev'); + if (next) next.addClassName('ui-calendar_selected_next'); + if (prev) prev.addClassName('ui-calendar_selected_prev'); this.fire('click', { date: day, @@ -239,9 +240,9 @@ UI.Calendar = Class.create(UI.Options, { var row = new Element('tr'); week.each(function(day, i){ var cell = new Element('td'); - if (i == 0 || i == 6) cell.addClassName('weekend'); - if (i == 0) cell.addClassName('first'); - if (i == 6) cell.addClassName('last'); + if (i == 0 || i == 6) cell.addClassName('ui-calendar_weekend'); + if (i == 0) cell.addClassName('ui-calendar_first'); + if (i == 6) cell.addClassName('ui-calendar_last'); row.insert({ bottom: cell}); }); tbody.insert({ bottom: row }); @@ -254,9 +255,9 @@ UI.Calendar = Class.create(UI.Options, { }, buildSelector: function() { - this.selector = new Element('div').addClassName('selector').hide(); + this.selector = new Element('div').addClassName('ui-calendar_selector').hide(); - this.mask = new Element('div').hide().addClassName('ui_calendar_mask').setOpacity(0.3); + this.mask = new Element('div').hide().addClassName('ui-calendar_mask').setOpacity(0.3); this.container.insert({ bottom: this.selector }) .insert({ bottom: this.mask }); @@ -289,7 +290,7 @@ UI.Calendar = Class.create(UI.Options, { this.selector.insert({ bottom: input }); var createButton = function(name, onClick) { - return new Element('span').addClassName('ui_calendar_button') + return new Element('span').addClassName('ui-calendar_button') .insert({ top: new Element('button', {type: 'button'}).update(name) .observe('click', onClick.bind(this)) }); }; @@ -307,7 +308,7 @@ UI.Calendar = Class.create(UI.Options, { bottom: new Element('div', { textAlign: 'center', width: '100%' - }).addClassName('ui_calendar_button_div') + }).addClassName('ui-calendar_button_div') .insert({ bottom: btnCn }) .insert({ bottom: btnOk }) }); @@ -334,7 +335,7 @@ UI.Calendar = Class.create(UI.Options, { }; $w('prev next').each(function(d){ - this[d + 'Link'] = new Element('a').addClassName(d); + this[d + 'Link'] = new Element('a').addClassName('ui-calendar_' + d); initMonthLink(this[d + 'Link'], d, this); }.bind(this)); @@ -342,14 +343,14 @@ UI.Calendar = Class.create(UI.Options, { href: '#' }).update(UI.Calendar.Options.MONTHS[date.getMonth()] + ' ' + date.getFullYear()).observe('click', this.onMonthClick.bind(this)); - var headerDiv = new Element('div').addClassName('header') + var headerDiv = new Element('div').addClassName('ui-calendar_header') .insert({ bottom: this.prevLink }) .insert({ bottom: this.headerSpan }) .insert({ bottom: this.nextLink }); this.updateDaysRow(); - header.insert({ bottom: new Element('tr').insert({ top: new Element('th', {colspan: 7}).update(headerDiv).addClassName('monthname') }) }) + header.insert({ bottom: new Element('tr').insert({ top: new Element('th', {colspan: 7}).update(headerDiv).addClassName('ui-calendar_monthname') }) }) .insert({ bottom: this.daysRow }); this.table.insert({ top: header }); @@ -368,7 +369,9 @@ UI.Calendar = Class.create(UI.Options, { startDay: function(date) { var startDate = date.firstOfMonth(); startDate.setDate(-(startDate.getDay() % 7)); - startDate.setDate(startDate.getDate() + 1 + parseInt(this.options.startWeekday)); + startDate.setDate(startDate.getDate() + 1 + parseInt(this.options.startWeekday)); + if(startDate.getDate()>1 && startDate.getDate()<6) + startDate.setDate(startDate.getDate()-7); return startDate; }, src/calendar/calendar.js @@ -1,25 +1,25 @@ -.ui_calendar { +.ui-calendar { position: relative; float: left; } -.ui_calendar label { +.ui-calendar label { display:block; } -.ui_calendar .selector { +.ui-calendar .ui-calendar_selector { background-color: #ffffff; width: 110px; padding: 10px; border:1px solid #808080; } -.ui_calendar .ui_calendar_button_div { +.ui-calendar .ui-calendar_button_div { width: 100%; text-align: center; margin-top: 10px; } -.ui_calendar a { +.ui-calendar a { text-decoration: none; } -.ui_calendar .ui_calendar_mask { +.ui-calendar .ui-calendar_mask { display: block; background-color: #000000; opacity: 0.50; themes/calendar/calendar.css @@ -1,12 +1,12 @@ -.ical_ui_calendar { +.ui-calendar__ical { background: transparent url(ical/container-background.png) top left repeat-x; font-family: "Lucida Grande","Bitstream Vera Sans","Verdana",sans-serif; } -.ical_ui_calendar table { +.ui-calendar__ical table { border-collapse: collapse; border-spacing: 0; } -.ical_ui_calendar td { +.ui-calendar__ical td { border: none; height: 25px; width: 27px; @@ -14,50 +14,57 @@ background: transparent url(ical/cell-background.png) top left no-repeat; padding: 0; } -.ical_ui_calendar thead { +.ui-calendar__ical thead { height: 36px; background: transparent url(ical/thead-background.png) top left repeat-x; } -.ical_ui_calendar th, .ical_ui_calendar td, .ical_ui_calendar td a { +.ui-calendar__ical th, .ui-calendar__ical td, .ui-calendar__ical td a { font-size: 13px; font-weight: bold; text-align: center; color: #333333; text-shadow: 0 1px 1px #fff; } -.ical_ui_calendar td a { + +.ui-calendar__ical td a { display: block; text-decoration:none; text-shadow: 0 1px 1px #fff; font-weight: bold; } -.ical_ui_calendar th.dayname { +.ui-calendar__ical th.ui-calendar_dayname { font-size: 9px; color: #333; text-shadow: 1px 1px 1px #fff; - line-height: 14px; + line-height: 13px; + padding:0; background: transparent url(ical/thead-background.png) 0 -15px repeat-x ; } -.ical_ui_calendar td.selected { +.ui-calendar__ical td.ui-calendar_selected { background: #0072e2 url(ical/selected-cell.png) top left repeat-x; } -.ical_ui_calendar td.selected, .ical_ui_calendar td.selected a, -.ical_ui_calendar td.today, .ical_ui_calendar td.today a { +.ui-calendar__ical td.ui-calendar_selected, .ui-calendar__ical td.ui-calendar_selected a, +.ui-calendar__ical td.ui-calendar_today, .ui-calendar__ical td.ui-calendar_today a { color: #fff; text-shadow: 0 1px 1px #000; } -.ical_ui_calendar td.today { +.ui-calendar__ical td.ui-calendar_today { background: #fff url(ical/today-cell.png) no-repeat top left; } -.ical_ui_calendar td.non_current { +.ui-calendar__ical td.ui-calendar_non_current { background: #fff url(ical/cell-outside.png) no-repeat top left; } -.ical_ui_calendar td.non_current, .ical_ui_calendar td.non_current a { +.ui-calendar__ical td.ui-calendar_non_current, .ui-calendar__ical td.ui-calendar_non_current a { color: #a4a4a4; text-shadow: 0 1px 1px #fff; } -.ical_ui_calendar th .prev, -.ical_ui_calendar th .next { + +.ui-calendar__ical .ui-calendar_header a { + color: #333; + text-shadow: 0 1px 1px #fff; +} +.ui-calendar__ical th .ui-calendar_prev, +.ui-calendar__ical th .ui-calendar_next { cursor: pointer; top: 4px; bottom: 0; @@ -66,20 +73,18 @@ display: block; position: absolute; } -.ical_ui_calendar th .prev { +.ui-calendar__ical th .ui-calendar_prev { left: 0; margin-left: 0.4em; background: transparent url(ical/buttons-sprite.png) no-repeat 0 0; } -.ical_ui_calendar th .next { +.ui-calendar__ical th .ui-calendar_next { right: 0; margin-right: 0.4em; background: transparent url(ical/buttons-sprite.png) no-repeat -26px 0; } -.ical_ui_calendar .header a { - color: #333; - text-shadow: 0 1px 1px #fff; -} -.ical_ui_calendar .header { - height: 15px; + +.ui-calendar__ical thead tr,.ui-calendar__ical th { + height:15px; } + themes/calendar/ical.css @@ -1,19 +1,19 @@ -.osx_ui_calendar { +.ui-calendar__osx { padding: 5px; font-size:10px; font-family: "Lucida Grande","Bitstream Vera Sans","Verdana",sans-serif; } -.osx_ui_calendar table { +.ui-calendar__osx table { border-collapse: collapse; border-spacing: 0pt; } -.osx_ui_calendar th { +.ui-calendar__osx th { vertical-align: middle; width: 1.8em; font-size:10px; } -.osx_ui_calendar th .prev, -.osx_ui_calendar th .next { +.ui-calendar__osx th .ui-calendar_prev, +.ui-calendar__osx th .ui-calendar_next { cursor: pointer; top: 0pt; bottom: 0pt; @@ -21,17 +21,17 @@ display: block; position: absolute; } -.osx_ui_calendar th .prev { +.ui-calendar__osx th .ui-calendar_prev { left: 0px; margin-left: 0.4em; background: transparent url(osx/buttons-sprite.png) no-repeat 0px 0px; } -.osx_ui_calendar th .next { +.ui-calendar__osx th .ui-calendar_next { right: 0px; margin-right: 0.4em; background: transparent url(osx/buttons-sprite.png) no-repeat -26px 0px; } -.osx_ui_calendar th .header { +.ui-calendar__osx th .ui-calendar_header { font-weight: bold; text-align: center; position: relative; @@ -40,41 +40,41 @@ vertical-align: top; margin-bottom: 5px; } -.osx_ui_calendar td { +.ui-calendar__osx td { background: #ffffff url(osx/day-sprite.png) repeat-x -32px 0px; text-align: center; font-size:10px; height: 16px; line-height: 16px; } -.osx_ui_calendar td a { +.ui-calendar__osx td a { color: #000000; display: block; text-decoration: none; } -.osx_ui_calendar td.today { +.ui-calendar__osx td.ui-calendar_today { background: #ffffff url(osx/today-sprite.png) repeat-x -32px 0px; } -.osx_ui_calendar td.today a { +.ui-calendar__osx td.ui-calendar_today a { color: #ffffff; } -.osx_ui_calendar td.selected { +.ui-calendar__osx td.ui-calendar_selected { background: #ffffff url(osx/selectday-sprite.png) repeat-x -32px 0px; } -.osx_ui_calendar td.selected a { +.ui-calendar__osx td.ui-calendar_selected a { font-weight: bold; color: #ffffff; } -.osx_ui_calendar td.non_current { +.ui-calendar__osx td.ui-calendar_non_current { color: #A6A6A6; cursor: default; } -.osx_ui_calendar td.first { +.ui-calendar__osx td.ui-calendar_first { background-position: 0px -18px; } -.osx_ui_calendar td.last { +.ui-calendar__osx td.ui-calendar_last { background-position: top right; } -.osx_ui_calendar td.outside { +.ui-calendar__osx td.ui-calendar_outside { color: silver; } \ No newline at end of file themes/calendar/osx.css 0010ec6275be172bb812569a1d24fb2d1d7c7e66 Sven G. Brönstrup broenstrup@spom.net http://github.com/starpeak/prototypeui/commit/af78fc3c1ec4909865b0f2180a8460757eea1d96 af78fc3c1ec4909865b0f2180a8460757eea1d96

2008-06-30T15:57:54-07:00

Reworked calendar css to use prefix ui-calendar Fixed a IE6 CSS bug in calendar Fixed bug not displaying day 1 if it is the last weekday c35e01aeae090a20ebad11eda5fb9c0749d6b6cf Sven G. Brönstrup broenstrup@spom.net