Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » Оцените календарь на JavaScript

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки
Страницы: 1 2

Открыть новую тему     Написать ответ в эту тему

ethan



BANNED
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Накидал календарик. Что скажите? Нормально или не очень?
 
Пример использования
 
АРХИВ ПОСЛЕДНЕЙ СТАБИЛЬНОЙ ВЕРСИИ
 
Вот еще скрипт для просмотра картинок
Здесь
(сорри за контент, просто не на чём было протестировать)

Всего записей: 388 | Зарегистр. 14-12-2002 | Отправлено: 15:13 26-09-2004 | Исправлено: ethan, 01:53 28-02-2005
batva



crazy administrator
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Нормально, только сервисных функций мало.

Всего записей: 12593 | Зарегистр. 07-01-2001 | Отправлено: 23:17 26-09-2004
ethan



BANNED
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
batva
Спасибо.
Вот только не знаю какие полезные функции добавить, все мысли только по интерфейсу.
Может подскажите, буду очень признателен.

Всего записей: 388 | Зарегистр. 14-12-2002 | Отправлено: 00:31 27-09-2004
kisin

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
У меня ошибка какая-то: появилась рамка вокруг всего док-та (border).
В хед писАл:
<script language="JavaScript" src="dym.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
var o1;
function finit(){
var to = document.getElementById("c1");
o1 = new zDymDom(to);
}
function tdate(){
document.getElementById('datevalue1').value=('date format: '+o1.szDateFormat+'   date value: '+o1.szDateVal);
document.getElementById('datevalue2').value=('date format: '+o2.szDateFormat+'   date value: '+o2.szDateVal);
}
</script>
 
В боди писАл:
onLoad="finit();"
 
И вставил в нужном месте таблицы:  
<tr>  
                <td height="100%" valign="top" class="rightcoltext">  
                    <span id="c1"></span>
                  </td>
              </tr>

Всего записей: 613 | Зарегистр. 30-12-2003 | Отправлено: 01:05 01-10-2004
ethan



BANNED
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
А какой броузер и версия?
 
Добавлено
Может быть конфликт с id другого элемента, можно посмотреть весь код страницы?

Всего записей: 388 | Зарегистр. 14-12-2002 | Отправлено: 01:24 01-10-2004 | Исправлено: ethan, 01:46 01-10-2004
kisin

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
А какой броузер и версия?

не могут 2 одновременно ведь? (Опера 7.23, ИЭксплорер 6)
 

Цитата:
Может быть конфликт с id другого элемента, можно посмотреть весь код страницы?

Да вроде таких больше нету...Может то, что стоит перед  <span id="c1"></span> как-то влияет? Но id="c1" кстати в css не прописан, может нужно?

Всего записей: 613 | Зарегистр. 30-12-2003 | Отправлено: 01:52 01-10-2004
ethan



BANNED
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Да, непонятно. А страничка по ссылке в первом посте работает?
 
Добавлено
А рамка(бордюр) какого цвета? Темно синего?

Всего записей: 388 | Зарегистр. 14-12-2002 | Отправлено: 02:03 01-10-2004
kisin

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
А рамка(бордюр) какого цвета? Темно синего?

Да! Так иногда бывает когда у рисунка border не укажешь.
 

Цитата:
А страничка по ссылке в первом посте работает?

Да! Причём там сё оки.

Всего записей: 613 | Зарегистр. 30-12-2003 | Отправлено: 02:21 01-10-2004
ethan



BANNED
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Блин, нашел глюк, сечас вроде должно быть нормально.
При копировании css забыл убрать
table{background-color:#0033CC;}
td{background-color:#F0F0F0;}
 
Здесь правленный js файл.
 
Спасибо!!!
 
А что вы думаете по функционалу, может добавить чего?

Всего записей: 388 | Зарегистр. 14-12-2002 | Отправлено: 02:33 01-10-2004
kisin

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
Блин, нашел глюк, сечас вроде должно быть нормально.

Ну вот теперь всё ок))).
 

