Преглед на урок

Обикновен календар

Обикновен календар




Обикновен календар

Здравейте отново! Ако Ви е нужен обикновен календар, нещо съвсем просто за направа, ето сега ще Ви покажа как става това.

Стъпка 1:

Качвате на сървъра си следния файл: basiccalendar.js

Стъпка 2:

Поставете следния код, преди:

Код
</head>
Код
<style type="text/css">

.main {
width:200px;
border:1px solid black;
}

.month {
background-color:black;
font:bold 12px verdana;
color:white;
}

.daysofweek {
background-color:gray;
font:bold 12px verdana;
color:white;
}

.days {
font-size: 12px;
font-family:verdana;
color:black;
background-color: lightyellow;
padding: 2px;
}

.days #today{
font-weight: bold;
color: red;
}

</style>


<script type="text/javascript" src="basiccalendar.js">



</script>
С този код Вие можете да промените "дизайна" на вашия календар.

Стъпка 3:

И сега идва вече края. Копирайте следния текст, където искате да се намира вашия календар:

Код
<script type="text/javascript">

var todaydate=new Date()
var curmonth=todaydate.getMonth()+1 //От тук се извежда текущия месец (1-12)
var curyear=todaydate.getFullYear() //От тук се извежда годината

document.write(buildCal(curmonth ,curyear, "main", "month", "daysofweek", "days", 1));
</script>
Малко разяснение:

Този календар използва функцията buildCal(), за да се покаже календара. Функцията изглежда така:

Код
buildCal(4, 2003, "main", "month", "daysofweek", "days", 0)

4 - Номера на месеца, който искате да показвате на вашия календар (пример - 1=Януари ; 2=Февруари и т.н.)
2003 - Годината, която искате да покажете.
main - Името на функцията в CSS-а, която извежда "дизайна" на таблицата (която всъщност представлява календара)
month - Името на функцията в CSS-а, която извежда "дизайна" на календара (там където пише месеца, година и пр.)
daysofweek - Името на функцията в CSS-а, която извежда "дизайна" на дните.(по редове)
days - Името на фунцкията в CSS-а, която извежда "дизайна" на дните. (по колони)
0 - С тази функция избирате каква да е големината на бордерите.

Функцията buildCal() лесно показва резултата на календара, без да е нужна да повтаряте непрекъснато document.write() функцията, както е показано в долния пример:

Код
document.write(buildCal(4, 2003, "main", "month", "daysofweek", "days", 0))

=======================

Ето го и целия код, така както би изглеждал ако на web-страницата стои само календара:

Код
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Basic Calendar</title>
<style type="text/css">

.main {
width:200px;
border:1px solid black;
}

.month {
background-color:black;
font:bold 12px verdana;
color:white;
}

.daysofweek {
background-color:gray;
font:bold 12px verdana;
color:white;
}

.days {
font-size: 12px;
font-family:verdana;
color:black;
background-color: lightyellow;
padding: 2px;
}

.days #today{
font-weight: bold;
color: red;
}

</style>


<script type="text/javascript" src="basiccalendar.js">



</script> 
</head>

<body>
<script type="text/javascript">

var todaydate=new Date()
var curmonth=todaydate.getMonth()+1 //От тук се извежда текущия месец (1-12)
var curyear=todaydate.getFullYear() //От тук се извежда годината

document.write(buildCal(curmonth ,curyear, "main", "month", "daysofweek", "days", 1));
</script>
</body>

</html>
Ами резултата е на лице. Имате си нов, опростен, календар за вашия сайт!

За да видите демо на този урок, кликнете тук !

Надявам се, да Ви е харесало.

Успех, wargod!

Ако урокът ви допада, споделете го в Twitter и Facebook или го запазете в Delicious.




Урокът е добавен от: bubsss

Коментари

ufchica

Супер е! Най-харесвам простички и лесно разбираеми уроци! Много благодаря.

streleca_stz

Много ти благодаря :) Точно такъв вид календар ми трябваше

c1ko

Ако се "барнат" малко цветовете ще е супер.

Lo0pY

Браво Добра работа ;)

Добави коментар

Трябва да сте регистиран потребител за може да оставяте коментари! Направете своята безплатна регистрация още сега.