Gentlent LogoGentlent Logo
KomponentenFarbenSymbole
Copyright © von Gentlent und/oder ihren Tochtergesellschaften. Alle Rechte vorbehalten. Gentlent® ist eine in der Europäischen Union und anderen Ländern eingetragene Marke der Gentlent GmbH. Alle Markenzeichen, Dienstleistungsmarken und Firmennamen sind Eigentum ihrer jeweiligen Inhaber.
English Deutsch

KalenderAuswahl und Anzeige von Daten.

Calendar
Mo
Di
Mi
Do
Fr
Sa
So
import Calendar from '@/components/Calendar';
export function Example() {  return (    <Calendar />  );}

Calendar (with value)
Mo
Di
Mi
Do
Fr
Sa
So
import Calendar from '@/components/Calendar';
export function Example() {  return (    <Calendar $value={new Date()} />  );}

Calendar (with date range)
Mo
Di
Mi
Do
Fr
Sa
So
import Calendar from '@/components/Calendar';
export function Example() {  const fromDate = new Date(2026, 10, 10);  const toDate = new Date(2026, 10, 20);    return (    <Calendar       $from={fromDate}      $to={toDate}    />  );}

Calendar (with disabled dates)
Mo
Di
Mi
Do
Fr
Sa
So
import Calendar from '@/components/Calendar';
export function Example() {  const disabledDates = [    new Date(2026, 10, 10),    new Date(2026, 10, 15),    new Date(2026, 10, 20)  ];    return (    <Calendar $disabled={disabledDates} />  );}

Calendar (with onChange)
Mo
Di
Mi
Do
Fr
Sa
So
import Calendar from '@/components/Calendar';import { useState } from 'react';
export function Example() {  const [selectedDate, setSelectedDate] = useState<Date | null>(null);    return (    <>      <Calendar         $onChange={(date) => {          setSelectedDate(date);        }}      />    </>  );}