Titel, Ort, Datum und Uhrzeit, Zeitzone, Wiederholung, Eingeladene, Erinnerungen und Notizen — laden Sie dann die .ics-Datei herunter oder öffnen Sie sie direkt in Ihrem Kalender. Sie können auch einen Terminplan einfügen oder ein Dokument oder Foto anhängen, um mehrere Termine auf einmal zu erstellen.
Wie bringe ich einen Add-to-Calendar-Button oder Event-Builder auf meine eigene Website?
Der Builder von ICS Maker wird als eigenständiges Script ausgeliefert: ein leeres Element, ein Script-Tag, das auf event-creator.js verweist, und ein Aufruf von EventCreator.mount() – kein Build-Schritt, kein Framework, kein Konto, kein Schlüssel und kein Limit pro Ansicht. Das Bundle ist eine einzige eigenständige IIFE unter 85 kB gzippt, inklusive Rendering-Bibliothek, und es sendet überhaupt keine Netzwerkanfragen: keine Analysen, keine Schriftarten, kein CDN – es fügt also weder eine Origin zu einer Content-Security-Policy noch einen Absatz zu einer Datenschutzerklärung hinzu. Jede Farbe, jeder Radius und jede Schriftart ist eine CSS-Custom-Property unter .ec-root, der Dark Mode folgt der eigenen Voreinstellung des Besuchers, und eine React-Website kann die Komponente direkt rendern, anstatt das Bundle zu laden.
Ein Script-Tag
<div id="event-creator"></div>
<script src="https://icsmaker.com/event-creator.js"></script>
<script>
EventCreator.mount('#event-creator', { showPreview: false });
</script>Das Bundle bringt sein eigenes Rendering, seine eigenen Styles und keine Abhängigkeiten mit, die Sie installieren müssten. Es kommuniziert mit nichts – keine Analysen, keine Schriftarten, kein CDN –, sodass die Datenschutzerklärung Ihrer Seite keinen neuen Absatz benötigt und eine strenge Content-Security-Policy keine neue Origin braucht.
Anpassung an das Erscheinungsbild Ihrer Website
Jede Farbe, jeder Radius und jede Schriftart ist eine CSS-Custom-Property unter .ec-root, sodass das Überschreiben von --ec-accent in der Regel die gesamte Theming-Arbeit ist. Der Dark-Mode-Präferenz des Besuchers wird automatisch gefolgt, und das Vorschau-Panel kann bei knappem Platz mit showPreview: false deaktiviert werden.
Verwenden Sie bereits React?
Überspringen Sie das Bundle und rendern Sie die Komponente direkt – gleiche Formularlogik, eine Kopie der Rendering-Bibliothek weniger auf der Seite.
Fragen
- Sendet das Embed etwas an Ihre Server?
- Nein. Es handelt sich um eine statische Datei, die vollständig im Browser des Besuchers läuft: keine Analysen, keine Telemetrie, keine Verbindungen nach Hause. Sie können das Bundle auch selbst hosten, wenn Sie es nicht von dieser Domain laden möchten.
- Wie groß ist es?
- Unter 85 kB gzippt, inklusive Rendering-Bibliothek, und es lädt nach Ihrer Seite, statt sie zu blockieren. Der Build schlägt fehl, wenn das Bundle jemals darüber hinauswächst, sodass die Zahl auf dieser Seite nicht heimlich ihre Gültigkeit verlieren kann.
- Kann ich einschränken, welche Formate Besucher herunterladen können?
- Der mount-Aufruf akzeptiert Optionen – ein Standardformat, ein Standarddatum, einen vorausgefüllten Entwurf und ob die Vorschau angezeigt wird – und die React-Komponente akzeptiert dieselben als Props.