Add to Calendar.js

Простая и удобная интеграция одной или нескольких кнопок, настраиваемых непосредственно в HTML-коде.

Поддерживаемые Календари

• Google Календарь.
• Apple Календарь.
• Yahoo Календарь.
• Microsoft 365, Outlook и Teams.
• Автоматически сгенерировано iCal/ics файлов (для всех остальных календарей и случаев).

Типы событий

• Мероприятия с ограничением по времени и без.
• Разовое, на несколько дат, повторяющееся.
• Подписка на календарь.
• Самое надёжное управление часовыми поясами и переходом на летнее время (с помощью нашей собственной библиотеки TimeZones iCal).
• Динамические даты (например, «сегодня + 3»).

Специальные возможности

• Оптимизированный и настраиваемый пользовательский интерфейс (для ПК и мобильных устройств).
• Динамическое позиционирование в раскрывающемся списке.
• Мы позаботились обо всех пограничных случаях, когда некоторые сценарии не поддерживают определенные настройки (например, блокировку загрузок в WebView), и использовали удобные обходные пути для пользователей.
• Автоматически сгенерированные расширенные (структурированные) данные Schema.org для улучшения SEO.
• Полная поддержка ввода с помощью мыши, сенсорного экрана или клавиатуры (соответствует стандарту W3C WAI).
• Поддержка более 20 языков, в том числе Текст в обратном порядке для арабского и персидского языков, а также пользовательские метки и текстовые блоки (i18n).

Пошаговая установка
Add to Calendar.js к сайту

Установка с помощью npm npm install add-to-calendar-button Импортируйте модуль в свой проект import 'add-to-calendar-button';

Настройка

Кнопку можно легко создать с помощью соответствующего пользовательского элемента. <add-to-calendar-button></add-to-calendar-button>
<!-- Или просто ... -->
<add-to-calendar-button />

Затем вы можете настроить кнопку, просто добавив к ней параметры в качестве атрибутов. Логические значения (true/false) можно задать как optionName="true" или просто добавив optionName к тегу. Если параметр не задан, он автоматически будет переведен в значение "false".

Минимальная структура (без PRO)

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

<add-to-calendar-button
name="Добавьте название вашего мероприятия"
startDate="2022-02-21"
options="['Google']"
timeZone="America/Los_Angeles"
/> Более наглядный пример (без PRO) <add-to-calendar-button
name="Добавьте название вашего мероприятия"
description="Хорошее описание не помешает"
startDate="2022-02-21"
endDate="2022-03-24"
startTime="10:13"
endTime="17:57
location="Где - то над радугой"
options="['Apple','Google','iCal','Microsoft365','Outlook.com','Yahoo']
timeZone="Europe/Berlin
trigger="click"
inline
listStyle="modal"
iCalFileName="Напоминание о событии"
/>