Как вставить календарь в html

i, D.getMonth() и D.getFullYear() объединены символами &&
это условие берём в скобки и при необходимости пишем ещё одно условие, также в скобках. Условия объединяются символами ||

#calendar2 tbody td.today

NMitra В стилях что ниже, то и имеет приоритет. Так текущая дата

А так дата каникул

Я бы текущую дату выделила не фоном, а рамкой

Источник

Как создать красивый виджет Календарь

Russian (Pусский) translation by Ilya Nikov (you can also view the original English article)

В сегодняшнем премиальном учебнике и скринкасте я расскажу вам, как создать прозрачный календарный виджет. Мы будем использовать CSS3, чтобы придать ему блестящий внешний вид, а затем добавить некоторые довольно приятные функции с JavaScript.

Шаг 0. Идея

Шаг 1. HTML-код

Мы начнем с создания нашей структуры HTML. Конечно, мы начнем с каркаса:

Я открою вам один секрет: когда я изначально построил пользовательский интерфейс этого календаря, у меня была только одна таблица с thead для дней и tbody для сетки календаря; но как только я начал писать JavaScript для переключения между месяцами, стало очевидно, что мне нужно использовать что-то более гибкое. Вы поймете, почему, когда мы доберемся до JavaScript.

Итак, это идет в заголовок:

Содержимое table#days довольно простое:

Наконец, у нас есть внутренности div#cal-frame ; проверьте их, и затем мы обсудим это:

Полный скринкаст

Итак, что у нас здесь? В принципе, мы создаем сетку календаря с таблицей (позже мы будем динамически вставлять текущий месяц). Соответствующие ячейки имеют номера дат; если ячейки пусты, у них есть класс «nul»; наконец, сегодняшняя дата имеет класс «today».

Шаг 2. CSS

Начнем с некоторого окружения:

Довольно очевидно, а? После установки цвета фона мы центрируем виджет календаря горизонтально и даем ему тень окна. Конечно, мы устанавливаем шрифт. Но почему мы устанавливаем отображение в таблицу? По умолчанию div будет отображаться в виде блока, что означает, что он займет всю доступную ширину; отображая его как таблицу, он будет занимать наименьшую ширину (пока он все еще содержит его дочерние элементы) и по-прежнему является блочным элементом.

Затем давайте сосредоточимся на панели заголовка:

Вот первая часть стиля заголовка; мы начинаем с установки курсора на указатель; текст, как правило, не будет выбираться. Затем мы установим красный цвет фона; однако, если браузер поддерживает его, мы будем использовать фоновый градиент: не забудьте добавить его как для mozilla, так и для webkit! Затем установите высоту 34px; мы установим положение относительное, потому что дочерние элементы будут позиционированы абсолютно; по положению родительского элемента относительно, дочерние будут помещены абсолютно по отношению к родителю, а не к body. Установите цвет текста на белый, вокруг верхнего левого и правого углов и сделайте шрифт полужирным. Затем создайте небольшую текстовую тень, чтобы текст выглядел c отступом. Наконец, преобразуйте текст в верхний регистр.

Каждый из элементов в заголовке представляет собой span ; каждый из них будет отображаться как встроенный блок. Также дайте им высоту строки 34px (высота заголовка).

Эти span также имеют некоторые специальные классы, поэтому давайте посмотрим на них:

Во-первых, у нас класс «hook»; помните, что это хуки или привязки календаря. Мы установим ширину и высоту. Затем расположите это абсолютно. Затем мы сдвинем его снизу на 60%. Мы закроем угол, чтобы обернуть привязки. Затем мы установим цвет фона; если браузер поддерживает градиенты, мы переопределим сплошной фон с градиентом. Затем мы дадим им тень коробки.

Затем мы будем использовать классы местоположения, чтобы расположить хуки горизонтально; если элемент имеет как классы как «hook», так и «right», то переместите его на 15% справа; если у него есть класс «left», переместите его на 15% слева.

Теперь у нас есть кнопки переключения месяца:

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

Наконец, мы добавим эффект нависания для кнопок; конечно, мы будем использовать градиент.

Есть еще один элемент для стилизации: это метка месяца.

Вот и весь заголовок! Я должен упомянуть, что, хотя мы полностью позиционировали большинство элементов, так как мы используем проценты для их размещения, все отлично масштабируется, когда вы увеличиваете или уменьшаете размер шрифта в браузере.

Хорошо, давайте перейдем к заголовкам дней.

