Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> немного подредактировать календарь 
:(
    Опции темы
black_dragon
Дата 28.6.2012, 14:58 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 29
Регистрация: 13.4.2007
Где: Рязань

Репутация: нет
Всего: нет



Добрый день.

есть скрипт календаря

При нажатии на любую дату вылезает сообщение, а как можно заменить это сообщение на переход на страницу типа index.php?id1=day&id2=month&id3=year

и второй вопрос

в базе будут храниться данные о занятости или не занятости дней, и если день занят, то подсветить фон ячейки и запретить кликабельность по ссылке (из первого вопроса)

вот код календаря

Код

<script type="text/javascript">
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 = "&nbsp;<<&nbsp;";
    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 = "&nbsp;<&nbsp;";
    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 = "&nbsp;>&nbsp;";
    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 = "&nbsp;>>&nbsp;";
    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) {location.href='index.php'+Date();}; } )
//-->


</script>
<style>
table.calendar, table.calendar caption, table.calendar td.in_month {    border: 1px solid black; background-color: #FFFFCC;  text-align: center; FONT-WEIGHT: normal; FONT-SIZE: 8pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
table.calendar td.in_month {  width:25px; FONT-WEIGHT: normal; FONT-SIZE: 8pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
table.calendar td.selected {  background-color: yellow; FONT-WEIGHT: normal; FONT-SIZE: 8pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
table.calendar a {    display: block;    font-weight: bold;    text-decoration: none;    color: #0000ff;  text-align: center; FONT-WEIGHT: normal; FONT-SIZE: 8pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
table.calendar caption a {    display: inline;  FONT-WEIGHT: normal; FONT-SIZE: 8pt;  COLOR: red;  FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
</style>
<div id="cal_placeholder"></div> 

</BODY>




PM MAIL ICQ   Вверх
Aliance
Дата 28.6.2012, 16:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



Все это реализовано в jQuery UI datepicker
PM MAIL WWW ICQ Skype   Вверх
black_dragon
Дата 30.6.2012, 13:28 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 29
Регистрация: 13.4.2007
Где: Рязань

Репутация: нет
Всего: нет



Спасибо за календарь. А не подскажите как реализовать подсветку другим фоном уже занятых дат на календаре ?
информация о занятости лежит в базе 

Это сообщение отредактировал(а) black_dragon - 30.6.2012, 13:29
PM MAIL ICQ   Вверх
MaXL
Дата 30.6.2012, 17:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Developer
**


Профиль
Группа: Участник
Сообщений: 380
Регистрация: 24.10.2005
Где: Владивосток

Репутация: нет
Всего: 2



black_dragon, перехватить событие beforeShowDay. Из документации:
Цитата

The function takes a date as a parameter and must return an array with [0] equal to true/false indicating whether or not this date is selectable, [1] equal to a CSS class name(s) or "" for the default presentation, and [2] an optional popup tooltip for this date. It is called for each day in the datepicker before it is displayed.

как пример:
Код

function weekendsOrHolidays(date) {
  var sunday = isSunday(date);
  var natD = specDays(date);
  if (natD[1] != '') return natD;
  else if (sunday) return [true, 'weekend', 'Выходной'];
  else return [true, ''];
}
/* ... */
jQuery("#japcal").datepicker({ beforeShowDay: weekendsOrHolidays, dateFormat: 'dd.mm.yy', onSelect: ChangeCourses });

и подстветка в CSS:
Код

.weekend a {
  background: #800000 !important;
}



--------------------
MaXL
PM MAIL   Вверх
black_dragon
Дата 30.6.2012, 19:42 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 29
Регистрация: 13.4.2007
Где: Рязань

Репутация: нет
Всего: нет



спасибо, попробую сейчас разобраться разобраться.

А в javascript тоже ведь можно делать запросы к mysql ?

и перед прорисовыванием даты в календаре, например если в поле будет пометка "занято" то задать другой фон ?

у меня с javascript совсем плохо, как говорится учусь при выполнении...

Это сообщение отредактировал(а) black_dragon - 30.6.2012, 19:44
PM MAIL ICQ   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.0471 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.