Документация

Настройка кнопок

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

Заданные в коде страницы параметры должен обработать специальный скрипт, который следует подключить следующим образом:

<script src="//yastatic.net/forgetmenot/forgetmenot.min.js"></script>

Подключив скрипт, укажите в коде страницы параметры кнопки и напоминания.

Поддерживаемые параметры:

  • обязательные — заголовок напоминания, его описание и дата;
  • необязательные — требование дополнительных напоминаний по электронной почте и SMS, а также размер и цвет кнопки.

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

Статические кнопки

Кнопки с заранее заданными параметрами напоминаний задаются в коде следующим образом:

<html>
<head>
  <meta charset="utf-8"/>
  <script src="//yastatic.net/forgetmenot/forgetmenot.min.js"></script>
</head>
<body>
  <div class="ya-forgetmenot-autoinit"
     data-forgetmenot-name="Имя события"
     data-forgetmenot-description="Описание события"
     data-forgetmenot-reminder-date="2013-10-10T12:00:00Z"
     data-forgetmenot-size="m"
     data-forgetmenot-theme="yellow">
  </div>
</body>

Используемые HTML-атрибуты:

  • class="ya-forgetmenot-autoinit" — CSS-класс, указывающий на кнопку со статически заданными параметрами.
  • data-forgetmenot-name — заголовок события.
  • data-forgetmenot-description — описание события.
  • data-forgetmenot-reminder-date — дата события в формате ISO 8601.
  • data-forgetmenot-size — размер кнопки. Возможные размеры:

    • «s» — маленький;
    • «m» — средний, размер по умолчанию;
    • «l» — большой.
  • data-forgetmenot-theme — цвет кнопки. Возможные цвета:

    • «yellow» — желтый, цвет по умолчанию;
    • «blue» — синий;
    • «white» — белый;
    • «green» — зеленый.
  • data-forgetmenot-icon — иконка на кнопке. Доступные иконки:

    • «ru» — заглавная «Я» из «Яндекс»;
    • «en» — заглавная «Y» из «Yandex»;
    • «bell» — колокольчик.

Все возможные варианты кнопок с иконкой колокольчика:

Динамические кнопки

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

Ниже приведен пример страницы с динамической кнопкой, для которой можно задать дату, заголовок и описание напоминания. Кнопка отображается в блоке с CSS-классом ya-forgetmenot-js-init, по нажатию кнопки Запустить.

<div class="block">
  <div class="controls">
    <form id="update-me">
      <label>
       Название:
       <input type="text" name="name" value="название">
      </label>
      <br/>
      <label>
       Описание:
       <input type="text" name="description" value="описание">
      </label>
      <br/>
      <label>
       Дата (в формате ISO8601 YYYY-MM-DDTHH:MM:SS+04:00):
       <input type="text" name="reminderDate" value="2013-09-12T12:00:00+04:00" size="35">
      </label>
      <br/>
      <input type="submit" value="Запустить"/>
    </form>
  </div>

  <div id="ya-forgetmenot-js-init"></div>
</div>

<script src="//yastatic.net/forgetmenot/forgetmenot.min.js"></script>
<script>
    var nezabudka;
    $('body').on('submit', '#update-me', function() {
        var formData = $(this).serializeArray();
        var nezabudkaParams = {};
        for (var i = 0; i < formData.length; i++) {
            var param = formData[i];
            nezabudkaParams[param.name] = param.value;
        }

        try {
            if (nezabudka) {
                nezabudka.update(nezabudkaParams);
            } else {
                nezabudka = new Ya.ForgetMeNot('ya-forgetmenot-js-init', nezabudkaParams);
            }
        } catch(e) {
            alert(e.toString());
        }

        return false;
    });
</script>

</body>
</html>