Ein sauberer Datums- und Zeitpicker ohne schwere Abhängigkeiten

Jedes Mal, wenn ein Projekt einen Datumswähler benötigt, entfaltet sich dieselbe Geschichte. Das native <input type="date"> sieht in jedem Browser anders aus, die Anpassung ist schmerzhaft und es verhält sich auf mobilen Plattformen unvorhersehbar. Monsterhafte UI-Bibliotheken oder veraltete Wrapper mit Dutzenden transitiver Pakete nur für einen einfachen Kalender zu integrieren, fühlt sich falsch an.

Neulich bin ich auf das Repository vanilla-calendar-pro gestoßen. Es ist eine saubere TypeScript-Komponente zur Datums- und Zeitauswahl ohne externe Abhängigkeiten. Sie funktioniert in purem JavaScript sowie innerhalb von React, Vue oder Svelte.

Was drin steckt und warum es praktisch ist

Die Bibliothek ist darauf ausgelegt, grundlegende Interface-Anforderungen abzudecken, ohne das Bundle aufzublähen. Der Kalender wiegt nur wenige Kilobytes, kann aber fast alles, was Designer und Product Manager typischerweise benötigen.

Hier sind die wichtigsten Punkte, die herausstechen:

• Keine Abhängigkeiten. Keine Drittanbieter-Datumsparsing-Bibliotheken wie moment oder date-fns, sie verwendet native Intl unter der Haube.
• Flexible Anzeigemodi. Der Kalender kann direkt in das Seitenmarkup eingebettet oder als Popup beim Klick auf ein Input geöffnet werden.
• Bereichsauswahl und mehrere Monate gleichzeitig. Großartig für Hotelbuchungen, Ticketkäufe oder Analytics-Dashboards.
• Integrierter Zeitwähler. Die Zeit kann sowohl im 24-Stunden- als auch im AM/PM-Format konfiguriert werden.
• Themes. Es gibt fertige helle und dunkle Themes, und die Anpassung erfolgt über Standard-CSS-Variablen.

Schnellstart

Die Installation ist Standard über jeden Paketmanager:

npm install vanilla-calendar-pro

Wenn du keinen Bundler hast, kannst du das Skript und die Styles direkt via CDN einbinden.

Im Markup brauchst du nur einen leeren Container erstellen:

<div id="calendar"></div>

Die Initialisierung im Code sieht sauber aus:

import { VanillaCalendar } from 'vanilla-calendar-pro';
import 'vanilla-calendar-pro/build/vanilla-calendar.min.css';

const calendar = new VanillaCalendar('#calendar', {
  settings: {
    lang: 'ru-RU',
    iso8601: true,
    selection: {
      day: 'multiple-ranged',
    },
  },
  actions: {
    clickDay(event, self) {
      console.log('Выбранные даты:', self.selectedDates);
    },
  },
});

calendar.init();

Nur ein paar Konfigzeilen, und wir haben einen funktionierenden Kalender mit Bereichsauswahl und russischer Lokalisierung.

Anpassung für spezifische Aufgaben

Ein häufiges Problem bei fertigen Komponenten ist, dass man vom Standarddesign abzuweichen zum Albtraum wird. In vanilla-calendar-pro kann die DOM-Struktur mit benutzerdefinierten Layouts neu aufgebaut werden, um sie an deine Bedürfnisse anzupassen.

Wenn du beispielsweise vergangene Daten deaktivieren und Wochenenden blockieren musst, werden die Einstellungen direkt in das Konfigurationsobjekt übergeben:

const calendar = new VanillaCalendar('#calendar', {
  settings: {
    range: {
      min: 'today',
      disabled: ['2026-05-01', '2026-05-09'],
    },
    selection: {
      time: 24,
    },
  },
  actions: {
    changeTime(event, self) {
      console.log('Установленное время:', self.selectedTime);
    },
  },
});

calendar.init();

Die Komponente verarbeitet dynamische Parameter-Updates elegant. Wenn der Benutzer die Sprache in der App wechselt, rufst du einfach die update()-Methode mit neuen Optionen auf, ohne vollständiges Neuzeichnen der Seite oder Speicherlecks.

Framework-Integration

Obwohl vanilla im Namen steckt, hat der Autor darauf geachtet, dass es bequem mit reaktiven Bibliotheken funktioniert.

In React lässt sich der Kalender leicht in einen Hook useEffect einwickeln:

import { useEffect, useRef } from 'react';
import { VanillaCalendar } from 'vanilla-calendar-pro';
import 'vanilla-calendar-pro/build/vanilla-calendar.min.css';

export function DatePicker({ onSelect }) {
  const containerRef = useRef(null);

  useEffect(() => {
    if (!containerRef.current) return;

    const calendar = new VanillaCalendar(containerRef.current, {
      actions: {
        clickDay(event, self) {
          onSelect(self.selectedDates);
        },
      },
    });

    calendar.init();

    return () => {
      calendar.destroy();
    };
  }, [onSelect]);

  return <div ref={containerRef} />;
}

Die destroy()-Methode räumt Event-Handler korrekt auf, sodass die Komponente beim Unmount keinen Müll im Speicher hinterlässt.

Für wen es nützlich ist

Das Projekt füllt die Lücke zwischen schwergewichtigen UI-Giganten und primitiven nativen Inputs. Wenn du ein Hobbyprojekt schreibst, eine Landing Page baust oder ein Admin-Panel erstellst, wo du keine klobigen Komponenten einbinden möchtest, ist das ein großartiger Kandidat.

Die Codebasis ist vollständig typisiert, die Quellen sind offen und die Dokumentation auf der offiziellen Website deckt alle API-Methoden und Styling-Beispiele gründlich ab. Lohnt sich zu bookmarken für den nächsten Sprint.