From 2ea4014badeee7ccaee7f66303a131d9789f62bc Mon Sep 17 00:00:00 2001 From: jimi Date: Sun, 15 Mar 2009 18:22:18 -0500 Subject: [PATCH] Add and enable calendar date select --- app/views/layouts/application.html.erb | 2 + config/environment.rb | 3 + public/blank_iframe.html | 2 + .../images/calendar_date_select/calendar.gif | Bin 0 -> 581 bytes .../calendar_date_select.js | 443 ++++++++++++++++++ .../calendar_date_select/format_american.js | 34 ++ .../calendar_date_select/format_db.js | 27 ++ .../calendar_date_select/format_euro_24hr.js | 7 + .../format_euro_24hr_ymd.js | 7 + .../calendar_date_select/format_finnish.js | 32 ++ .../format_hyphen_ampm.js | 37 ++ .../calendar_date_select/format_iso_date.js | 46 ++ .../calendar_date_select/format_italian.js | 24 + .../calendar_date_select/locale/de.js | 11 + .../calendar_date_select/locale/fi.js | 10 + .../calendar_date_select/locale/fr.js | 10 + .../calendar_date_select/locale/pl.js | 10 + .../calendar_date_select/locale/pt.js | 11 + .../calendar_date_select/locale/ru.js | 10 + public/stylesheets/application.css | 117 +++-- .../stylesheets/calendar_date_select/blue.css | 130 +++++ .../calendar_date_select/default.css | 135 ++++++ .../calendar_date_select/plain.css | 128 +++++ .../stylesheets/calendar_date_select/red.css | 135 ++++++ .../calendar_date_select/silver.css | 133 ++++++ 25 files changed, 1477 insertions(+), 27 deletions(-) create mode 100644 public/blank_iframe.html create mode 100644 public/images/calendar_date_select/calendar.gif create mode 100644 public/javascripts/calendar_date_select/calendar_date_select.js create mode 100644 public/javascripts/calendar_date_select/format_american.js create mode 100644 public/javascripts/calendar_date_select/format_db.js create mode 100644 public/javascripts/calendar_date_select/format_euro_24hr.js create mode 100644 public/javascripts/calendar_date_select/format_euro_24hr_ymd.js create mode 100644 public/javascripts/calendar_date_select/format_finnish.js create mode 100644 public/javascripts/calendar_date_select/format_hyphen_ampm.js create mode 100644 public/javascripts/calendar_date_select/format_iso_date.js create mode 100644 public/javascripts/calendar_date_select/format_italian.js create mode 100644 public/javascripts/calendar_date_select/locale/de.js create mode 100644 public/javascripts/calendar_date_select/locale/fi.js create mode 100644 public/javascripts/calendar_date_select/locale/fr.js create mode 100644 public/javascripts/calendar_date_select/locale/pl.js create mode 100644 public/javascripts/calendar_date_select/locale/pt.js create mode 100644 public/javascripts/calendar_date_select/locale/ru.js create mode 100644 public/stylesheets/calendar_date_select/blue.css create mode 100644 public/stylesheets/calendar_date_select/default.css create mode 100644 public/stylesheets/calendar_date_select/plain.css create mode 100644 public/stylesheets/calendar_date_select/red.css create mode 100644 public/stylesheets/calendar_date_select/silver.css diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 2fd1e82..81b90c3 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -3,7 +3,9 @@ <%= h(yield(:title) || "Untitled") %> + <%= javascript_include_tag :defaults %> <%= stylesheet_link_tag 'reset', 'application' %> + <%= calendar_date_select_includes %> <%= yield(:head) %> diff --git a/config/environment.rb b/config/environment.rb index bfea5b4..7353db7 100644 --- a/config/environment.rb +++ b/config/environment.rb @@ -28,6 +28,8 @@ Rails::Initializer.run do |config| # config.gem "sqlite3-ruby", :lib => "sqlite3" # config.gem "aws-s3", :lib => "aws/s3" + config.gem "calendar_date_select" + # Only load the plugins named here, in the order given. By default, all plugins # in vendor/plugins are loaded in alphabetical order. # :all can be used as a placeholder for all plugins not explicitly named @@ -73,3 +75,4 @@ Rails::Initializer.run do |config| # Please note that observers generated using script/generate observer need to have an _observer suffix # config.active_record.observers = :cacher, :garbage_collector, :forum_observer end +CalendarDateSelect.format = :american diff --git a/public/blank_iframe.html b/public/blank_iframe.html new file mode 100644 index 0000000..e5bd1f4 --- /dev/null +++ b/public/blank_iframe.html @@ -0,0 +1,2 @@ + + diff --git a/public/images/calendar_date_select/calendar.gif b/public/images/calendar_date_select/calendar.gif new file mode 100644 index 0000000000000000000000000000000000000000..6b7b7ca96eeb500ed1daff8d970f9e30482ff637 GIT binary patch literal 581 zcmZ?wbhEHb6krfwc;?OU|KG2lKYy-VxpL{!rC)x0*|>4z&tE@Rty;Ba&6>4q*RDVL zYR}D2`)_|*y7|!TYk$r@`?cx9>&#_$A{#d5ta;Rb>f7`SKLcx4EMLC7eC4h6XI~a9 zzkT@br+^9PH=ccU;J|_AeQzghyT5V$y5OdL&08L=J@e|!lkW=_ELgX0okP*q&fU+e zHa_k?@Ve#1kL=B_^A=p~Iq)iJ#>I|3FI@YsMD(3H^7K#2>Zel242OrO7u$_nH{Gu^UAw{Z=+V71?AJYCy?*tqiRt>$8(yE^d4Kr)^QgPW8F3Hh oE37_30#W) *before* it includes calendar_date_select.js (.g. <%= calendar_date_select_includes %>)."); +if (Prototype.Version < "1.6") alert("Prototype 1.6.0 is required. If using earlier version of prototype, please use calendar_date_select version 1.8.3"); + +Element.addMethods({ + purgeChildren: function(element) { $A(element.childNodes).each(function(e){$(e).remove();}); }, + build: function(element, type, options, style) { + var newElement = Element.buildAndAppend(type, options, style); + element.appendChild(newElement); + return newElement; + } +}); + +Element.buildAndAppend = function(type, options, style) +{ + var e = $(document.createElement(type)); + $H(options).each(function(pair) { e[pair.key] = pair.value }); + if (style) e.setStyle(style); + return e; +}; +nil = null; + +Date.one_day = 24*60*60*1000; +Date.weekdays = $w("S M T W T F S"); +Date.first_day_of_week = 0; +Date.months = $w("January February March April May June July August September October November December" ); +Date.padded2 = function(hour) { var padded2 = parseInt(hour, 10); if (hour < 10) padded2 = "0" + padded2; return padded2; } +Date.prototype.getPaddedMinutes = function() { return Date.padded2(this.getMinutes()); } +Date.prototype.getAMPMHour = function() { var hour = this.getHours(); return (hour == 0) ? 12 : (hour > 12 ? hour - 12 : hour ) } +Date.prototype.getAMPM = function() { return (this.getHours() < 12) ? "AM" : "PM"; } +Date.prototype.stripTime = function() { return new Date(this.getFullYear(), this.getMonth(), this.getDate());}; +Date.prototype.daysDistance = function(compare_date) { return Math.round((compare_date - this) / Date.one_day); }; +Date.prototype.toFormattedString = function(include_time){ + var hour, str; + str = Date.months[this.getMonth()] + " " + this.getDate() + ", " + this.getFullYear(); + + if (include_time) { hour = this.getHours(); str += " " + this.getAMPMHour() + ":" + this.getPaddedMinutes() + " " + this.getAMPM() } + return str; +} +Date.parseFormattedString = function(string) { return new Date(string);} +Math.floor_to_interval = function(n, i) { return Math.floor(n/i) * i;} +window.f_height = function() { return( [window.innerHeight ? window.innerHeight : null, document.documentElement ? document.documentElement.clientHeight : null, document.body ? document.body.clientHeight : null].select(function(x){return x>0}).first()||0); } +window.f_scrollTop = function() { return ([window.pageYOffset ? window.pageYOffset : null, document.documentElement ? document.documentElement.scrollTop : null, document.body ? document.body.scrollTop : null].select(function(x){return x>0}).first()||0 ); } + +_translations = { + "OK": "OK", + "Now": "Now", + "Today": "Today", + "Clear": "Clear" +} +SelectBox = Class.create(); +SelectBox.prototype = { + initialize: function(parent_element, values, html_options, style_options) { + this.element = $(parent_element).build("select", html_options, style_options); + this.populate(values); + }, + populate: function(values) { + this.element.purgeChildren(); + var that = this; $A(values).each(function(pair) { if (typeof(pair)!="object") {pair = [pair, pair]}; that.element.build("option", { value: pair[1], innerHTML: pair[0]}) }); + }, + setValue: function(value) { + var e = this.element; + var matched = false; + $R(0, e.options.length - 1 ).each(function(i) { if(e.options[i].value==value.toString()) {e.selectedIndex = i; matched = true;}; } ); + return matched; + }, + getValue: function() { return $F(this.element)} +} +CalendarDateSelect = Class.create(); +CalendarDateSelect.prototype = { + initialize: function(target_element, options) { + this.target_element = $(target_element); // make sure it's an element, not a string + if (!this.target_element) { alert("Target element " + target_element + " not found!"); return false;} + if (this.target_element.tagName != "INPUT") this.target_element = this.target_element.down("INPUT") + + this.target_element.calendar_date_select = this; + this.last_click_at = 0; + // initialize the date control + this.options = $H({ + embedded: false, + popup: nil, + time: false, + buttons: true, + clear_button: true, + year_range: 10, + close_on_click: nil, + minute_interval: 5, + popup_by: this.target_element, + month_year: "dropdowns", + onchange: this.target_element.onchange, + valid_date_check: nil + }).merge(options || {}); + this.use_time = this.options.get("time"); + this.parseDate(); + this.callback("before_show") + this.initCalendarDiv(); + if(!this.options.get("embedded")) { + this.positionCalendarDiv() + // set the click handler to check if a user has clicked away from the document + Event.observe(document, "mousedown", this.closeIfClickedOut_handler = this.closeIfClickedOut.bindAsEventListener(this)); + Event.observe(document, "keypress", this.keyPress_handler = this.keyPress.bindAsEventListener(this)); + } + this.callback("after_show") + }, + positionCalendarDiv: function() { + var above = false; + var c_pos = this.calendar_div.cumulativeOffset(), c_left = c_pos[0], c_top = c_pos[1], c_dim = this.calendar_div.getDimensions(), c_height = c_dim.height, c_width = c_dim.width; + var w_top = window.f_scrollTop(), w_height = window.f_height(); + var e_dim = $(this.options.get("popup_by")).cumulativeOffset(), e_top = e_dim[1], e_left = e_dim[0], e_height = $(this.options.get("popup_by")).getDimensions().height, e_bottom = e_top + e_height; + + if ( (( e_bottom + c_height ) > (w_top + w_height)) && ( e_bottom - c_height > w_top )) above = true; + var left_px = e_left.toString() + "px", top_px = (above ? (e_top - c_height ) : ( e_top + e_height )).toString() + "px"; + + this.calendar_div.style.left = left_px; this.calendar_div.style.top = top_px; + + this.calendar_div.setStyle({visibility:""}); + + // draw an iframe behind the calendar -- ugly hack to make IE 6 happy + if(navigator.appName=="Microsoft Internet Explorer") this.iframe = $(document.body).build("iframe", {src: "javascript:false", className: "ie6_blocker"}, { left: left_px, top: top_px, height: c_height.toString()+"px", width: c_width.toString()+"px", border: "0px"}) + }, + initCalendarDiv: function() { + if (this.options.get("embedded")) { + var parent = this.target_element.parentNode; + var style = {} + } else { + var parent = document.body + var style = { position:"absolute", visibility: "hidden", left:0, top:0 } + } + this.calendar_div = $(parent).build('div', {className: "calendar_date_select"}, style); + + var that = this; + // create the divs + $w("top header body buttons footer bottom").each(function(name) { + eval("var " + name + "_div = that." + name + "_div = that.calendar_div.build('div', { className: 'cds_"+name+"' }, { clear: 'left'} ); "); + }); + + this.initHeaderDiv(); + this.initButtonsDiv(); + this.initCalendarGrid(); + this.updateFooter(" "); + + this.refresh(); + this.setUseTime(this.use_time); + }, + initHeaderDiv: function() { + var header_div = this.header_div; + this.close_button = header_div.build("a", { innerHTML: "x", href:"#", onclick:function () { this.close(); return false; }.bindAsEventListener(this), className: "close" }); + this.next_month_button = header_div.build("a", { innerHTML: ">", href:"#", onclick:function () { this.navMonth(this.date.getMonth() + 1 ); return false; }.bindAsEventListener(this), className: "next" }); + this.prev_month_button = header_div.build("a", { innerHTML: "<", href:"#", onclick:function () { this.navMonth(this.date.getMonth() - 1 ); return false; }.bindAsEventListener(this), className: "prev" }); + + if (this.options.get("month_year")=="dropdowns") { + this.month_select = new SelectBox(header_div, $R(0,11).map(function(m){return [Date.months[m], m]}), {className: "month", onchange: function () { this.navMonth(this.month_select.getValue()) }.bindAsEventListener(this)}); + this.year_select = new SelectBox(header_div, [], {className: "year", onchange: function () { this.navYear(this.year_select.getValue()) }.bindAsEventListener(this)}); + this.populateYearRange(); + } else { + this.month_year_label = header_div.build("span") + } + }, + initCalendarGrid: function() { + var body_div = this.body_div; + this.calendar_day_grid = []; + var days_table = body_div.build("table", { cellPadding: "0px", cellSpacing: "0px", width: "100%" }) + // make the weekdays! + var weekdays_row = days_table.build("thead").build("tr"); + Date.weekdays.each( function(weekday) { + weekdays_row.build("th", {innerHTML: weekday}); + }); + + var days_tbody = days_table.build("tbody") + // Make the days! + var row_number = 0, weekday; + for(var cell_index = 0; cell_index<42; cell_index++) + { + weekday = (cell_index+Date.first_day_of_week ) % 7; + if ( cell_index % 7==0 ) days_row = days_tbody.build("tr", {className: 'row_'+row_number++}); + (this.calendar_day_grid[cell_index] = days_row.build("td", { + calendar_date_select: this, + onmouseover: function () { this.calendar_date_select.dayHover(this); }, + onmouseout: function () { this.calendar_date_select.dayHoverOut(this) }, + onclick: function() { this.calendar_date_select.updateSelectedDate(this, true); }, + className: (weekday==0) || (weekday==6) ? " weekend" : "" //clear the class + }, + { cursor: "pointer" } + )).build("div"); + this.calendar_day_grid[cell_index]; + } + }, + initButtonsDiv: function() + { + var buttons_div = this.buttons_div; + if (this.options.get("time")) + { + var blank_time = $A(this.options.get("time")=="mixed" ? [[" - ", ""]] : []); + buttons_div.build("span", {innerHTML:"@", className: "at_sign"}); + + var t = new Date(); + this.hour_select = new SelectBox(buttons_div, + blank_time.concat($R(0,23).map(function(x) {t.setHours(x); return $A([t.getAMPMHour()+ " " + t.getAMPM(),x])} )), + { + calendar_date_select: this, + onchange: function() { this.calendar_date_select.updateSelectedDate( { hour: this.value });}, + className: "hour" + } + ); + buttons_div.build("span", {innerHTML:":", className: "seperator"}); + var that = this; + this.minute_select = new SelectBox(buttons_div, + blank_time.concat($R(0,59).select(function(x){return (x % that.options.get('minute_interval')==0)}).map(function(x){ return $A([ Date.padded2(x), x]); } ) ), + { + calendar_date_select: this, + onchange: function() { this.calendar_date_select.updateSelectedDate( {minute: this.value }) }, + className: "minute" + } + ); + + } else if (! this.options.get("buttons")) buttons_div.remove(); + + if (this.options.get("buttons")) { + buttons_div.build("span", {innerHTML: " "}); + if (this.options.get("time")=="mixed" || !this.options.get("time")) b = buttons_div.build("a", { + innerHTML: _translations["Today"], + href: "#", + onclick: function() {this.today(false); return false;}.bindAsEventListener(this) + }); + + if (this.options.get("time")=="mixed") buttons_div.build("span", {innerHTML: " | ", className:"button_seperator"}) + + if (this.options.get("time")) b = buttons_div.build("a", { + innerHTML: _translations["Now"], + href: "#", + onclick: function() {this.today(true); return false}.bindAsEventListener(this) + }); + + if (!this.options.get("embedded") && !this.closeOnClick()) + { + buttons_div.build("span", {innerHTML: " | ", className:"button_seperator"}) + buttons_div.build("a", { innerHTML: _translations["OK"], href: "#", onclick: function() {this.close(); return false;}.bindAsEventListener(this) }); + } + if (this.options.get('clear_button')) { + buttons_div.build("span", {innerHTML: " | ", className:"button_seperator"}) + buttons_div.build("a", { innerHTML: _translations["Clear"], href: "#", onclick: function() {this.clearDate(); if (!this.options.get("embedded")) this.close(); return false;}.bindAsEventListener(this) }); + } + } + }, + refresh: function () + { + this.refreshMonthYear(); + this.refreshCalendarGrid(); + + this.setSelectedClass(); + this.updateFooter(); + }, + refreshCalendarGrid: function () { + this.beginning_date = new Date(this.date).stripTime(); + this.beginning_date.setDate(1); + this.beginning_date.setHours(12); // Prevent daylight savings time boundaries from showing a duplicate day + var pre_days = this.beginning_date.getDay() // draw some days before the fact + if (pre_days < 3) pre_days += 7; + this.beginning_date.setDate(1 - pre_days + Date.first_day_of_week); + + var iterator = new Date(this.beginning_date); + + var today = new Date().stripTime(); + var this_month = this.date.getMonth(); + vdc = this.options.get("valid_date_check"); + for (var cell_index = 0;cell_index<42; cell_index++) + { + day = iterator.getDate(); month = iterator.getMonth(); + cell = this.calendar_day_grid[cell_index]; + Element.remove(cell.childNodes[0]); div = cell.build("div", {innerHTML:day}); + if (month!=this_month) div.className = "other"; + cell.day = day; cell.month = month; cell.year = iterator.getFullYear(); + if (vdc) { if (vdc(iterator.stripTime())) cell.removeClassName("disabled"); else cell.addClassName("disabled") }; + iterator.setDate( day + 1); + } + + if (this.today_cell) this.today_cell.removeClassName("today"); + + if ( $R( 0, 41 ).include(days_until = this.beginning_date.stripTime().daysDistance(today)) ) { + this.today_cell = this.calendar_day_grid[days_until]; + this.today_cell.addClassName("today"); + } + }, + refreshMonthYear: function() { + var m = this.date.getMonth(); + var y = this.date.getFullYear(); + // set the month + if (this.options.get("month_year") == "dropdowns") + { + this.month_select.setValue(m, false); + + var e = this.year_select.element; + if (this.flexibleYearRange() && (!(this.year_select.setValue(y, false)) || e.selectedIndex <= 1 || e.selectedIndex >= e.options.length - 2 )) this.populateYearRange(); + + this.year_select.setValue(y); + + } else { + this.month_year_label.update( Date.months[m] + " " + y.toString() ); + } + }, + populateYearRange: function() { + this.year_select.populate(this.yearRange().toArray()); + }, + yearRange: function() { + if (!this.flexibleYearRange()) + return $R(this.options.get("year_range")[0], this.options.get("year_range")[1]); + + var y = this.date.getFullYear(); + return $R(y - this.options.get("year_range"), y + this.options.get("year_range")); + }, + flexibleYearRange: function() { return (typeof(this.options.get("year_range")) == "number"); }, + validYear: function(year) { if (this.flexibleYearRange()) { return true;} else { return this.yearRange().include(year);} }, + dayHover: function(element) { + var hover_date = new Date(this.selected_date); + hover_date.setYear(element.year); hover_date.setMonth(element.month); hover_date.setDate(element.day); + this.updateFooter(hover_date.toFormattedString(this.use_time)); + }, + dayHoverOut: function(element) { this.updateFooter(); }, + clearSelectedClass: function() {if (this.selected_cell) this.selected_cell.removeClassName("selected");}, + setSelectedClass: function() { + if (!this.selection_made) return; + this.clearSelectedClass() + if ($R(0,42).include( days_until = this.beginning_date.stripTime().daysDistance(this.selected_date.stripTime()) )) { + this.selected_cell = this.calendar_day_grid[days_until]; + this.selected_cell.addClassName("selected"); + } + }, + reparse: function() { this.parseDate(); this.refresh(); }, + dateString: function() { + return (this.selection_made) ? this.selected_date.toFormattedString(this.use_time) : " "; + }, + parseDate: function() + { + var value = $F(this.target_element).strip() + this.selection_made = (value != ""); + this.date = value=="" ? NaN : Date.parseFormattedString(this.options.get("date") || value); + if (isNaN(this.date)) this.date = new Date(); + if (!this.validYear(this.date.getFullYear())) this.date.setYear( (this.date.getFullYear() < this.yearRange().start) ? this.yearRange().start : this.yearRange().end); + this.selected_date = new Date(this.date); + this.use_time = /[0-9]:[0-9]{2}/.exec(value) ? true : false; + this.date.setDate(1); + }, + updateFooter:function(text) { if (!text) text = this.dateString(); this.footer_div.purgeChildren(); this.footer_div.build("span", {innerHTML: text }); }, + clearDate:function() { + if ((this.target_element.disabled || this.target_element.readOnly) && this.options.get("popup") != "force") return false; + var last_value = this.target_element.value; + this.target_element.value = ""; + this.clearSelectedClass(); + this.updateFooter(' '); + if (last_value!=this.target_element.value) this.callback("onchange"); + }, + updateSelectedDate:function(partsOrElement, via_click) { + var parts = $H(partsOrElement); + if ((this.target_element.disabled || this.target_element.readOnly) && this.options.get("popup") != "force") return false; + if (parts.get("day")) { + var t_selected_date = this.selected_date, vdc = this.options.get("valid_date_check"); + for (var x = 0; x<=3; x++) t_selected_date.setDate(parts.get("day")); + t_selected_date.setYear(parts.get("year")); + t_selected_date.setMonth(parts.get("month")); + + if (vdc && ! vdc(t_selected_date.stripTime())) { return false; } + this.selected_date = t_selected_date; + this.selection_made = true; + } + + if (!isNaN(parts.get("hour"))) this.selected_date.setHours(parts.get("hour")); + if (!isNaN(parts.get("minute"))) this.selected_date.setMinutes( Math.floor_to_interval(parts.get("minute"), this.options.get("minute_interval")) ); + if (parts.get("hour") === "" || parts.get("minute") === "") + this.setUseTime(false); + else if (!isNaN(parts.get("hour")) || !isNaN(parts.get("minute"))) + this.setUseTime(true); + + this.updateFooter(); + this.setSelectedClass(); + + if (this.selection_made) this.updateValue(); + if (this.closeOnClick()) { this.close(); } + if (via_click && !this.options.get("embedded")) { + if ((new Date() - this.last_click_at) < 333) this.close(); + this.last_click_at = new Date(); + } + }, + closeOnClick: function() { + if (this.options.get("embedded")) return false; + if (this.options.get("close_on_click")===nil ) + return (this.options.get("time")) ? false : true + else + return (this.options.get("close_on_click")) + }, + navMonth: function(month) { (target_date = new Date(this.date)).setMonth(month); return (this.navTo(target_date)); }, + navYear: function(year) { (target_date = new Date(this.date)).setYear(year); return (this.navTo(target_date)); }, + navTo: function(date) { + if (!this.validYear(date.getFullYear())) return false; + this.date = date; + this.date.setDate(1); + this.refresh(); + this.callback("after_navigate", this.date); + return true; + }, + setUseTime: function(turn_on) { + this.use_time = this.options.get("time") && (this.options.get("time")=="mixed" ? turn_on : true) // force use_time to true if time==true && time!="mixed" + if (this.use_time && this.selected_date) { // only set hour/minute if a date is already selected + var minute = Math.floor_to_interval(this.selected_date.getMinutes(), this.options.get("minute_interval")); + var hour = this.selected_date.getHours(); + + this.hour_select.setValue(hour); + this.minute_select.setValue(minute) + } else if (this.options.get("time")=="mixed") { + this.hour_select.setValue(""); this.minute_select.setValue(""); + } + }, + updateValue: function() { + var last_value = this.target_element.value; + this.target_element.value = this.dateString(); + if (last_value!=this.target_element.value) this.callback("onchange"); + }, + today: function(now) { + var d = new Date(); this.date = new Date(); + var o = $H({ day: d.getDate(), month: d.getMonth(), year: d.getFullYear(), hour: d.getHours(), minute: d.getMinutes()}); + if ( ! now ) o = o.merge({hour: "", minute:""}); + this.updateSelectedDate(o, true); + this.refresh(); + }, + close: function() { + if (this.closed) return false; + this.callback("before_close"); + this.target_element.calendar_date_select = nil; + Event.stopObserving(document, "mousedown", this.closeIfClickedOut_handler); + Event.stopObserving(document, "keypress", this.keyPress_handler); + this.calendar_div.remove(); this.closed = true; + if (this.iframe) this.iframe.remove(); + if (this.target_element.type != "hidden" && ! this.target_element.disabled) this.target_element.focus(); + this.callback("after_close"); + }, + closeIfClickedOut: function(e) { + if (! $(Event.element(e)).descendantOf(this.calendar_div) ) this.close(); + }, + keyPress: function(e) { + if (e.keyCode==Event.KEY_ESC) this.close(); + }, + callback: function(name, param) { if (this.options.get(name)) { this.options.get(name).bind(this.target_element)(param); } } +} \ No newline at end of file diff --git a/public/javascripts/calendar_date_select/format_american.js b/public/javascripts/calendar_date_select/format_american.js new file mode 100644 index 0000000..cbaca01 --- /dev/null +++ b/public/javascripts/calendar_date_select/format_american.js @@ -0,0 +1,34 @@ +// American Format: 12/31/2000 5:00 pm +// Thanks, Wes Hays +Date.prototype.toFormattedString = function(include_time){ + str = Date.padded2(this.getMonth() + 1) + '/' +Date.padded2(this.getDate()) + '/' + this.getFullYear(); + + if (include_time) { hour=this.getHours(); str += " " + this.getAMPMHour() + ":" + this.getPaddedMinutes() + " " + this.getAMPM() } + return str; +} + +Date.parseFormattedString = function (string) { + // Test these with and without the time + // 11/11/1111 12pm + // 11/11/1111 1pm + // 1/11/1111 10:10pm + // 11/1/1111 01pm + // 1/1/1111 01:11pm + // 1/1/1111 1:11pm + var regexp = "(([0-1]?[0-9])\/[0-3]?[0-9]\/[0-9]{4}) *([0-9]{1,2}(:[0-9]{2})? *(am|pm))?"; + var d = string.match(new RegExp(regexp, "i")); + if (d==null) { + return Date.parse(string); // Give javascript a chance to parse it. + } + + mdy = d[1].split('/'); + hrs = 0; + mts = 0; + if(d[3] != null) { + hrs = parseInt(d[3].split('')[0], 10); + if(d[5].toLowerCase() == 'pm') { hrs += 12; } // Add 12 more to hrs + mts = d[4].split(':')[1]; + } + + return new Date(mdy[2], parseInt(mdy[0], 10)-1, mdy[1], hrs, mts, 0); +} diff --git a/public/javascripts/calendar_date_select/format_db.js b/public/javascripts/calendar_date_select/format_db.js new file mode 100644 index 0000000..a3f10d4 --- /dev/null +++ b/public/javascripts/calendar_date_select/format_db.js @@ -0,0 +1,27 @@ +// DB No Seconds Format: 2007-12-05 12:00 + +Date.padded2 = function(hour) { padded2 = hour.toString(); if ((parseInt(hour) < 10) || (parseInt(hour) == null)) padded2="0" + padded2; return padded2; } +Date.prototype.getAMPMHour = function() { hour=Date.padded2(this.getHours()); return (hour == null) ? 00 : (hour > 24 ? hour - 24 : hour ) } +Date.prototype.getAMPM = function() { return (this.getHours() < 12) ? "" : ""; } + +Date.prototype.toFormattedString = function(include_time){ + str = this.getFullYear() + "-" + (this.getMonth() + 1) + "-" + Date.padded2(this.getDate()); + if (include_time) { hour=this.getHours(); str += " " + this.getAMPMHour() + ":" + this.getPaddedMinutes() } + return str; +} + +Date.parseFormattedString = function (string) { + var regexp = '([0-9]{4})-(([0-9]{1,2})-(([0-9]{1,2})( ([0-9]{1,2}):([0-9]{2})? *)?)?)?'; + var d = string.match(new RegExp(regexp, "i")); + if (d==null) return Date.parse(string); // at least give javascript a crack at it. + var offset = 0; + var date = new Date(d[1], 0, 1); + if (d[3]) { date.setMonth(d[3] - 1); } + if (d[5]) { date.setDate(d[5]); } + if (d[7]) { + date.setHours(parseInt(d[7], 10)); + } + if (d[8]) { date.setMinutes(d[8]); } + if (d[10]) { date.setSeconds(d[10]); } + return date; +} diff --git a/public/javascripts/calendar_date_select/format_euro_24hr.js b/public/javascripts/calendar_date_select/format_euro_24hr.js new file mode 100644 index 0000000..7249fcb --- /dev/null +++ b/public/javascripts/calendar_date_select/format_euro_24hr.js @@ -0,0 +1,7 @@ +// Formats date and time as "01 January 2000 17:00" +Date.prototype.toFormattedString = function(include_time) +{ + str = Date.padded2(this.getDate()) + " " + Date.months[this.getMonth()] + " " + this.getFullYear(); + if (include_time) { str += " " + this.getHours() + ":" + this.getPaddedMinutes() } + return str; +} \ No newline at end of file diff --git a/public/javascripts/calendar_date_select/format_euro_24hr_ymd.js b/public/javascripts/calendar_date_select/format_euro_24hr_ymd.js new file mode 100644 index 0000000..7105c73 --- /dev/null +++ b/public/javascripts/calendar_date_select/format_euro_24hr_ymd.js @@ -0,0 +1,7 @@ +// Formats date and time as "2000.01.20 17:00" +Date.prototype.toFormattedString = function(include_time) +{ + str = this.getFullYear() + "." + Date.padded2(this.getMonth()+1) + "." + Date.padded2(this.getDate()); + if (include_time) { str += " " + this.getHours() + ":" + this.getPaddedMinutes() } + return str; +} \ No newline at end of file diff --git a/public/javascripts/calendar_date_select/format_finnish.js b/public/javascripts/calendar_date_select/format_finnish.js new file mode 100644 index 0000000..520390f --- /dev/null +++ b/public/javascripts/calendar_date_select/format_finnish.js @@ -0,0 +1,32 @@ +Date.padded2 = function(hour) { padded2 = hour.toString(); if ((parseInt(hour) < 10) || (parseInt(hour) == null)) padded2="0" + padded2; return padded2; } +Date.prototype.getAMPMHour = function() { hour=Date.padded2(this.getHours()); return (hour == null) ? 00 : (hour > 24 ? hour - 24 : hour ) } +Date.prototype.getAMPM = function() { return (this.getHours() < 12) ? "" : ""; } + +Date.prototype.toFormattedString = function(include_time){ + str = this.getDate() + "." + (this.getMonth() + 1) + "." + this.getFullYear(); + if (include_time) { hour=this.getHours(); str += " " + this.getAMPMHour() + ":" + this.getPaddedMinutes() } + return str; +} +Date.parseFormattedString = function (string) { + var regexp = '([0-9]{1,2})\.(([0-9]{1,2})\.(([0-9]{2,4})( ([0-9]{1,2}):([0-9]{2})? *)?)?)?'; + var d = string.match(new RegExp(regexp, "i")); + if (d==null) return Date.parse(string); // at least give javascript a crack at it. + var offset = 0; + if (d[5] && d[5].length == 2) { + // we got only two digits for the year... + d[5] = Number(d[5]); + if (d[5] > 30) + d[5] += 1900; + else + d[5] += 2000; + } + var date = new Date(d[5], 0, 1); + if (d[3]) { date.setMonth(d[3] - 1); } + if (d[5]) { date.setDate(d[1]); } + if (d[7]) { + date.setHours(parseInt(d[7], 10)); + } + if (d[8]) { date.setMinutes(d[8]); } + if (d[10]) { date.setSeconds(d[10]); } + return date; +} diff --git a/public/javascripts/calendar_date_select/format_hyphen_ampm.js b/public/javascripts/calendar_date_select/format_hyphen_ampm.js new file mode 100644 index 0000000..ee7ab1e --- /dev/null +++ b/public/javascripts/calendar_date_select/format_hyphen_ampm.js @@ -0,0 +1,37 @@ +Date.prototype.toFormattedString = function(include_time){ + str = this.getFullYear() + "-" + Date.padded2(this.getMonth() + 1) + "-" +Date.padded2(this.getDate()); + +if (include_time) { hour=this.getHours(); str += " " + this.getAMPMHour() + ":" + this.getPaddedMinutes() + " " + this.getAMPM() } +return str; +} + +Date.parseFormattedString = function (string) { + var regexp = "([0-9]{4})(-([0-9]{2})(-([0-9]{2})" + + "( ([0-9]{1,2}):([0-9]{2})? *(pm|am)" + + "?)?)?)?"; + var d = string.match(new RegExp(regexp, "i")); + if (d==null) return Date.parse(string); // at least give javascript a crack at it. + var offset = 0; + var date = new Date(d[1], 0, 1); + if (d[3]) { date.setMonth(d[3] - 1); } + if (d[5]) { date.setDate(d[5]); } + if (d[7]) { + hours = parseInt(d[7], 10); + offset=0; + if (d[9]) { + is_pm = (d[9].toLowerCase()=="pm"); + if (is_pm && hours <= 11) hours+=12; + if (!is_pm && hours == 12) hours=0; + } + date.setHours(hours); + } + if (d[8]) { date.setMinutes(d[8]); } + if (d[10]) { date.setSeconds(d[10]); } + if (d[12]) { date.setMilliseconds(Number("0." + d[12]) * 1000); } + if (d[14]) { + offset = (Number(d[16]) * 60) + Number(d[17]); + offset *= ((d[15] == '-') ? 1 : -1); + } + + return date; +} \ No newline at end of file diff --git a/public/javascripts/calendar_date_select/format_iso_date.js b/public/javascripts/calendar_date_select/format_iso_date.js new file mode 100644 index 0000000..ea7aa73 --- /dev/null +++ b/public/javascripts/calendar_date_select/format_iso_date.js @@ -0,0 +1,46 @@ +Date.prototype.toFormattedString = function(include_time) { + var hour; + var str = this.getFullYear() + "-" + Date.padded2(this.getMonth() + 1) + "-" +Date.padded2(this.getDate()); + if (include_time) { + hour = this.getHours(); + str += " " + this.getHours() + ":" + this.getPaddedMinutes(); + } + return str; +}; + +Date.parseFormattedString = function (string) { + + var regexp = "([0-9]{4})(-([0-9]{2})(-([0-9]{2})" + + "( ([0-9]{1,2}):([0-9]{2})?" + + "?)?)?)?"; + + var d = string.match(new RegExp(regexp, "i")); + if (d === null) { + return Date.parse(string); // at least give javascript a crack at it. + } + var offset = 0; + var date = new Date(d[1], 0, 1); + if (d[3]) { + date.setMonth(d[3] - 1); + } + if (d[5]) { + date.setDate(d[5]); + } + if (d[7]) { + date.setHours(d[7]); + } + if (d[8]) { + date.setMinutes(d[8]); + } + if (d[0]) { + date.setSeconds(d[0]); + } + if (d[2]) { + date.setMilliseconds(Number("0." + d[2])); + } + if (d[4]) { + offset = (Number(d[6])) + Number(d[8]); + offset = ((d[5] == '-') ? 1 : -1); + } + return date; +}; diff --git a/public/javascripts/calendar_date_select/format_italian.js b/public/javascripts/calendar_date_select/format_italian.js new file mode 100644 index 0000000..c60b6ad --- /dev/null +++ b/public/javascripts/calendar_date_select/format_italian.js @@ -0,0 +1,24 @@ +// Italian Format: 31/12/2000 23:00 +// Thanks, Bigonazzi! + +Date.prototype.toFormattedString = function(include_time){ + str = this.getDate() + "/" + (this.getMonth() + 1) + "/" + this.getFullYear(); + if (include_time) { str += " " + this.getHours() + ":" + this.getPaddedMinutes() } + return str; +} + +Date.parseFormattedString = function (string) { + var regexp = '([0-9]{1,2})/(([0-9]{1,2})/(([0-9]{4})( ([0-9]{1,2}):([0-9]{2})? *)?)?)?'; + var d = string.match(new RegExp(regexp, "i")); + if (d==null) return Date.parse(string); // at least give javascript a crack at it. + var offset = 0; + var date = new Date(d[5], 0, 1); + if (d[3]) { date.setMonth(d[3] - 1); } + if (d[5]) { date.setDate(d[1]); } + if (d[7]) { + date.setHours(parseInt(d[7], 10)); + } + if (d[8]) { date.setMinutes(d[8]); } + if (d[10]) { date.setSeconds(d[10]); } + return date; +} diff --git a/public/javascripts/calendar_date_select/locale/de.js b/public/javascripts/calendar_date_select/locale/de.js new file mode 100644 index 0000000..ff9d439 --- /dev/null +++ b/public/javascripts/calendar_date_select/locale/de.js @@ -0,0 +1,11 @@ +Date.weekdays = $w('Mo Di Mi Do Fr Sa So'); +Date.months = $w('Januar Februar März April Mai Juni Juli August September Oktober November Dezember'); + +Date.first_day_of_week = 1; + +_translations = { + "OK": "OK", + "Now": "Jetzt", + "Today": "Heute", + "Clear": "Löschen" +} diff --git a/public/javascripts/calendar_date_select/locale/fi.js b/public/javascripts/calendar_date_select/locale/fi.js new file mode 100644 index 0000000..443c910 --- /dev/null +++ b/public/javascripts/calendar_date_select/locale/fi.js @@ -0,0 +1,10 @@ +Date.weekdays = $w("Ma Ti Ke To Pe La Su"); +Date.months = $w("Tammikuu Helmikuu Maaliskuu Huhtikuu Toukokuu Keskuu Heinkuu Elokuu Syyskuu Lokakuu Marraskuu Joulukuu" ); + +Date.first_day_of_week = 1 + +_translations = { + "OK": "OK", + "Now": "Nyt", + "Today": "Tnn" +} \ No newline at end of file diff --git a/public/javascripts/calendar_date_select/locale/fr.js b/public/javascripts/calendar_date_select/locale/fr.js new file mode 100644 index 0000000..604060c --- /dev/null +++ b/public/javascripts/calendar_date_select/locale/fr.js @@ -0,0 +1,10 @@ +Date.weekdays = $w('L Ma Me J V S D'); +Date.months = $w('Janvier Février Mars Avril Mai Juin Juillet Août Septembre Octobre Novembre Décembre'); + +Date.first_day_of_week = 1; + +_translations = { + "OK": "OK", + "Now": "Maintenant", + "Today": "Aujourd'hui" +} diff --git a/public/javascripts/calendar_date_select/locale/pl.js b/public/javascripts/calendar_date_select/locale/pl.js new file mode 100644 index 0000000..af1b78a --- /dev/null +++ b/public/javascripts/calendar_date_select/locale/pl.js @@ -0,0 +1,10 @@ +Date.weekdays = $w('P W Ś C P S N'); +Date.months = $w('Styczeń Luty Marzec Kwiecień Maj Czerwiec Lipiec Sierpień Wrzesień Październik Listopad Grudzień'); + +Date.first_day_of_week = 1 + +_translations = { + "OK": "OK", + "Now": "Teraz", + "Today": "Dziś" +} \ No newline at end of file diff --git a/public/javascripts/calendar_date_select/locale/pt.js b/public/javascripts/calendar_date_select/locale/pt.js new file mode 100644 index 0000000..30293b5 --- /dev/null +++ b/public/javascripts/calendar_date_select/locale/pt.js @@ -0,0 +1,11 @@ +Date.weekdays = $w('D S T Q Q S S'); +Date.months = $w('Janeiro Fevereiro Março Abril Maio Junho Julho Agosto Setembro Outubro Novembro Dezembro'); + +Date.first_day_of_week = 0 + +_translations = { + "OK": "OK", + "Now": "Agora", + "Today": "Hoje", + "Clear": "Limpar" +} diff --git a/public/javascripts/calendar_date_select/locale/ru.js b/public/javascripts/calendar_date_select/locale/ru.js new file mode 100644 index 0000000..8dc5c20 --- /dev/null +++ b/public/javascripts/calendar_date_select/locale/ru.js @@ -0,0 +1,10 @@ +Date.weekdays = $w('Пн Вт Ср Чт Пт Сб Вс'); +Date.months = $w('Январь Февраль Март Апрель Май Июнь Июль Август Сентябрь Октябрь Ноябрь Декабрь'); + +Date.first_day_of_week = 1 + +_translations = { + "OK": "OK", + "Now": "Сейчас", + "Today": "Сегодня" +} \ No newline at end of file diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css index 8da4086..d831b47 100644 --- a/public/stylesheets/application.css +++ b/public/stylesheets/application.css @@ -2,7 +2,7 @@ html { overflow-y: scroll; } body { - background-color: #ccc; + background-color: #fcfcf8; font-family: Verdana, sans-serif; padding: 0.75em; line-height: 1.333; @@ -33,17 +33,13 @@ h5, h6 { font-size: 100%; } -th, td { - font-size: 70%; -} - a { - color: #039; + color: #338; text-decoration: none; } a:hover { - color: #00f; + color: #33f; text-decoration: underline; } @@ -62,7 +58,7 @@ em { p.nav { margin-top: 1.5em; - font-size: 55%; + font-size: 56%; text-transform: uppercase; } @@ -73,10 +69,10 @@ p.nav { } #container { - width: 44em; + width: 50em; margin: 0.5em auto; background-color: #fff; - padding: 0.75em 1.75em; + padding: 0.75em 1.5em; border: outset 1px; } @@ -143,19 +139,24 @@ p.nav { } .light { - background-color: #e3e3e3; + background-color: #fcfcf8; } .dark { - background-color: #dcdcdc; + background-color: #f4f2ee; } .listing { width: 100%; } +.listing th, +.listing td { + font-size: 69%; +} + .listing tr:hover { - background-color: #fc9; + background-color: #b4cfe7; cursor: pointer; } @@ -166,32 +167,94 @@ p.nav { } .listing th { - background-color: #d3d3d3; + background-color: #ebe9e5; } -.listing td.number { - width: 2.5em; +.listing .number { + width: 2em; + text-align: right; } -form dl { - margin-bottom: 1em; - display: inline; +fieldset .label { + font-size: 56%; + font-weight: bold; + text-transform: uppercase; + padding-left: 0.25em; } -form dt { - font-size: 70%; - font-weight: bold; +fieldset .date { + width: 8em; } fieldset { - width: 46%; - border: groove 2px #666; - padding: 0.5em 0.375em 1.25em 0.375em; - margin-bottom: 1em; + width: 19em; + border: solid 1px #aaa; + padding: 0.75em 0.5em 0.875em 0.5em; + margin-bottom: 1.25em; +} + +fieldset.loads { + width: 27.5em; +} + +fieldset table { + width: 100%; +} + +fieldset table td { + border: none; } legend { - font-size: 80%; + color: #000; + border: solid 1px #ccc; + font-size: 81%; font-weight: bold; padding: 0 0.5em; } + +table input { + border: none; +} + +.border { + border: 1px solid #ccc; +} + +.name { + width: 8em; +} + +.street { + width: 22em; +} + +.city { + width: 10em; +} + +.state { + width: 1em; +} + +.zip { + width: 3em; +} + +.date { + width: 6em; + text-align: center; +} + +.payrate { + width: 3em; + text-align: right; +} + +.ssn { + width: 8em; +} + +.tax { + width: 3.25em; +} diff --git a/public/stylesheets/calendar_date_select/blue.css b/public/stylesheets/calendar_date_select/blue.css new file mode 100644 index 0000000..31a5cbd --- /dev/null +++ b/public/stylesheets/calendar_date_select/blue.css @@ -0,0 +1,130 @@ +.calendar_date_select { + color:white; + border:#777 1px solid; + display:block; + width:195px; + z-index: 1000; +} +/* this is a fun ie6 hack to get drop downs to stay behind the popup window. This should always be just underneath .calendar_date_select */ +iframe.ie6_blocker { + position: absolute; + z-index: 999; +} + +.calendar_date_select thead th { + font-weight:bold; + background-color: #000; + border-top:1px solid #777; + border-bottom:2px solid #334; + color: white !important; +} + +.calendar_date_select .cds_buttons { + text-align:center; + padding:5px 0px; + background-color: #000055; +} + +.calendar_date_select .cds_footer { + background-color: black; + padding:3px; + font-size:12px; + text-align:center; +} + +.calendar_date_select table { + margin: 0px; + padding: 0px; +} + + +.calendar_date_select .cds_header { + background-color: #ccc; + border-bottom: 2px solid #aaa; + text-align:center; +} + +.calendar_date_select .cds_header span { + font-size:15px; + color: black; + font-weight: bold; +} + +.calendar_date_select select { font-size:11px;} + +.calendar_date_select .cds_header a:hover { + color: white; +} +.calendar_date_select .cds_header a { + width:22px; + height:20px; + text-decoration: none; + font-size:14px; + color:black !important; +} + +.calendar_date_select .cds_header a.prev { + float:left; +} + +.calendar_date_select .cds_header a.next { + float:right; +} + +.calendar_date_select .cds_header a.close { + float:right; + display:none; +} + + +.calendar_date_select .cds_header select.month { + width:90px; +} + +.calendar_date_select .cds_header select.year { + width:61px; +} + +.calendar_date_select .cds_buttons a { + color: white; + font-size: 9px; +} + +.calendar_date_select td { + background-color: #000066; + font-size:12px; + width: 24px; + height: 21px; + text-align:center; + vertical-align: middle; +} +.calendar_date_select td.weekend { + background-color: #00005a; +} + +.calendar_date_select td div.other { + color: #4C5593; +} + +.calendar_date_select tbody td { + border-bottom: 1px solid #000044; +} +.calendar_date_select td.selected { + background-color:white; + color:black; +} + +.calendar_date_select td:hover { + background-color:#ccc; +} + +.calendar_date_select td.disabled div { + color: #000044; +} +.calendar_date_select td.today { + border: 1px dashed blue; +} + +.fieldWithErrors .calendar_date_select { + border: 2px solid red; +} diff --git a/public/stylesheets/calendar_date_select/default.css b/public/stylesheets/calendar_date_select/default.css new file mode 100644 index 0000000..c718383 --- /dev/null +++ b/public/stylesheets/calendar_date_select/default.css @@ -0,0 +1,135 @@ +.calendar_date_select { + color:white; + border:#777 1px solid; + display:block; + width:195px; + z-index: 1000; +} +/* this is a fun ie6 hack to get drop downs to stay behind the popup window. This should always be just underneath .calendar_date_select */ +iframe.ie6_blocker { + position: absolute; + z-index: 999; +} + +.calendar_date_select thead th { + font-weight:bold; + background-color: #aaa; + border-top:1px solid #777; + border-bottom:1px solid #777; + color: white !important; +} + +.calendar_date_select .cds_buttons { + text-align:center; + padding:5px 0px; + background-color: #555; +} + +.calendar_date_select .cds_footer { + background-color: black; + padding:3px; + font-size:12px; + text-align:center; +} + +.calendar_date_select table { + margin: 0px; + padding: 0px; +} + + +.calendar_date_select .cds_header { + background-color: #ccc; + border-bottom: 2px solid #aaa; + text-align:center; +} + +.calendar_date_select .cds_header span { + font-size:15px; + color: black; + font-weight: bold; +} + +.calendar_date_select select { font-size:11px;} + +.calendar_date_select .cds_header a:hover { + color: white; +} +.calendar_date_select .cds_header a { + width:22px; + height:20px; + text-decoration: none; + font-size:14px; + color:black !important; +} + +.calendar_date_select .cds_header a.prev { + float:left; +} +.calendar_date_select .cds_header a.next { + float:right; +} + +.calendar_date_select .cds_header a.close { + float:right; + display:none; +} + +.calendar_date_select .cds_header select.month { + width:90px; +} + +.calendar_date_select .cds_header select.year { + width:61px; +} +.calendar_date_select .cds_buttons a { + color: white; + font-size: 9px; +} + +.calendar_date_select td { + font-size:12px; + width: 24px; + height: 21px; + text-align:center; + vertical-align: middle; + background-color: #fff; +} +.calendar_date_select td.weekend { + background-color: #eee; + border-left:1px solid #ddd; + border-right:1px solid #ddd; +} + +.calendar_date_select td div { + color: #000; +} +.calendar_date_select td div.other { + color: #ccc; +} +.calendar_date_select td.selected div { + color:white; +} + +.calendar_date_select tbody td { + border-bottom: 1px solid #ddd; +} +.calendar_date_select td.selected { + background-color:#777; +} + +.calendar_date_select td:hover { + background-color:#ccc; +} + +.calendar_date_select td.today { + border: 1px dashed #999; +} + +.calendar_date_select td.disabled div { + color: #e6e6e6; +} + +.fieldWithErrors .calendar_date_select { + border: 2px solid red; +} diff --git a/public/stylesheets/calendar_date_select/plain.css b/public/stylesheets/calendar_date_select/plain.css new file mode 100644 index 0000000..f5e57dd --- /dev/null +++ b/public/stylesheets/calendar_date_select/plain.css @@ -0,0 +1,128 @@ +.calendar_date_select { + border:#777 1px solid; + display:block; + width:195px; + z-index: 1000; + background-color:white; +} +/* this is a fun ie6 hack to get drop downs to stay behind the popup window. This should always be just underneath .calendar_date_select */ +iframe.ie6_blocker { + position: absolute; + z-index: 999; +} + +.calendar_date_select thead th { + color: black !important; + font-weight:bold; +} + +.calendar_date_select .cds_buttons { + text-align:center; + padding:5px 0px; +} + +.calendar_date_select .cds_footer { + padding:3px; + font-size:10px; + text-align:center; +} + +.calendar_date_select table { + margin: 0px; + padding: 0px; +} + + +.calendar_date_select .cds_header { + text-align:center; +} + +.calendar_date_select .cds_header * { + border:0px; + background-color:white; +} + +.calendar_date_select .cds_header span { + font-size:15px; + color: black; + font-weight: bold; +} + +.calendar_date_select select { font-size:11px;} + +.calendar_date_select .cds_header a:hover { + color: white; +} +.calendar_date_select .cds_header a { + width:22px; + height:20px; + text-decoration: none; + font-size:14px; + color:black !important; +} + +.calendar_date_select .cds_header a.prev { + float:left; +} +.calendar_date_select .cds_header a.next { + float:right; +} +.calendar_date_select .cds_header a.close { + float:right; + display:none; +} + +.calendar_date_select .cds_header select.month { + width:90px; +} + +.calendar_date_select .cds_header select.year { + width:61px; +} + +.calendar_date_select .cds_buttons a { + color: black; + font-size: 9px; +} +.calendar_date_select td { + font-size:12px; + width: 24px; + height: 21px; + text-align:center; + vertical-align: middle; + background-color: #fff; +} +.calendar_date_select td.weekend { +} + +.calendar_date_select td div { + color: #000; +} +.calendar_date_select td div.other { + color: #ccc; +} +.calendar_date_select td.selected div { + color:white; +} + +.calendar_date_select tbody td { +} +.calendar_date_select td.selected { + background-color:#777; +} + +.calendar_date_select td:hover { + background-color:#ccc; +} + +.calendar_date_select td.today { + border: 1px dashed #999; +} + +.calendar_date_select td.disabled div { + color: #e6e6e6; +} + +.fieldWithErrors .calendar_date_select { + border: 2px solid red; +} diff --git a/public/stylesheets/calendar_date_select/red.css b/public/stylesheets/calendar_date_select/red.css new file mode 100644 index 0000000..a2ff2f2 --- /dev/null +++ b/public/stylesheets/calendar_date_select/red.css @@ -0,0 +1,135 @@ +.calendar_date_select { + color:white; + border:#777 1px solid; + display:block; + width:195px; + z-index: 1000; +} +/* this is a fun ie6 hack to get drop downs to stay behind the popup window. This should always be just underneath .calendar_date_select */ +iframe.ie6_blocker { + position: absolute; + z-index: 999; +} + +.calendar_date_select thead th { + font-weight:bold; + background-color: #E7E8E8; + border-bottom:2px solid black; + color: black !important; +} + +.calendar_date_select .cds_buttons { + text-align:center; + padding:5px 0px; + background-color: #5f0000; +} + +.calendar_date_select .cds_footer { + background-color: black; + padding:3px; + text-align:center; +} + +.calendar_date_select table { + margin: 0px; + padding: 0px; +} + + +.calendar_date_select .cds_header { + background-color: #ccc; + border-bottom: 2px solid #aaa; + text-align:center; +} + +.calendar_date_select .cds_header span { + font-size:15px; + color: black; + font-weight: bold; +} + +.calendar_date_select select { font-size:11px;} + +.calendar_date_select .cds_header a:hover { + color: white; +} +.calendar_date_select .cds_header a { + width:22px; + height:20px; + text-decoration: none; + font-size:14px; + color:black !important; +} + +.calendar_date_select .cds_header a.prev { + float:left; +} +.calendar_date_select .cds_header a.next { + float:right; +} + +.calendar_date_select .cds_header a.close { + float:right; + display:none; +} + +.calendar_date_select .cds_header select.month { + width:90px; +} + +.calendar_date_select .cds_header select.year { + width:61px; +} + +.calendar_date_select .cds_buttons a { + color: white; + font-size: 9px; +} + + +.calendar_date_select td { + background-color: #660000; + font-size:12px; + width: 24px; + height: 21px; + text-align:center; + vertical-align: middle; +} +.calendar_date_select td.weekend { + background-color: #5a0000; +} + +.calendar_date_select td div { + color:#fff; +} +.calendar_date_select td div.other { + color: #93554C; +} +.calendar_date_select td.selected div { + color:black; +} + + +.calendar_date_select tbody td { + border-bottom: 1px solid #550000; +} +.calendar_date_select tbody td.selected { + background-color:white; + color:black; +} + +.calendar_date_select tbody td:hover { + background-color:#ccc; +} + +.calendar_date_select tbody td.today { + border: 1px dashed red; +} + +.calendar_date_select td.disabled div { + color: #440000; +} + +.fieldWithErrors .calendar_date_select { + border: 2px solid red; +} diff --git a/public/stylesheets/calendar_date_select/silver.css b/public/stylesheets/calendar_date_select/silver.css new file mode 100644 index 0000000..6e70cc6 --- /dev/null +++ b/public/stylesheets/calendar_date_select/silver.css @@ -0,0 +1,133 @@ +.calendar_date_select { + color:white; + border:#777 1px solid; + display:block; + width:195px; + z-index: 1000; +} +/* this is a fun ie6 hack to get drop downs to stay behind the popup window. This should always be just underneath .calendar_date_select */ +iframe.ie6_blocker { + position: absolute; + z-index: 999; +} + +.calendar_date_select thead th { + font-weight:bold; + background-color: #000; + border-top:1px solid #777; + border-bottom:2px solid #333; + color: white !important; +} + +.calendar_date_select .cds_buttons { + text-align:center; + padding:5px 0px; + background-color: #555; +} + +.calendar_date_select .cds_footer { + background-color: black; + padding:3px; + font-size:12px; + text-align:center; +} + +.calendar_date_select table { + margin: 0px; + padding: 0px; +} + + +.calendar_date_select .cds_header { + background-color: #ccc; + border-bottom: 2px solid #aaa; + text-align:center; +} + +.calendar_date_select .cds_header span { + font-size:15px; + color: black; + font-weight: bold; +} + +.calendar_date_select select { font-size:11px;} + +.calendar_date_select .cds_header a:hover { + color: white; +} +.calendar_date_select .cds_header a { + width:22px; + height:20px; + text-decoration: none; + font-size:14px; + color:black !important; +} + +.calendar_date_select .cds_header a.prev { + float:left; +} +.calendar_date_select .cds_header a.next { + float:right; +} +.calendar_date_select .cds_header a.close { + float:right; + display:none; +} + +.calendar_date_select .cds_header select.month { + width:90px; +} + +.calendar_date_select .cds_header select.year { + width:61px; +} + +.calendar_date_select .cds_buttons a { + color: white; + font-size: 9px; +} +.calendar_date_select td { + font-size:12px; + width: 24px; + height: 21px; + text-align:center; + vertical-align: middle; + background-color: #666666; +} +.calendar_date_select td.weekend { + background-color: #606060; +} + +.calendar_date_select td div { + color: #fff; +} +.calendar_date_select td div.other { + color: #888; +} +.calendar_date_select td.selected div { + color:black; +} + +.calendar_date_select tbody td { + border-bottom: 1px solid #555; +} +.calendar_date_select td.selected { + background-color:white; +} + +.calendar_date_select td:hover { + background-color:#ccc; +} + +.calendar_date_select td.today { + border: 1px dashed #999; +} + +.calendar_date_select td.disabled div { + color: #454545; +} + + +.fieldWithErrors .calendar_date_select { + border: 2px solid red; +}