Цитата:
А что вы думаете по функционалу, может добавить чего?

Может добавить чтобы праздники как-то обозначались?

Всего записей: 613 | Зарегистр. 30-12-2003 | Отправлено: 02:45 01-10-2004
ethan



BANNED
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
Может добавить чтобы праздники как-то обозначались

Точно, чем и займусь. Спасибо еще раз.

Всего записей: 388 | Зарегистр. 14-12-2002 | Отправлено: 02:52 01-10-2004
kisin

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
А как изменить размер календаря? Мне нужно немного чтоб поуже был (пикселей на 10)

Всего записей: 613 | Зарегистр. 30-12-2003 | Отправлено: 08:28 02-10-2004
ethan



BANNED
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
kisin

Цитата:
А как изменить размер календаря

Да я тоже подумал, что надо будет подстраивать дизайн(размер календаря в том числе) под конкретное окружение, поэтому сейчас вынес стили в отдельный файл.
Самый простой вариант изменить размер поменять размеры шрифтов:

Код:
 
div.caliv td{ font-family: Tahoma; color: black; font-size: 10px; text-align: center; background-color: #F0F0F0; }
div.caliv th{ font-family: arial; background-color: steelblue; color: white; font-size: 10px; }
div.caliv td.clsheader select{font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;cursor:pointer;background-color:#F7F7F7;}
 

Со стилями можно вытворять всё что угодно, на работоспособность календаря это повлиять не должно.
Кстати в первом посте ссылка на архив с последней версией, там много изменений(переписал часть внутренностей, для скорости), в дальнейшем сами паблик методы и свойства менять не буду(для совместимости).

Всего записей: 388 | Зарегистр. 14-12-2002 | Отправлено: 12:28 02-10-2004 | Исправлено: ethan, 12:36 02-10-2004
kisin

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Да не, размером шрифта я не хочу. Я вот тут нашёл:
tnb["TABLE"]["tags"]["TBODY"]["tags"]["TR_H"]["tags"]["TH_"+i]={attr:{style:"width:7%", cstext:this.arrDnm[(i+this.fwd)%(7)]}};
Было 14 чтоли..., поствил 7 - всё это дело уменьшилось, но увеличилась последняя грофа (воскр.).

Всего записей: 613 | Зарегистр. 30-12-2003 | Отправлено: 15:17 02-10-2004
ethan



BANNED
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
kisin
Не это лучше не трогать, на ширину это не повлияет, так как ширина определяется строкой где select-ы и кнопки(header-ом). А 14% - для равномерного распределения - 14*7~100%(т.е. 100 разделить на 7 столбцов).
Мысли были ввести что-то типа scale, но шрифт будет меняться тоже.
Фактически ширина определяется шириной header-а, можно уменьшить размер шрифта только в нем, уменьшится ширина всей конструкции.
Все margin и padding я вроде постарался сделать по минимуму, т.е. его размеры в первую очередь зависят от шрифта.
Можно еще уменьшить padding у кнопок в header-е, но выглядит не очень(по моему).

Всего записей: 388 | Зарегистр. 14-12-2002 | Отправлено: 15:37 02-10-2004
Svarga

Moderator
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
ethan
А как насчёт того, чтоб добавить конвертацию григорианской даты в форматы других календарей?
(юлианский стиль/формат, лунный месяц и т. п.)
К примеру, для организации поиска по гуглу среди страниц, проиндексированных за последние несколько дней, необходимо указывать дату в т. н. юлианском формате, напр. daterange:2453276-2453283 (вот пример реализации такого поиска: http://www.freshgoo.com/index.php , только тут генерация диапазонов дат делается на сервере)
 
Организовать подгрузку отдельными модулями или вроде того можно...
 
Если есть желание, могу информации подкинуть...

----------
away.

Всего записей: 4161 | Зарегистр. 25-06-2002 | Отправлено: 15:56 05-10-2004 | Исправлено: Svarga, 15:57 05-10-2004
ethan



BANNED
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Svarga

Цитата:
А как насчёт того, чтоб добавить конвертацию григорианской даты в форматы других календарей

С удовольствием попробую реализовать(уже ищу информацию по теме).

Цитата:
Организовать подгрузку отдельными модулями или вроде того можно...

А это как?

Цитата:
Если есть желание, могу информации подкинуть...

Желание есть.

Всего записей: 388 | Зарегистр. 14-12-2002 | Отправлено: 17:16 05-10-2004
AlexBer

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
только плагинами пожалуйста -- чтобы не "засорять" основной код
:~}

Всего записей: 18 | Зарегистр. 16-09-2004 | Отправлено: 01:45 06-10-2004
ethan



BANNED
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
AlexBer

Цитата:
только плагинами пожалуйста -- чтобы не "засорять" основной код

Вы имели в виду, что расширение функционала не должно приводить к замедлению и утяжелению кода? Правильно я понял?
Сорри, не понял о каких плагинах идёт речь?
Можно сделать разные версии, типа fast, middle и full.
kisin
Добавил праздники(только самые основные, а так как их много всяких, там в начале скрипта массив, можно вручную в него добавить).
 
Добавлено
Они подсвечены красноватым(можно подправить в dym.css по вкусу, класс - div.caliv td.clsbody td.holi) и при наведении курсора всплывает подсказка с наименованием(из массива праздников).

Всего записей: 388 | Зарегистр. 14-12-2002 | Отправлено: 03:02 06-10-2004 | Исправлено: ethan, 03:35 06-10-2004
oid



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
А вот вам еще календарик:
&copy; Масленников Владимир Олегович
непосредственно JS (script.js):

Код:
 
function header(){
monthyear1.innerHTML='';
monthyear.innerHTML='';
}
 
function header_show(b){
monthyear1.innerHTML='';
  day.value=b;
head_date='<table id="tble"><tr><td width="100%" onClick="init(2)" align="center">'+day.value+'.'+(parseInt(month.value)+1)+'.'+year.value+'</td></tr></table>';
        date_up.value=day.value+'.'+(parseInt(month.value)+1)+'.'+year.value;
monthyearhead.innerHTML=head_date;
monthyear.innerHTML='';
}
function header_show_down(b){
monthyear.innerHTML='';
  day_dw.value=b;
head_date='<table id="tble"><tr><td width="100%" onClick="init_down(2)" align="center">'+day_dw.value+'.'+(parseInt(month_dw.value)+1)+'.'+year_dw.value+'</td></tr></table>';
date_down.value=day_dw.value+'.'+(parseInt(month_dw.value)+1)+'.'+year_dw.value;
monthyearhead1.innerHTML=head_date;
monthyear1.innerHTML='';
}
 
function init(a){
  days=new Array(42);
  days_n=new Array(7);days_n[0]='Пн.';days_n[1]='Вт.';days_n[2]='Ср.';days_n[3]='Чт.';days_n[4]='Пт.';days_n[5]='Сб.';days_n[6]='Вс.';
  for (i=0;i<42;i++) days[i]='';
  months=new Array(12);
  n_months=new Array(12);
months[0]=31;months[1]=28;months[2]=31;months[3]=30;months[4]=31;months[5]=30;months[6]=31;months[7]=31;months[8]=30;months[9]=31;months[10]=30;months[11]=31;
n_months[0]='Январь';n_months[1]='Февраль';n_months[2]='Март';n_months[3]='Апрель';
n_months[4]='Май';n_months[5]='Июнь';n_months[6]='Июль';n_months[7]='Август';
n_months[8]='Сентябрь';n_months[9]='Октябрь';n_months[10]='Ноябрь';n_months[11]='Декабрь';
date1=new Date;
str=new String;
str1=new String;
  if (a==0){
day.value=date1.getDate();
month.value=date1.getMonth();
year.value=date1.getYear();
head_date='<table border="1" width="100%"><tr><td onClick="init(2)">'+day.value+'.'+(parseInt(month.value)+1)+'.'+year.value+'</td></tr></table>';
monthyearhead.innerHTML=head_date;
}
if (a==-1)
if (parseInt(month.value)==0){
month.value=11;  
year.value=parseInt(year.value)-1;
} else {month.value=parseInt(month.value)-1;}
if (a==1)
if (parseInt(month.value)==11){
month.value=0;
year.value=parseInt(year.value)+1;
} else {month.value=parseInt(month.value)+1;}
  if ((parseInt(year.value)-Math.floor(parseInt(year.value)/4)*4)==0) months[1]=29;
date1.setDate(day.value);date1.setMonth(parseInt(month.value));date1.setYear(parseInt(year.value));
j=1;
date2=new Date(parseInt(year.value),parseInt(month.value),1);
if (date2.getDay()==0) {day_week=7;} else {day_week=date2.getDay();}
  for (i=(day_week-1);i<(months[parseInt(date1.getMonth())]+(day_week-1));i++){
    days[i]=j;j++;
  }
  str='<table>';
for (i=0;i<7;i++){
str=str+'<tr align="right"><td class="norm">'+days_n[i]+'</td>';
for (j=0;j<6;j++){
   if (days[7*j+i]==''){
        str=str+'<td class="norm"></td>';
} else {
if (days[7*j+i]==parseInt(day.value)){
str=str+'<td class="norm" id="set" onClick="header_show('+days[7*j+i]+')">'+days[7*j+i]+'</td>';
} else {
if ((i==5||i==6)){
str=str+'<td class="norm" id="wek" onClick="header_show('+days[7*j+i]+')">'+days[7*j+i]+'</td>';
} else {
 
str=str+'<td class="norm" onClick="header_show('+days[7*j+i]+')">'+days[7*j+i]+'</td>';
}}}
}
str=str+'</tr>';
}
str=str+'</table>';
header_show(day.value);
if (a!=0) monthyear.innerHTML=str;

}
function init_down(a){
  days=new Array(42);
  days_n=new Array(7);days_n[0]='Пн.';days_n[1]='Вт.';days_n[2]='Ср.';days_n[3]='Чт.';days_n[4]='Пт.';days_n[5]='Сб.';days_n[6]='Вс.';
  for (i=0;i<42;i++) days[i]='';
  months=new Array(12);
  n_months=new Array(12);
months[0]=31;months[1]=28;months[2]=31;months[3]=30;months[4]=31;months[5]=30;months[6]=31;months[7]=31;months[8]=30;months[9]=31;months[10]=30;months[11]=31;
n_months[0]='Январь';n_months[1]='Февраль';n_months[2]='Март';n_months[3]='Апрель';
n_months[4]='Май';n_months[5]='Июнь';n_months[6]='Июль';n_months[7]='Август';
n_months[8]='Сентябрь';n_months[9]='Октябрь';n_months[10]='Ноябрь';n_months[11]='Декабрь';
date1=new Date;
str=new String;
str1=new String;
  if (a==0){
day_dw.value=date1.getDate();
month_dw.value=date1.getMonth();
year_dw.value=date1.getYear();
head_date='<table border="1" width="100%"><tr><td onClick="init_down(2)">'+day_dw.value+'.'+(parseInt(month.value)+1)+'.'+year_dw.value+'</td></tr></table>';
monthyearhead1.innerHTML=head_date;
}
if (a==-1)
if (parseInt(month_dw.value)==0){
month_dw.value=11;  
year_dw.value=parseInt(year_dw.value)-1;
} else {month_dw.value=parseInt(month_dw.value)-1;}
if (a==1)
if (parseInt(month_dw.value)==11){
month_dw.value=0;
year_dw.value=parseInt(year.value)+1;
} else {month_dw.value=parseInt(month_dw.value)+1;}
  if ((parseInt(year_dw.value)-Math.floor(parseInt(year_dw.value)/4)*4)==0) months[1]=29;
date1.setDate(day_dw.value);date1.setMonth(parseInt(month_dw.value));date1.setYear(parseInt(year_dw.value));
j=1;
date2=new Date(parseInt(year_dw.value),parseInt(month_dw.value),1);
if (date2.getDay()==0) {day_week=7;} else {day_week=date2.getDay();}
  for (i=(day_week-1);i<(months[parseInt(date1.getMonth())]+(day_week-1));i++){
    days[i]=j;j++;
  }
  str='<table>';
for (i=0;i<7;i++){
str=str+'<tr align="right"><td class="norm">'+days_n[i]+'</td>';
for (j=0;j<6;j++){
   if (days[7*j+i]==''){
        str=str+'<td class="norm"></td>';
} else {
if (days[7*j+i]==parseInt(day_dw.value)){
str=str+'<td class="norm" id="set" onClick="header_show_down('+days[7*j+i]+')">'+days[7*j+i]+'</td>';
} else {
if ((i==5||i==6)){
str=str+'<td class="norm" id="wek" onClick="header_show_down('+days[7*j+i]+')">'+days[7*j+i]+'</td>';
} else {
 
str=str+'<td class="norm" onClick="header_show_down('+days[7*j+i]+')">'+days[7*j+i]+'</td>';
}}}
}
str=str+'</tr>';
}
str=str+'</table>';
header_show_down(day_dw.value);
if (a!=0) monthyear1.innerHTML=str;

}
 
 

 
и html страничка:

Код:
 
<HTML><HEAD><TITLE>календарь</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<base target="cont">
<STYLE>
td {
background-color:#ffffdd;
}
.ram {
background-color:#ccffff;
}
H1 {text-decoration:underline;
}
.norm {
width:20px;height:20px;cursor:hand;
}
#tble {
border:1;width:178px;cursor:hand;
}
#nechto {
border:1;width:225px;position:absolute;z-index:200;
}
#nechto1 {
border:1;width:225px;position:absolute;z-index:199;
}
#calendar {
position:static;
}
#set {
background-color:aqua;
}
#wek {
background-color:#ffff00;
 
}
</STYLE>
<SCRIPT language="JavaScript" src="script.js"></SCRIPT>
</HEAD>
 
