- Веб-Шаблоны
- Шаблон интернет-магазина
- Шаблоны для CMS
- Facebook шаблоны
- Конструктор сайтов
FAQs
General Tutorials
Новые шаблоны
og体育首页ONE Subscrioption
JS Animated. Как работать с RD календарём
Февраль 2, 2016
Из этого туториала Вы узнаете, как работать с расширением RD календарь в Веб-шаблонах HTML.
JS Animated. Как работать с RD календарёмВ Веб-шаблонах HTML используется расширение RD календарь для реализации функционала календаря событий:
Для того чтобы внести изменения в расширение RD календарь, найдите файл index.html, который отображает календарь.
Для того чтобы добавить месяц или событие в календарь, скопируйте существующий код и измените даты на нужные Вам.
Базовая HTML структура кода календаря выглядит следующим образом:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <div class="rd-calendar"> <div class="rdc-panel"> <a class="rdc-next"></a> <a class="rdc-prev"></a> <div class="rdc-today_day"></div> <div class="rdc-today_date"></div> <div class="rdc-today_month"></div> <div class="rdc-today_fullyear"></div> <div class="rdc-month"></div> <div class="rdc-fullyear"></div> </div> <div class="rdc-table"></div> <div class="rdc-events"> <a class="rdc-events_close"></a> <ul> <li class="rdc-event first" data-date="10/28/2015"> Event 1 </li> <li class="rdc-event last" data-date="10/31/2015"> Event 2 </li> </ul> </div></div> |
Карта классов HTML кода календаря
RD календарь включает следующие структурные элементы, которые позволят Вам создать календарь:
- .rdc-today_day — отображает текущий день недели;
- .rdc-today_date — отображает текущий день месяца;
- .rdc-today_month — отображает текущий месяц;
- .rdc-today_fullyear — отображает текущий год;
- .rdc-panel — отображает информационную панель;
- .rdc-prev — отображает элемент управления «Предыдущий месяц»;
- .rdc-next — отображает элемент управления «Следующий месяц»;
- .rdc-month — отображает месяц;
- .rdc-fullyear — отображает год;
- .rdc-table — отображает таблицу дней месяца;
- .rdc-table_day — отображает один день недели;
- .rdc-table_date — отображает один день месяца;
- .rdc-table_events — отображает события дня;
- .rdc-table_has-events — отображает дни, к которым добавлены события;
- .rdc-table_events-count — отображает количество событий, закреплённых за определённым днём;
- .rdc-table_event — отображает событие дня;
- .rdc-table_today — отображает текущую дату;
- .rdc-table_prev — отображает таблицу дней предыдущего месяца;
- .rdc-table_next — отображает таблицу дней следующего месяца;
Настройка отображения дней
По умолчанию, RD календарь отображает дни следующим образом:
Вс, Пн, Вт, Ср, Чт, Пт, Сб
Для того чтобы задать пользовательский формат отображения дат, используйте атрибут data-days для календаря. Укажите ряд дней, отделённых запятыми в структуре кода HTML:
1 2 3 | <div class="rd-calendar" data-days="Sn, Mn, Te, Wd, Th, Fr, St"> ...</div> |
Настройка отображения месяцев
По умолчанию, RD календарь отображает месяца следующим образом:
Январь, Февраль, Март, Апрель, Май, Июнь, Июль, Август, Сентябрь, Октябрь, Ноябрь, Декабрь
Для того чтобы задать пользовательское отображение месяцев, используйте атрибут data-months для календаря. Укажите ряд месяцев, отделённых запятыми в структуре кода HTML:
1 2 3 4 | <div class="rd-calendar" data-months="Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec"> ...</div> |
Управление событиями в календаре
Для того чтобы закрепить событие за определённой датой, используйте следующую структуру кода события в списке событий календаря.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!-- RD Calendar --><div class="rd-calendar"> ... <!-- Events List Holder --> <div class="rdc-events"> … <!-- Events List --> <ul> <!-- Create Event --> <li class="rdc-event first last" data-date="10/28/2015"> Event 1 </li> </ul> </div></div> |
Обратите внимание: атрибут даты data-date=»10/28/2015″ в событии .rdc-event является обязательным. Значение атрибута необходимо задать в формате MM/DD/YYYY, иначе это событие не будет отображаться в списке событий в календаре. Само событие может иметь любую структуру кода.
Вы можете также ознакомиться с детальным видео-туториалом ниже:
JS Animated. Как работать с RD календарём