DatePicker Styling

[wilsonreyhan]

Hey all! I'm new to NextJS and NextUI development, and I'm having trouble styling my DatePicker Calendar component. I've included my code below. I was wondering if you all could help me make this look better? My main complaints right now are:

• If you select a month, dates from the end of the previous or beginning of the next month may appear in the window
• The numbers are scrunched together and there is no hover / selection styling
• The header is the same color as the main calendar.

I've looked through the NextUI example but frustratingly they show pretty pickers with no insight into the styles. Let me know if you have any recommendations

<DatePicker className="text-orange-500 font-light text-sm border border-orange-300 rounded-md px-2 py-1 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent w-full" label="" name="dueDate" defaultValue={now(getLocalTimeZone())} granularity="day" isRequired selectorIcon={ <span className="w-5 h-5 text-orange-500"> <CalendarIcon /> </span> } popoverProps={{ placement: "bottom", shouldFlip: false, backdrop: "opaque", className: "bg-white text-orange-500 border border-orange-300 rounded-md shadow-lg p-2", }} calendarProps={{ minValue: now(getLocalTimeZone()), }} />