Enterprise / COMPONENT

Calendar

Web · implementedDesktop · unavailable

Kalender month/week dengan navigasi keyboard, batas tanggal, dan pemilihan rentang.

import { Calendar } from "./vendor/syne-ui/index.js";TypeScript ready

October 2026

Sun

Mon

Tue

Wed

Thu

Fri

Sat

Choose a start date

Interactive example · Try the controls with your mouse or keyboard.

Start with an example

Import the component and adapt it to your interface.

Example.tsxTSX

import { Calendar } from "./vendor/syne-ui/index.js";

export function Example() {
  return (
    <Calendar selectionMode="range" defaultView="month" events={[]} onRangeChange={(range) => console.log(range)} />
  );
}

Make it yours

Use className and --syne-* tokens to match your design system.