[Ликбез]

Форма входа
Логин:
Пароль:

Меню сайта


Скрипты и коды для юкоз - Форум аццкого кодера » Если вы пришли за помощью, то Вам сюда... » Как исправить проблему в js-календаре

Как исправить проблему в js-календаре
[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,
спасибо Вам.

Всё получилось.
Теперь так здорово!


Полная версия сайта