Calendar

Home Calendar

The Calendar component allows users to select dates through an interactive calendar interface. It’s useful for date pickers, scheduling, and any scenario where choosing a date is required.


<?php

use Lib\PHPXUI\Calendar;

?>

<Calendar
  mode="single"
  selected="date"
  onSelect="setDate"
  class="rounded-md border shadow-sm"
  captionLayout="dropdown"
/>

<script>
  const [date, setDate] = pp.state(new Date());
</script>

Installation

npm

npx phpxui add Calendar

Usage

use Lib\PHPXUI\Calendar

const [date, setDate] = pp.state(new Date());

<Calendar
  mode="single"
  selected="date"
  onSelect="setDate"
  class="rounded-lg border"
/>

Calendar const [copyName, setCopyName] = pp.state(false); const copyChildren = () => { navigator.clipboard.writeText('npx phpxui add Calendar'.trim()); setCopyName(true); setTimeout(() => { setCopyName(false); }, 2000); };

Installation

Usage