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

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

И так, давайте приступим.

Шаг 1. HTML

Начнем с разметки, так как мы используем плагин, нам необходимо оформить контейнер, для этого создадим небольшой контейнер с классом «fc-calendar-container«.

После этого нам необходимо активировать сам плагин, делаем это с помощью следующей команды.

Данный плагин преобразит разметку, в результате чего мы получаем конечный результат.

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

Теперь рассмотрим разметку для ячейки с содержанием. Получаем такую разметку.

Следует обратить внимание, что дни недели в каждой ячейке скрыты по умолчанию, по этому у нас есть шапка в календаре с днями недели. В частности календарь должен быть представлен в качестве таблицы, но из-за неправильного представления таблиц, в особенности IE, мы решили не использовать ее, конечно с помощью плагина вы сами можете настроить вывод таблиц.

Шаг 2. CSS

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

Мы будем определять разное соотношение сторон, в зависимости от количества строк, для этого используется calc(). Кроме этого нам необходимо задать ширину для внутренних блоков которая будет равна 100, установим разделенное на 7, получаем calc(100%/7).

Опции

Плагин достаточно гибкий, рассмотрим некоторые параметры которые заданные по умолчанию.

Кроме этого в параметрах доступны следующие методы.

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

Вот и все. Готово!

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