Затем добавим определенный стиль для ячеек таблицы в таблице дней: мы немного уменьшим их высоту и высоту строки, убедитесь, что они в верхнем регистре, и сбросьте размер шрифта и цвет текста. (Примечание: в сопроводительном скринкасте я написал #day вместо #days в селекторе для третьего блока выше и никогда не исправлял это, убедитесь, что вы поняли это правильно!)

Для чего это последнее правило? Ну, в настоящее время на ячейках имен дней есть светло-серые границы. Мы хотим изменить цвет границ справа на белый, чтобы они не были видны. Однако мы не хотим делать это у последней ячейки в строке. Итак, мы можем использовать два псевдокласса. :not будет принимать параметр «исключающий селектор». :last-child захватывает последний дочерний элемент, который мы уже выбрали: в этом случае это ячейки таблицы. Затем мы просто установим правую границу сплошным белым.

Следующее правило применяет эффект зависания ко всем ячейкам таблицы в сетке календаря, за исключением тех, которые с классом «nil»; мы устанавливаем текст в белый цвет и добавляем текстовую тень. Затем мы меняем фон на красный, используя градиент, когда можем. Мы включаем удаление теневой коробки специально для ячейки с классом «today».

То, как мы отметим это, заключается в том, что каждую дату в ячейке таблицы помещаем в span.

Мы сделаем еще одну вещь; когда мы переключаемся между месяцами, мы хотим чтобы один медленно исчезал; для этого требуется, чтобы две таблицы находились поверх друг друга. Мы можем достичь этого:

Тот, который мы угасаем, будет иметь класс «temp»; новый, который мы показываем, чтобы остаться (на некоторое время), будет иметь класс «curr».

И все это с помощью CSS! Теперь перейдем к некоторой функциональности.

Шаг 3. JavaScript

Мы сделаем функциональность для нашего календаря легкой для повторного использования; учитывая это, начнем:

Таким образом, мы создаем три функции внутри нашей функции CALENDAR; одна будет инициализировать виджет календаря, вторая будет перемещаться между месяцами, а третья будет создавать сетку календаря; обратите внимание на строку: createCal.cache = <>; мы обсудим это тоже!

Вот содержание нашей функции init :

Перейдем к функции switchMonth :

Мы установим несколько переменных вверху; мы разбиваем метку на массив под названием curr ; мы также создаем переменную calendar и захватываем год текущего календаря.

Затем все становится сложнее. Я использовал условные операторы JavaScript, поэтому я могу поместить все это на одну строку. Вот что они делают:

Вы можете понять, почему условный оператор привлекателен: всего одна строка кода. Вот расширенная версия переменной года:

В конце всего, month и year будут правильными значениями для календаря, который мы пытаемся показать пользователю. Если вы почувствуете себя более комфортно, вы можете заменить эти две строки вышеприведенными фрагментами.

Затем мы создаем календарь и соответствующим образом корректируем DOM:

Мы обсудим, почему свойство calendar является методом, когда мы его создаем. А пока вернемся, чтобы поместить его на страницу. Мы получим фрейм календаря и найдем текущий календарь. Затем мы удалим класс «curr» и применим класс «temp»; затем мы помещаем новый календарь (который, кстати, идет с классом «curr»), а затем старый календарь исчезает и удаляется.

Затем мы создаем массив, который содержит количество дней в каждом месяце; для февраля нам нужно учитывать високосные годы, поэтому используйте другое тернарное выражение для расчета.

Вот что происходит: есть вероятность, что пользователь «запросит» один и тот же месяц более одного раза. Как только мы создадим его в первый раз, нет необходимости делать это снова; мы поместим его в кеш и вытащим его позже.

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

Затем нам нужно начать создавать календарь для запрошенного месяца.

Если мы не на первой неделе ( i! == 0 ), то мы будем следить за тем, чтобы у нас осталось несколько дней, чтобы добавить в календарь; если это так, мы вставляем их в слоты. Наконец, если мы не на первой неделе, и у нас нет дней, чтобы добавить месяц, мы вместо этого добавим пустую строку. Затем мы установим hasDays в false.

В конце мы проверим, будет ли day больше, чем количество дней в месяце; если это так, мы установим hasDays в false. Это для специального случая, когда месяц заканчивается в субботу.

Конечно, не забывайте увеличивать i за пределами цикла for!

Теперь пришло время конкатенации каждой недели в нашем calendar ; мы будем перебирать каждую из них в цикле for и переносить записи в строки таблицы, каждый день внутрь ячейки таблицы. Затем мы превратим все это в объект jQuery, после объединения всех строк таблицы и упаковки их таблицей. Затем мы добавим класс «curr» к этой таблице.

Все пустые ячейки таблицы (мы можем использовать псевдоселектор jQuery :empty, чтобы найти их), получат класс «nil».

Если мы создадим календарь для текущего месяца, мы найдем ячейку на сегодняшний день и дадим ей класс «today»; мы можем найти его, передав функцию в метод jQuery filter. Функция возвращает true, если текст ячейки соответствует дате.

Готово! Вернемся в файл index.html, добавим тег скрипта с этим:

Вот оно! Вот как выглядит наш готовый продукт!

Но я не могу показать вам функциональность; вам нужно будет проверить код самостоятельно! Спасибо за прочтение!

Источник

• ← штрих коды стран польша
• Riga black balsam с чем пить →