КАЛЕНДАРЬ

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

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

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

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

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

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

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

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

В нём можно сделать так, чтобы текущее число выделялось не бирюзовым ("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" для просмотра других примеров использования этой технологии.

ВВЕРХ