PDA

Просмотр полной версии : посоветуйте календарь на яваскрипт


Дикс
02.04.2009, 14:25
по возможности наиболее лёгковесный и простой

MuXaJIbI4
02.04.2009, 15:20
dcе зависит от того какуую функциональность должен нести

a1ex
02.04.2009, 15:24
<script language="JavaScript">
var firstYear= 1900
var lastYear= 2010

myDate= new Date
var curMonth= myDate.getMonth ()
var curYear= myDate.getYear ()
var curDate= myDate.getDate ()

Years= new Array (lastYear - firstYear);
Month= new Array ("Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь");

daysInMonth = new Array (31,28,31,30,31,30,31,31,30,31,30,31);
numbTableCell = 42

function updateCalendar(UcurYear,UcurMonth){

isLeap (UcurYear)
var firstDay= setFirstDay (UcurYear,UcurMonth)

if (firstDay == 0)
firstDay= 7
firstDay--

tableOffset= 10;
temp= 0
for (i=0; i < firstDay; i++){
calendar.all[i+ tableOffset ].innerText= " ";
calendar.all[i+ tableOffset ].bgColor= "#ffffff"
temp++
}
j= i + tableOffset

for (i=1; i <= daysInMonth[UcurMonth];i++){
if (temp == 7){
j++
temp= 0
}
if (curDate != i){
calendar.all[j].innerText= i
calendar.all[j].bgColor= "#ffffff"
}
else{
calendar.all[j].innerText= i
calendar.all[j].bgColor= "#a0d4ff"
}
temp++
j++
}
for (i=0;i < (numbTableCell- daysInMonth[UcurMonth]-firstDay); i++){
if (temp == 7){
j++
temp= 0
}
calendar.all[j].innerText= " ";
calendar.all[j].bgColor= "#ffffff"
temp++
j++
}
}

function outCalendar (FcurYear,FcurMonth)
{
isLeap (FcurYear)
var firstDay= setFirstDay (FcurYear,FcurMonth)

if (firstDay == 0)
firstDay= 7
firstDay--

document.write ('<table id= "calendar" cellspacing= 2 cellpadding= 0 border=1 Class="text">')
document.write ('<tr align= center bgColor="#78c850"><td>Пн</td><td>Вт</td><td>Ср</td><td>Чт</td><td>Пт</td><td bgColor="#f06c40">Сб</td><td bgColor="#f06c40">Вс</td></tr>')

temp= 0
j= 0
document.write ('<tr align= right>')
for (i=0; i < firstDay; i++){
document.write ('<td>&nbsp</td>')
temp++
j++
}
k= j

for (i= 1; i <= numbTableCell - k;i++){
if (temp == 7){
temp= 0
document.write ('</tr><tr align= right>')
}
if (i <= daysInMonth[FcurMonth]){
if (curDate != i)
document.write ('<td>'+ i +'</td>')
else
document.write ('<td bgColor= "#a0d4ff">'+ i +'</td>')
}
else
{
document.write ('<td>&nbsp</td>')
}

j++
temp++
}
document.write ('</tr></table>')
}

function setFirstDay (year,month){
var tempDay= new Date (year, month, 1)
return tempDay.getDay ()
}

function isLeap (year){
if (
(year % 4 == 0)&
( (year % 100 != 0) ||(year % 400 == 0) )
)
daysInMonth [1]= 29
else
daysInMonth [1]= 28
}

function insertSpace (num){
for(i=0;i<num;i++)
document.write ('&nbsp')
}

</script>
</head>

<body>
<script language= "JavaScript">
<!--
document.write ('<select name= "selMonth" size= 1 onChange= "updateCalendar (selYears.value,selMonth.value)">')
for (i= 0;i < Month.length; i++)
{
document.write ('<option value='+i+'>' + Month [i])
}
document.write ('</select>')
selMonth.selectedIndex= curMonth
insertSpace (1)
document.write ('<select name= "selYears" size= 1 onChange= "updateCalendar (selYears.value,selMonth.value)">')
for (i= firstYear ;i < lastYear; i++)
{
Years[i- firstYear]= i
document.write ('<option value='+i+'>'+ Years[i-firstYear])
}
document.write ('</select>')
selYears.selectedIndex= curYear - firstYear
document.write ('<br><br>')
outCalendar (curYear,curMonth)
//-->
</script>

m0nsieur
02.04.2009, 15:26
На сайте есть демо - http://www.dynarch.com/projects/calendar/

сам пользуюсь, удобный, не сложный по настройке.

a1ex
02.04.2009, 15:27
Вот собственно какой он получился:
http://s59.radikal.ru/i164/0904/e4/a822505fd7c6.jpg

a1ex
02.04.2009, 15:30
<html>
<head>
<title>Календарь</title>
</head>
<body>
<script language="Javascript" type="text/javascript">
<!--//
calendar = new Date();
day = calendar.getDay();
document.write("<table width=100 border=1><tr><td><center><font size=2>")
if (day == 0) {
document.write("<font color=#ff0000>Воскресенье</font>")
}
if (day == 1) {
document.write("Понедельник")
}
if (day == 2) {
document.write("Вторник")
}
if (day == 3) {
document.write("Среда")
}
if (day == 4) {
document.write("Четверг")
}
if (day == 5) {
document.write("Пятница")
}
if (day == 6) {
document.write("<font color=#ff0000>Суббота</font>")
}
document.write("</font></center></td></tr><tr><td><center><font size=2>")
month = calendar.getMonth();
if (month == 0) {
document.write("Январь")
}
if (month == 1) {
document.write("Февраль")
}
if (month == 2) {
document.write("Март")
}
if (month == 3) {
document.write("Апрель")
}
if (month == 4) {
document.write("Май")
}
if (month == 5) {
document.write("Июнь")
}
if (month == 6) {
document.write("Июль")
}
if (month == 7) {
document.write("Август")
}
if (month == 8) {
document.write("Сентябрь")
}
if (month == 9) {
document.write("Октябрь")
}
if (month == 10) {
document.write("Ноябрь")
}
if (month == 11) {
document.write("Декабрь")
}

document.write("</font></center></td></tr><tr><td><center><font size=6>")
date = calendar.getDate();
document.write(date)
document.write("</font></center></td></tr><tr><td><center><font size=2>")
year = calendar.getYear();
if (year < 100) {
document.write("19" + year + "")
}
else if (year > 1999) {
document.write(year)
}
document.write("</font></center></td></tr></table>")
//-->
</script>
</body>
</html>

http://s58.radikal.ru/i159/0904/93/ee3b9726169e.jpg

Дикс
02.04.2009, 16:00
блин)) чересчур уж простой)
мне надо на сайт прикрутить.
там был календарь на ext js - страница весила примерно 600 кб)

за
http://www.dynarch.com/projects/calendar/
спасибо.

sabotag
02.04.2009, 16:32
[оффтоп]
_http://www.smashingmagazine.com/2008/06/23/creative-calendar-designs/
[/оффтоп]

:)

добавлено:
_http://www.smashingmagazine.com/2009/03/08/70-new-useful-ajax-and-javascript-techniques/
_http://www.smashingmagazine.com/2008/09/11/75-really-useful-javascript-techniques/

среди всех скриптов есть то, что ищете

MCSnake
02.04.2009, 21:57
Вот собственно какой он получился:
http://s59.radikal.ru/i164/0904/e4/a822505fd7c6.jpg
а можно полный код страницы? че та у меня ниче не выходит(

Дикс
03.04.2009, 07:20
http://www.smashingmagazine.com/2009/03/08/70-new-useful-ajax-and-javascript-techniques/
кладезь передовых технологий! респект!