Calendar

import { Calendar } from "@grassroot/ui-react";
 
const [date, setDate] = React.useState<Date | null>(new Date(2026, 5, 18));
 
<Calendar value={date} onChange={setDate} today={new Date(2026, 5, 21)} />

<script setup lang="ts">
import { ref } from "vue";
import { Calendar } from "@grassroot/ui-vue";
 
const date = ref(new Date(2026, 5, 18));
</script>
 
<template>
  <Calendar
    v-model="date"
    @change="date = $event"
    :today="new Date(2026, 5, 21)"
  />
</template>

<script lang="ts">
  import { Calendar } from "@grassroot/ui-svelte";
 
  let date = $state(new Date(2026, 5, 18));
</script>
 
<Calendar
  value={date}
  onChange={(next) => (date = next)}
  today={new Date(2026, 5, 21)}
/>

import { createSignal } from "solid-js";
import { Calendar } from "@grassroot/ui-solid";
 
export function Example() {
  const [date, setDate] = createSignal(new Date(2026, 5, 18));
 
  return (
    <>
      <Calendar value={date()} onChange={setDate} today={new Date(2026, 5, 21)} />
    </>
  );
}