Название, место, дата и время, часовой пояс, повторение, приглашённые, напоминания и заметки — затем скачайте файл .ics или откройте его прямо в календаре. Также можно вставить расписание или прикрепить документ либо фотографию, чтобы создать сразу несколько событий.
Как разместить кнопку «Добавить в календарь» или конструктор событий на своём сайте?
Конструктор ICS Maker поставляется как отдельный скрипт: один пустой элемент, один тег script, указывающий на event-creator.js, и один вызов EventCreator.mount() — без этапа сборки, без фреймворка, без аккаунта, без ключа и без ограничения на количество просмотров. Бандл представляет собой единый самодостаточный IIFE размером менее 85 КБ в сжатом виде вместе со встроенной библиотекой рендеринга, и он вообще не выполняет сетевых запросов: ни аналитики, ни шрифтов, ни CDN, поэтому он не добавляет ни одного источника в Content-Security-Policy и ни одного абзаца в политику конфиденциальности. Каждый цвет, радиус и шрифт задаются как пользовательское CSS-свойство внутри .ec-root, тёмная тема следует системным настройкам посетителя, а на React-сайте компонент можно рендерить напрямую, не загружая бандл.
Один тег script
<div id="event-creator"></div>
<script src="https://icsmaker.com/event-creator.js"></script>
<script>
EventCreator.mount('#event-creator', { showPreview: false });
</script>Бандл несёт собственный рендеринг, собственные стили и не требует установки никаких зависимостей. Он ни с кем не взаимодействует — ни аналитики, ни шрифтов, ни CDN, — поэтому политике конфиденциальности вашей страницы не нужен новый абзац, а строгой Content-Security-Policy не нужен новый источник.
Оформление под ваш сайт
Каждый цвет, радиус и шрифт задаются как пользовательское CSS-свойство внутри .ec-root, поэтому переопределение --ec-accent обычно и составляет всю работу по оформлению. Он самостоятельно следует предпочтению посетителя по тёмной теме, а панель предпросмотра можно отключить с помощью showPreview: false, если места не хватает.
Уже используете React?
Пропустите бандл и рендерите компонент напрямую — та же логика форм, но на странице на одну копию библиотеки рендеринга меньше.
Вопросы
- Отправляет ли встраиваемый элемент что-либо на ваши серверы?
- Нет. Это статический файл, который полностью работает в браузере посетителя: ни аналитики, ни телеметрии, ни обращений домой. Вы можете разместить бандл у себя, если не хотите загружать его с этого домена.
- Какой у него размер?
- Менее 85 КБ в сжатом виде, включая библиотеку рендеринга, и он загружается после вашей страницы, а не блокирует её. Сборка завершается ошибкой, если бандл когда-либо превысит этот размер, поэтому указанное на этой странице число не может незаметно перестать быть правдой.
- Могу ли я ограничить форматы, которые посетители могут скачивать?
- Вызов mount принимает параметры — формат по умолчанию, дату по умолчанию, предзаполненный черновик и нужно ли показывать предпросмотр, — а React-компонент принимает те же параметры в виде props.