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

Ваше имя

Ваш e-mail

Ваше сообщение (обязательно)

captcha

Новые шаблоны

JS Animated. Как работать с RD календарём

Из этого туториала Вы узнаете, как работать с расширением RD календарь в Веб-шаблонах HTML.

JS Animated. Как работать с RD календарём

В Веб-шаблонах HTML используется расширение RD календарь для реализации функционала календаря событий:

JS_Animated._How_to_work_with_RD_Calendar_img1

Для того чтобы внести изменения в расширение RD календарь, найдите файл index.html, который отображает календарь.

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

Базовая HTML структура кода календаря выглядит следующим образом:

<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" data-date="10/28/2015">
                Event 1
            </li>
            <li class="rdc-event" 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:

<div class="rd-calendar" data-days="Sn, Mn, Te, Wd, Th, Fr, St">
    ...
</div>

Настройка отображения месяцев

По умолчанию, RD календарь отображает месяца следующим образом:

Январь, Февраль, Март, Апрель, Май, Июнь, Июль, Август, Сентябрь, Октябрь, Ноябрь, Декабрь

Для того чтобы задать пользовательское отображение месяцев, используйте атрибут data-months для календаря. Укажите ряд месяцев, отделённых запятыми в структуре кода HTML:

<div class="rd-calendar" data-months="Jan, Feb, Mar, Apr, May,
        Jun, Jul, Aug, Sep, Oct, Nov, Dec">
    ...
</div>

Управление событиями в календаре

Для того чтобы закрепить событие за определённой датой, используйте следующую структуру кода события в списке событий календаря.

<div class="rd-calendar">
    ...
    
    <div class="rdc-events">
        …
        
        <ul>
            
            <li class="rdc-event" data-date="10/28/2015">
                Event 1
            </li>
        </ul>
    </div>
</div>

Обратите внимание: атрибут даты data-date=»10/28/2015″ в событии .rdc-event является обязательным. Значение атрибута необходимо задать в формате MM/DD/YYYY, иначе это событие не будет отображаться в списке событий в календаре. Само событие может иметь любую структуру кода.

Вы можете также ознакомиться с детальным видео-туториалом ниже:

JS Animated. Как работать с RD календарём