Зачем мне это?

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

Есть и ещё комфортный и популярный сервис: Google Calendar. Скорее всего им пользуется бОльшая часть вашей аудитории. Им удобно делиться, в нём можно создавать несколько календарей и настраивать их отображение. Есть удобные виджеты для Apple и Android. Инструмент крайне удобный, но всегда есть "Но". Если наша основная аудитория сосредоточена в сообществе ВК, и мы хотим удобный пунк в меню, по которому в один клик мы хотим направить наших подписчиков на удобный сервис -- это будет уже не так просто, потому что в пунктах меню сообщества можно указывать ссылки только на ресурсы ВКонтакте.

Сделаем нашим подписчикам удобно

Мы хотим, чтобы, открыв в очередной раз или наткнувшись впервые на наше сообщество, наши подписчики ознакомились со всеми мероприятиями, что мы запланировали, в один клик, и чтобы всегда информация о событиях была актуальна. Самое быстрое и простое решение -- это интегрировать календарь Google в наше сообщество ВК.

Что для этого нужно?

Даже если вы никогда не писали код, не пользовались средами разработки и боитесь консоли как огня, у вас всё получится, и может вы обретёте новые компетенции. В статье все примеры будут для Windows, но поскольку мы будем пользоваться кроссплатформенными инструментами, это сработает и для Linux, и для IOS.

Приступим! Начнём с основных настроек приложения. Заходим на https://dev.vk.com/

Дружелюбный интерфес прделгает нам создать приложение. Любезно соглашаемся и переходим к форме создания.

Как только мы заполним форму и нажмём "Перейти к настройке приложения". Сервис безопасности отправит нам VK Push нотификацию с просьбой подтвердить создание приложения.

На своём мобильном девайсе подтвердим создание.

Приступим к настройке нашего приложения, полагаю, не имеет смысла задерживаться на настройках информации о приложении. Подгрузка картинок согласно заданным размерам вряд ли вызовет затруднения. Нас интересуют основные настройки мини-приложения, а конкретно ID приложения и URL для vk.com.

Теперь непосредственно приступим к самому приложению, которым мы поделимся с подписчиками. Создадим Google Calendar, с нашими событиями.

Для этого в меню "Другие календари" выбираем пункт "Создать календарь". После создания нам доступны настройки календаря, перейдём к секции "Разрешения на доступ к мероприятиям" и прожимаем галочку "Сделать общедоступным". Секция: "Интеграция календаря", здесь нас интересует HTML-код, который будет начинаться с тега <iframe>.
Этот готовый код мы и будем использовать в качестве нашего приложения. Чтобы создать публичную HTML страницу, воспользуемся бесплатным хостингом ВК.

Далее мы делаем менее привычные для простого пользователя вещи, но всё так же несложные. Установим на ваш персональный компьютер Node.js (если такового ещё не имеется). Не меняя никаких настроек, и просто прожимая "Далее" легко и играючи устанавливаем инструмент. Теперь node.js ваш верный друг и помощник, который сделает всё за вас.

Теперь в меню Windows появилась возможно запуска командной строки node.js (Node.js command prompt), также у нас есть возможность запустить её из консоли (win + R, вводим "cmd" без кавычек), в открывшемся меню консоли вводим
>"C:\Program Files\nodejs\nodevars.bat" ,
если вы меняли путь установки node.js, префикс пути будет отличаться.

Увидим сообщение:
Your environment has been set up for using Node.js vv.vv.vv and npm.

Создадим на нашем ПК папку. Для простоты примера я буду использовать C:\tmp.
Перейдём в неё из открытой консоли: >cd C:\tmp

Попросим node.js создать для нас шаблонное мини-приложение во вложенной папке my_calendar:
>npx @vkontakte/create-vk-mini-app my_calendar

перейдём в созданную папку:
>cd my_calendar (используйте tab ????).

Теперь навремя свернём консоль и перейдём в папку C:\tmp\my_calendar\src, увидим там файл index.js, откроем его любым текстовым редактором. Здесь написан код, который рисует персика, этот код нам не нужен. Как и импорт пакетов, которые им использовались, всё что останется будет выглядеть так:

Файлы в папке, помимо index.js теперь нам тоже не нужны, смело избаляемся от них. Затем переходим в папку C:\tmp\my_calendar\public. Здесь мы видим один единственный файл index.html. Помните код <iframe> который нам предлагает Google Calendar? Самое время его скопировать и поместить внутри тэга <div id = "root">. Вот так это примерно будет выглядеть:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta
			name="viewport"
		  	content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, viewport-fit=cover"
		>
		<meta name="theme-color" content="#000000">
		<meta content="IE=Edge" http-equiv="X-UA-Compatible">
		<title>Мой календарь</title>
	</head>
	<body>
		<div id="root">
			<iframe src="https://calendar.google.com/calendar/embed?src=e3188d28b4ced4d6347be58977e267035a0fbb73e6a66575c2f461c6b084e4d3%40group.calendar.google.com&ctz=Europe%2FMoscow" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
		</div>
	</body>
</html>

Сохраняем файл, теперь мы можем открыть файл браузером и ознакомиться с контентом.

Далее открываем файл C:\tmp\my_calendar\vk-hosting-config.json и заполняем
"app_id": 51575004, (ID приложения из настроек приложения ВК)

Возвращаемся в консоль и просим node.js собрать получившийся одностраничный проект:
>npm run build

Важно обратить внимание, node.js просит нас обновить список браузеров. Не сопротивляемся, и делаем как он просит, он делает это крайне вежливо. Выполним:
>npx update-browserslist-db@latest

А затем опубликуем проект на бесплатном хостинге для мини-приложений от вк:
>npm run deploy
На запрос консоли:
? Would you like to deploy to VK Mini Apps hosting using these commands? » (Y/n)
Вводим y
Необходимо будет подтвердить деплой на своём мобильном устройстве. Наша консоль будет выглядеть примерно так:

Мы получили ссылку, которую вставим в текстовое поле "URL" в разделе "Версия для vk.com". Теперь мы можем перейти в заглавный раздел "Настройки" и в выпадающем списке поля "Состояние" выбрать опцию "Приложение включено и видно всем". В секции "Дополнительно" в меню "Сообщество" выбираем сообщество, в котором мы будем использовать наш календарь. Не забываем прожать кнопку "Сохранить". Нажимаем на иконку своего приложения в левой верхней части экрана.

Поздравляю, Вы восхитительны! Ваши подписчики отныне не вынуждены покидать портал ВК, чтобы видеть запланированные Вами события. Как только вы добавите новое событие в ваш публичный календарь, ваши подписчики увидят ваши планы. А также они смогут добавлять гугл календарь себе кнопкой "+" в правом нижнем углу виджета.

Для более подробного ознакомления с тем, как работают мини-приложения ВК рекомендую посмотреть видео Глеба Воронцова — «Как создать мини-приложение. Часть 1» и «Как создать мини приложение. Часть 2».