diff --git a/web/src/app/components/calendar-sync-manual/calendar-sync-manual.component.html b/web/src/app/components/calendar-sync-manual/calendar-sync-manual.component.html
new file mode 100644
index 000000000..ae6f684c9
--- /dev/null
+++ b/web/src/app/components/calendar-sync-manual/calendar-sync-manual.component.html
@@ -0,0 +1,44 @@
+
+
+
+
Stačí postupovat podle návodu:
+
+
+
Postup v různých aplikacích se může trochu lišit, ale tohle je ten asi nejobvyklejší. Může se ale stát, že bude potřeba ještě něco: třeba u Google Calendar se tento postup musí provést v prohlížeči a pak přidaný kalendář povolit v aplikaci, některé menší aplikace potřebují ještě aplikaci třetí strany, která tohle umožní…
+
+
+
+ - Otevři svou kalendářovou aplikaci (případně mailového klienta, pokud používáš kalendář v něm).
+ - Najdi tlačítko pro přidání kalendáře a klikni na něj.
+ - Pokud už se ti nenabízí možnost vložit odkaz, zkus najít něco jako „ze sítě“/„z internetu“…
+ - Zkopíruj tento odkaz do políčka pro vložení url adresy: https://interni.bosan.cz/api/program/ical.
+ - Pokud to jde: pojmenuj si ho (třeba „Šánovské akce“), přebarvi si ho, nastav „jen pro čtení“ a interval synchronizace (po jaké době se změny v programu promítnou do tvého kalendáře).
+ - Potvrď přidání kalendáře.
+ - Jestli se ti ho předtím nepovedlo přejmenovat, můžeš najít nastavení vlastností tohoto kalendáře a upravit si ho dodatečně.
+ - Pokud už nevidíš akce v kalendáři, zkus zmáčknout „Synchronizovat“ nebo tento kalenrář povolit/zobrazit.
+
+
+
+
+
Hotovo. Teď máš náš program přímo ve svém kalendáři. Když ti bude překážet, můžeš si ho skrýt, kdyby sis chtěl označit akce, na které jedeš, můžeš si je zduplikovat do svého osobního kalendáře… jak je libo.:-)
+
+
+
+
Jestli máš problém s nastavením, možná ti pomůže se podívat na pár příkladů:
+
+
+
E-mailový klient pro počítač Microsoft Outlook umožňuje i přidání kalendáře. A není to vůbec složité.
Otevřeme si kartu s kalendářem, dáme „Otevřít kalendář“ [1], z internetu [2] a vložíme náš odkaz do políčka, co se nám objeví [3]. Pokud si chceme právě vytvořený kalendář třeba přejmenovat, dáme „Upravit“, jinak prostě potvrdíme [4]. A máme to.
+
+
+
Google Calendar je potřeba nastavit nejdříve ve webovém rozhraní.
Otevřeme si tedy Google kalendář v prohlížeči, u kategorie „jiné kalendáře“ klikneme na „+“ (přidat další kalendáře) [1], „Pomocí adresy URL“ [2], do připraveného políčka zkopírujeme náš odkaz [3] a potvrdíme [4]. Teď se můžeme přesunout do mobilní aplikace, kde nám zbývá ještě nově přidaný kalendář „zapnout“: Jdeme do nastavení [5], najdeme si náš kalendář pod svým účtem [6] a zapneme synchronizaci [7]. Kdybysme chtěli, můžem si ho ještě přebarvit, přejmenovat… A máme hotovo.
+
+
+
Některé aplikace potřebují dodat nějaké rozšíření, nebo jinou aplikaci. Jako příklad můžeme uvést třeba oblíbenou aplikaci pro android Simple Calendar.
Začneme tím, že si najdeme nějakou aplikaci pro synchronizaci přes ical a stáhneme si jí [1]. Otevřeme jí a jdeme na to. Tahle konkrétní si říká o přístup ke kalendáři (což není nic zvláštního), tak jí ho udělíme [2]. No a přidáme ten kalendář s akcemi, takže „+“ [3], vložíme odkaz [4] (autentizaci nevyžaduje, takže tuto možnost nezapínáme), jdeme dál [5], můžem si ho případně přejmenovat a přebarvit a potvrdíme [6]. Přesuneme se do samotného Simple Calendar a sice do jeho nastavení. Najdeme tam možnost CALDav sync (to je sice zase jiný způsob synchronizace, ale tady to hází do jednoho pytle) a povolíme jí [7]. Nabídne nám to nějaké kalendáře, co máme v telefonu a díky druhé aplikaci je tam i ten, co chceme. Zaškrtneme ho a potvrdíme [8]. A je to.
+
+
+
\ No newline at end of file
diff --git a/web/src/app/components/calendar-sync-manual/calendar-sync-manual.component.scss b/web/src/app/components/calendar-sync-manual/calendar-sync-manual.component.scss
new file mode 100644
index 000000000..e04a901e0
--- /dev/null
+++ b/web/src/app/components/calendar-sync-manual/calendar-sync-manual.component.scss
@@ -0,0 +1,26 @@
+@import "styles/variables";
+
+:host {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ flex-direction: column;
+}
+
+button {
+ position: relative;
+ z-index: 100;
+ top: 0;
+ right: 0;
+ opacity: 1;
+ padding: 1rem;
+ span {
+ color: #000000;
+ text-shadow: none;
+ }
+}
+.modal-body {
+ height: 100%;
+ padding: 10px;
+ border: 10px solid #fff;
+}
diff --git a/web/src/app/components/calendar-sync-manual/calendar-sync-manual.component.ts b/web/src/app/components/calendar-sync-manual/calendar-sync-manual.component.ts
new file mode 100644
index 000000000..9a544bcf4
--- /dev/null
+++ b/web/src/app/components/calendar-sync-manual/calendar-sync-manual.component.ts
@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+import { BsModalRef } from 'ngx-bootstrap/modal';
+
+@Component({
+ selector: 'calendar-sync-manual',
+ templateUrl: './calendar-sync-manual.component.html',
+ styleUrls: ['./calendar-sync-manual.component.scss']
+})
+export class CalendarSyncManualComponent implements OnInit {
+
+ title: string;
+ closeBtnName: string;
+ list: any[] = [];
+
+ constructor(
+ public bsModalRef: BsModalRef
+ ) { }
+
+ ngOnInit(): void {
+ }
+
+}
diff --git a/web/src/app/views/events-view/events-view.component.html b/web/src/app/views/events-view/events-view.component.html
index 804c67cd6..e88145735 100644
--- a/web/src/app/views/events-view/events-view.component.html
+++ b/web/src/app/views/events-view/events-view.component.html
@@ -9,6 +9,8 @@