Простой календарь

Описание:
Если вам нужен простой, элегантный календарь для отображения текущей даты и месяца, данный календарь является отличным дополнения для сайта.

Скачать

Демо:

Шаг 1: Вставлять между тегами <head> и </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>

Шаг 2: Вставлять между тегами <body> и </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>

Дополнительная информация

Чтобы отобразить календарь и настройки его используеться функция buildCal():

document.write(buildCal(4, 2003, "main", "month", "daysofweek", "days", 0));

Параметров:

4 Отобразить указаный месяц, где 1 = январь, а 12 = декабрь;
2003 Отобразить указаный год;
main Имя класса CSS, для таблицы;
month Имя класса CSS, для шапки;
daysofweek Имя класса CSS, для недель;
days Имя класса CSS, для дат;
0 Толщина границы между всеми клетками. 0 = нет границы.

Отображения предыдущего, текущего и будущего месяца

Ниже пример, отображения календаря для предыдущего, текущего и будущего месяца. Заменяем код в Шаге 2 на нижний:


    <script type="text/javascript">
    var todaydate=new Date()
    var curmonth=todaydate.getMonth()+1 //Получить текущий месяц (1-12)
    var curyear=todaydate.getFullYear() //Получить текущий году
    </script>
    
    <script>
    document.write(buildCal(curmonth-1 ,curyear, "main", "month", "daysofweek", "days", 1));
    </script>
    
    <script>
    document.write(buildCal(curmonth ,curyear, "main", "month", "daysofweek", "days", 1));
    </script>
    
    <script>
    document.write(buildCal(curmonth+1 ,curyear, "main", "month", "daysofweek", "days", 1));
    </script>
    

Отображения Динамический календарь

Также с помощью данного скрипта вы можите создать Динамический календарь. Заменяем код в Шаге 2 на нижний:


<form>
   <select onChange="updatecalendar(this.options)">
        <script type="text/javascript">
            var themonths=[
                'Январь',
                'Февраль',
                'Март',
                'Апрель',
                'Май',
                'Июнь',
                'Июль',
                'Август',
                'Сентябрь',
                'Октября',
                'Ноябрь',
                'Декабрь'
            ];
            var todaydate=new Date()
            var curmonth=todaydate.getMonth()+1 //Получить текущий месяц (1-12)
            var curyear=todaydate.getFullYear() //Получить текущий году
            function updatecalendar(theselection){
                var themonth=parseInt(theselection[theselection.selectedIndex].value)+1
                var calendarstr=buildCal(themonth, curyear, "main", "month", "daysofweek", "days", 0)
                if (document.getElementById)
                document.getElementById("calendarspace").innerHTML=calendarstr
            }
            document.write('<option value="'+(curmonth-1)+'" selected="yes">Текущий месяц</option>')
            for (i=0; i<12; i++) 
            document.write('<option value="'+i+'">'+themonths[i]+' '+curyear+'</option>')
        </script>
    </select>
    <div id="calendarspace">
        <script>
            document.write(buildCal(curmonth, curyear, "main", "month", "daysofweek", "days", 0))
        </script>
   </div>
</form>

Ориганальная страница: http://dynamicdrive.com/dynamicindex7/basiccalendar.htm

  JavaScript    31 августа 2016, 15:52

Комментарии (0)

    Контакты офиса:

     Россия, 610004, Ленинский район, улица Ленина, 2/1, 5 этаж, офис 10

    Алексей
     8(912)734-57-67 (технический директор)

    Сергей
     8(953)697-38-95

     mail@st-arta.ru

    Контакты офиса:

     Россия, 610004, Ленинский район, улица Ленина, 2/1, 5 этаж, офис 10

    Алексей
     8(912)734-57-67 (технический директор)

     mail@st-arta.ru