<BODY onLoad="init(0);init_down(0);header();" onClick="header();" leftMargin="0" topMargin="10" marginheight="0" marginwidth="0"><center>
<INPUT type=hidden name=day   /><INPUT type=hidden name=month /><INPUT type=hidden name=year  />
<INPUT type=hidden name=day_dw   /><INPUT type=hidden name=month_dw /><INPUT type=hidden name=year_dw  />
 
<DIV id="calendar">
  <TABLE id="nechto" cellSpacing=0>
<TR>
 <TD onClick="init(-1)" onDblClick="init(1)" align=right valign="top" width=5%><<</TD>
 <TD align=center><DIV id="monthyearhead"></DIV><DIV id="monthyear"></DIV>
 </TD>
 <TD onClick="init(1)" onDblClick="init(-1)" align=left valign="top" width=5%>>></TD>
</TR>
  </TABLE>
</DIV>
 
</BODY></HTML>
 

 
Кому интересно - можете пользоваться, только, пожалуйста, ссылайтесь на автора - ему будет очень приятно

Всего записей: 106 | Зарегистр. 17-09-2004 | Отправлено: 12:54 06-10-2004
Открыть новую тему     Написать ответ в эту тему

Страницы: 1 2

Компьютерный форум Ru.Board » Интернет » Web-программирование » Оцените календарь на JavaScript


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru