Payment Calendar

A calendar component specifically designed for selecting a payment date, with neobrutalism styling to match the overall design system.

Date of payment

May 2025
Su
Mo
Tu
We
Th
Fr
Sa

Selected payment date: 15th of each month

Usage

import { useState } from 'react';
import PaymentCalendar from '@/components/PaymentCalendar';

export default function MyPage() {
  const [paymentDate, setPaymentDate] = useState(15);
  
  const handleDateChange = (date: number) => {
    setPaymentDate(date);
    console.log('Payment date set to:', date);
  };

  return (
    <div>
      <h2>Select Payment Date</h2>
      <PaymentCalendar 
        initialPaymentDate={paymentDate}
        onDateChange={handleDateChange}
      />
      <p>Payment will be processed on the {paymentDate}th of each month.</p>
    </div>
  );
}

Examples

Basic Payment Calendar

A calendar component for selecting a payment date.

Date of payment

May 2025
Su
Mo
Tu
We
Th
Fr
Sa

Payment will be processed on the 15th of each month.

const [paymentDate, setPaymentDate] = useState(15);

<PaymentCalendar 
  initialPaymentDate={paymentDate}
  onDateChange={setPaymentDate}
/>
<p>
  Payment will be processed on the {paymentDate}th of each month.
</p>

Custom Initial Date

Calendar initialized with a specific payment date.

Date of payment

May 2025
Su
Mo
Tu
We
Th
Fr
Sa

Payment set for the 1st of each month.

<PaymentCalendar 
  initialPaymentDate={1}
/>