[1] Сергей [10.03.2012, 21:48] |
Здравствуйте, likbezz.
Я столкнулся с такой проблемой. У меня на сайте есть календарь, вот код js-файла.
Code if (!fcp) var fcp = new Object(); if (!fcp.msg) fcp.msg = new Object(); if (!fcp) var fcp = new Object(); if (!fcp.msg) fcp.msg = new Object(); fcp.week_days = ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"]; fcp.months = ["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"]; fcp.msg.prev_year = "Предыдущий год"; fcp.msg.prev_month = "Предыдущий месяц"; fcp.msg.next_month = "Следующий месяц"; fcp.msg.next_year = "Следующий год"; fcp.Calendar = function(element, show_clock) { if (!element.childNodes) throw "HTML element expected"; this.element = element; this.selection = new Date(); this.show_clock = show_clock; this.selected_cell = undefined; this.generate_month(); this.render_calendar(); } fcp.Calendar.prototype.set_date_time = function (date_time) { if (date_time.constructor == Date) { this.selection = date_time; this.generate_month(); this.render_calendar(); } else { throw "Date object expected (in fcp.Calendar.set_date_time)"; } } fcp.Calendar.prototype.next_month = function () { var month = this.selection.getMonth(); if (month == 11) { this.selection.setMonth(0); this.selection.setYear(this.selection.getFullYear() + 1); } else { this.selection.setMonth(month + 1); } this.generate_month(); this.render_calendar(); } fcp.Calendar.prototype.prev_month = function () { var month = this.selection.getMonth(); if (month == 0) { this.selection.setMonth(11); this.selection.setYear(this.selection.getFullYear() - 1); } else { this.selection.setMonth(month - 1); } this.generate_month(); this.render_calendar(); } fcp.Calendar.prototype.next_year = function () { var is_feb29 = (this.selection.getMonth() == 1) && (this.selection.getDate() == 29); if (is_feb29) { this.selection.setDate(1); this.selection.setMonth(2); // March } this.selection.setFullYear(this.selection.getFullYear() + 1); this.generate_month(); this.render_calendar(); } fcp.Calendar.prototype.prev_year = function () { var is_feb29 = (this.selection.getMonth() == 1) && (this.selection.getDate() == 29); if (is_feb29) { this.selection.setDate(1); this.selection.setMonth(2); // March } this.selection.setFullYear(this.selection.getFullYear() - 1); this.generate_month(); this.render_calendar(); } fcp.Calendar.prototype.generate_month = function () { this.raw_data = new Array(); var week = 0; this.raw_data[week] = new Array(7); var first_of_month = fcp.Calendar.clone_date(this.selection); first_of_month.setDate(1); var first_weekday = first_of_month.getDay(); first_weekday = (first_weekday == 0) ? 6 : first_weekday - 1; for (var i = 0; i < first_weekday; i++) { this.raw_data[week][i] = 0; } var last_of_month = fcp.Calendar.days_in_month( this.selection.getYear(), this.selection.getMonth()); var weekday = first_weekday; for (var i = 1; i <= last_of_month; i++) { this.raw_data[week][weekday] = i; weekday++; if (weekday > 6) { weekday = 0; week++; this.raw_data[week] = new Array(7); } } for (var i = weekday; i < 7; i++) { this.raw_data[week][i] = 0; } } fcp.Calendar.prototype.render_calendar = function () { this.element.selected_cell = undefined; this.element.innerHTML = ""; this.element.appendChild(this.render_month()); } fcp.Calendar.prototype.render_heading = function () { var heading = document.createElement("caption"); var prev_year = document.createElement("a"); prev_year.href = "#"; prev_year.calendar = this; prev_year.onclick = function() { this.calendar.prev_year(); return false; }; prev_year.innerHTML = "«"; prev_year.title = fcp.msg.prev_year; var prev_month = document.createElement("a"); prev_month.href = "#"; prev_month.calendar = this; prev_month.onclick = function() { this.calendar.prev_month(); return false; }; prev_month.innerHTML = " ‹ "; prev_month.title = fcp.msg.prev_month; var month_year = document.createTextNode( "\u00a0" + fcp.months[this.selection.getMonth()] + " " + this.selection.getFullYear() + "\u00a0"); var next_month = document.createElement("a"); next_month.href = "#"; next_month.calendar = this; next_month.onclick = function() { this.calendar.next_month(); return false; }; next_month.innerHTML = " › "; next_month.title = fcp.msg.next_month; var next_year = document.createElement("a"); next_year.href = "#"; next_year.calendar = this; next_year.onclick = function() { this.calendar.next_year(); return false; }; next_year.innerHTML = "»"; next_year.title = fcp.msg.next_year; heading.appendChild(prev_year); heading.appendChild(document.createTextNode("\u00a0")); heading.appendChild(prev_month); heading.appendChild(month_year); heading.appendChild(next_month); heading.appendChild(document.createTextNode("\u00a0")); heading.appendChild(next_year); return heading; } fcp.Calendar.prototype.render_month = function() { var html_month = document.createElement("table"); html_month.className = "calendar"; html_month.appendChild(this.render_heading()); var thead = document.createElement("thead"); var tr = document.createElement("tr"); for (var i = 0; i < fcp.week_days.length; i++) { var th = document.createElement("th"); th.innerHTML = fcp.week_days[i]; tr.appendChild(th); } thead.appendChild(tr); html_month.appendChild(thead); var tbody = document.createElement("tbody"); for (var i = 0; i < this.raw_data.length; i++) { tbody.appendChild(this.render_week(this.raw_data[i])); } html_month.appendChild(tbody); return html_month; } fcp.Calendar.prototype.render_week = function (day_numbers) { var html_week = document.createElement("tr"); html_week.align = "right"; for (var i = 0; i < 7; i++) { html_week.appendChild(this.render_day(day_numbers[i])); } return html_week; } fcp.Calendar.prototype.render_day = function (day_number) { var td = document.createElement("td"); if (day_number >= 1 && day_number <= 31) { var anchor = document.createElement("a"); anchor.href = "#"; anchor.innerHTML = day_number; anchor.calendar = this; anchor.date = day_number; anchor.onclick = fcp.Calendar.handle_select; td.appendChild(anchor); if (day_number == this.selection.getDate()) { this.selected_cell = td; td.className = "in_month selected"; } else { td.className = "in_month"; } } return td; } fcp.Calendar.prototype.onselect = function () {} fcp.Calendar.clone_date = function (date_obj) { if (date_obj.constructor != Date) throw "Date object expected (in fcp.Calendar.clone_date)"; else return new Date( date_obj.getFullYear(), date_obj.getMonth(), date_obj.getDate(), date_obj.getHours(), date_obj.getMinutes(), date_obj.getSeconds()); } fcp.Calendar.days_in_month = function (year, month) { if (month < 0 || month > 11) throw "Month must be between 0 and 11"; var day_count = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; if (month != 1) { return day_count[month]; } else if ((year % 4) != 0) { return 28; } else if ((year % 400) == 0) { return 29; } else if ((year % 100) == 0) { return 28; } else { return 29; } } fcp.Calendar.handle_select = function () { if (this.calendar.selected_cell) this.calendar.selected_cell.className = "in_month"; this.calendar.selected_cell = this.parentNode; this.parentNode.className = "in_month selected"; this.calendar.selection.setDate(this.date); this.calendar.onselect(this.calendar.selection); return false; } function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } } } addLoadEvent(function() { cal = new fcp.Calendar(document.getElementById("cal_placeholder")); cal.onselect = function(date) {alert(date);}; } ) //-->
А ещё есть css-код в css-файле.
Code table.calendar { border: 1px solid #ADADD3; background-color:#ADADD3; text-align:center; font-weight:normal; font-size:9pt; color:#003366; font-family:Arial, Verdana, Tahoma, sans-serif; } table.calendar td.in_month { width:16px; border: 1px solid #ADADD3; background-color:#ADADD3; font-weight:normal; font-size:10pt; color:#0000CC; text-align:center; font-family:Arial, Verdana, Tahoma, sans-serif; } table.calendar td.selected { background-color:#0000FF; font-weight:normal; font-size:10pt; font-family:Arial, Verdana, Tahoma, sans-serif; } table.calendar a { display:block; font-weight:normal; text-decoration:none; color:#000080; background-color:#D2D2F0; text-align:right; font-size:10pt; font-family:Arial, Verdana, Tahoma, sans-serif; } table.calendar [color=#0000FF]caption[/color] { border: 1px solid #8B8BD8; background-color:#8B8BD8; text-align:center; font-weight:bold; font-size:10pt; color:#000080; font-family: Arial, Verdana, Tahoma, sans-serif; } table.calendar [color=#0000FF]caption[/color] a { display:inline; font-weight:bold; text-decoration:none; background-color:#8B8BD8; font-size:10pt; color:#000080; font-family:Arial, Verdana, Tahoma, sans-serif;
А сегодня в каскадную таблицу стилей я записал стили для тегов caption и th. Стили - для всяких таблиц, находящихся на сайте.
Code caption{color: #002244; font-size: 14pt; text-align: center; font-family: Calibri, Tahoma, Arial, Verdana, sans-serif; margin-top: 10px; margin-bottom: 10px; text-transform: uppercase; font-weight: bold;} th{background-color: #E8FFFF;}
И получилось так, что к моему календарю применились свойства этих тегов.
Как добавить в css-файле к caption или th какое-то имя, я знаю (например, caption.cal) Вы не могли бы подсказать, как и что изменить в js-файле, чтобы он воспринимал именно caption.cal, а не caption. Простите меня за мою неграмотность.
Сообщение отредактировал Сергей - Суббота, 10.03.2012, 21:51 |
|
[2] likbezz [10.03.2012, 22:28] |
Сергей, Quote (Сергей) А сегодня в каскадную таблицу стилей я записал стили для тегов caption и th. Стили - для всяких таблиц, находящихся на сайте. И получилось так, что к моему календарю применились свойства этих тегов. Так пропишите к календарю нужные стили: Типа: Code table.calendar caption{ } table.calendar th{ } - Запишите свои стили, какие нужно ... и все. ... |
|
[3] Сергей [10.03.2012, 23:08] |
Спасибо Вам большое. Как же оказывается, всё просто было. Всё получилось. |
|
[4] likbezz [10.03.2012, 23:22] |
Сергей, Quote (Сергей) Как же оказывается, всё просто было. Ну, вот так ) Будете знать, на будущее ) Quote (Сергей) Всё получилось. Не сомневался ) ... |
|
[5] Сергей [25.03.2012, 15:30] |
likbezz, Вы не могли бы помочь в решении ещё одной проблемы с этим календарём?
Когда я переключаю следующий месяц, потом опять следующий и т.д., то значок для переключения месяца постоянно "бегает" влево-вправо. Это происходит из-за того, что у месяцев разная длина (в буквах; от мая - 3 буквы до сентября - 8 букв), а значки для переключения месяцев и годов находятся непосредственно слева и справа от названия месяца.
Можно как-нибудь сделать для этой строки календаря что-то вроде таблицы из одной строки, с фиксированными размерами столбцов? Первый столбец был бы для переключения на предыдущий год, второй - предыдущий месяц, третий отображал бы текущий месяц и год, четвёртый - для переключения на последующий месяц, пятый - на последующий год.
В общем-то, сейчас всё так и есть, всё работает, но значки "бегают". Из-за этого приходится после каждого клика прицеливаться мышкой снова, чтобы сработало именно переключение месяца вперёд, а не что-то другое.
Делать таблицы в html я умею, а в javascript - не знаю как.
Заранее спасибо. |
|
[6] likbezz [25.03.2012, 15:49] |
Сергей, Quote (Сергей) Вы не могли бы помочь в решении ещё одной проблемы с этим календарём? Когда я переключаю следующий месяц, потом опять следующий и т.д., то значок для переключения месяца постоянно "бегает" Сайт у календаря есть? Оставьте ссылочку посмотрю что там за безобразие такое. ... |
|
[7] Сергей [25.03.2012, 16:31] |
Вот.
_http://www.smallrivers.narod.ru/index.htm Календарь - на главной странице. |
|
[8] likbezz [25.03.2012, 17:50] |
Сергей, Quote (Сергей) Календарь - на главной странице. Перекачайте скрипт календаря: http://likbezz.ru/_example/jscript/2012/calendar/calendar.js И добавьте в стили: Code table.calendar{width:158px;overflow:hidden;} table.calendar caption,table.calendar{white-space:nowrap;overflow:hidden;} table.calendar span.month_year{display:inline-block;width:100px;text-align:center;} ...
Как всё должно быть смотреть вот здесь: ☑ Календарь на JavaScript ... |
|
[9] Сергей [25.03.2012, 23:51] |
likbezz, спасибо Вам.
Всё получилось. Теперь так здорово! |
|