Логотип Валидатор Валидатор Качество создания сайта

КАЛЕНДАРЬ

Календарь для сайта

Данную страницу сайта создал для получения практических навыков использования JavaScript. Показываю работу кода автоматического календаря, спрограммированного во время изучения этой технологии.
Сделал его начало с 2010 года, и по 2018 год включительно.

Хороший календарь



При старте: показывает текущий год, месяц и день (его сделал бирюзовым).

Этот календарь хорош тем, что может рассчитывать, сколько дней в месяце, и какими днями недели будут числа в выбранных месяцах и годах, подсвечивать нужную дату.

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


Настройка дизайна календаря

Этот календарь имеет достаточно много настроек в коде, позволяющих настраивать его дизайн, как угодно.

В нём можно сделать так, чтобы текущее число выделялось не бирюзовым ("aqua"), а любым другим, каким только захочется цветом.

**Примеры.  Во 2-ой строчке кода вызова есть функция draw_cal(). Вот в ней то и задаются цвета для настройки внешнего вида календаря.

Все значения указал, начиная с КОНЦА выражения!

Подсветка выбранного числа → первое с конца значение (сейчас "yellow" - жёлтый).

Фоновый цвет календаря → второе с конца значение (сейчас "silver" - серебряный).

Фоновый цвет текущей даты → третье с конца значение (сейчас "aqua" - бирюзовый).

Цвет букв выходных дней → четвёртое с конца значение (сейчас "white" - белый).

Цвет букв остальных дней → пятое с конца значение (сейчас "white" - белый).

Фоновый цвет выходных дней → шестое с конца значение (сейчас "red" - красный).

Фоновый цвет остальных дней → седьмое с конца значение (сейчас "gray" - серый).

Жирность выводимых дней → восьмое с конца значение (сейчас "bold" - жирные).

Высота секций календаря → девятое с конца значение (сейчас "16" - пикселей).

Ширина секций календаря → десятое с конца значение (сейчас "30" - пикселей).

* * *

Таким образом, меняя значения цветов в указанной строчке кода функции, можно настроить дизайн данного календаря, подходящим под любой сайт.


Как сделать календарь

Чтобы установить на своем сайте календарь, нужно написать два JavaScript-кода.

Первый - код самого календаря. Он из двух - самый сложный, длинный, тяжёлый, и имеет целых 109 активных строчек.

Рекомендуется "вынести" этот код в отдельный js-файл, чтоб не прописывать на каждой странице, а просто "подгружать" его на нужных страничках сайта.

В данном случае я так и сделал, и код моего календаря "живёт" в отдельном каталоге.

**Prim.  Скачать себе на компьютер этот самый большой скрипт можно у меня же на сайте в разделе "Полезное" из подраздела "Полезная информация о JavaScript и jQuery".

Второй - код вызова этого календаря, причём(!), код вызова должен располагаться обязательно внутри тэга формы.

В том месте веб-страницы, где нужно вывести данный календарь, там и добавляется его HTML-код вызова.


Прописывание JavaScript-кодов

Коды js-скриптов МОГУТ иметь переносы длинных строчек, НО(!) необходимо помнить, когда(?) нужно писать их в одну строку!

Внимание! Важно!
В одну строку следует объединять строчки, которые заканчиваются на знак " + ", либо " ' ", или " = ".


Очерёдность кодов календаря

Если по каким-то причинам будет нужно прописать его код в одном единственном файле, а НЕ через внешний подключаемый js-файл в тэге <head>, как рекомендуется, и как я сделал в данном случае, то нужно соблюдать ОЧЕРЁДНОСТЬ!

JavaScript-код календаря нужно размещать непосредственно перед его HTML-кодом вызова. В противном случае - они работать не будут!


Другие календари для сайта

Представил в этом разделе очень хороший календарь, удобный! Постоянно им пользуюсь, когда мне нужно бывает посмотреть ту или иную дату в прошлом, или в будущем. К тому же - его дизайн легко настраивать, и просто делать.

Однако!   Для того чтобы передавать выбранные даты в какую-либо другую форму или файл, придётся использовать более сложный способ.
А именно - совместное использование JavaScript и PHP, т.е. Ajax, о чём достаточно подробно, с примерами, рассказал на странице "PHP и JavaScript" (в новом окне).

Ещё один пример использования всплывающего автоматического календаря, можно посмотреть здесь: jQuery UI Виджеты: календарь (откроется в новом окне).

* * *

Кроме упомянутых здесь, на этой странице, способов сделать календарь для своего сайта, есть, разумеется, и другие.
Сейчас, практически, любой поисковик, будь то "Yandex", "Mail", или "Google", даёт возможность подключить к сайту календарь. Достаточно будет вставить на свой сайт код, который они дают любому желающему пользователю уже готовый.

Но! Всё это сервисы! А своё - оно и есть своё! Работает БЕЗ вмешательства каких бы то ни было сторонних сервисов, пусть даже и очень хороших.

Однако! Нужно помнить!   Подробно разобранный на этой странице способ сделать календарь будет работать только на "ручных" сайтах, т.е. сделанных исключительно БЕЗ использования всевозможных конструкторов, и всяких там разных CMS.

Примеры на этой странице сделаны во время изучения, и приведены ДЛЯ изучения технологии JavaScript!

* * *


Стрелка "НАЗАД" вернёт обратно в раздел "JavaScript" для просмотра других примеров использования этой технологии.

В JavaScript

ВВЕРХ

Все права защищены. Copyright © 2009 - 2017 Коротеев Владимир.

Protected by Copyscape Duplicate Content Check
Яндекс.Метрика
Рейтинг@Mail.ru