app-ui / data-display / calendars
Double
06-double.jsx
import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/20/solid'
const months = [
{
name: 'January',
days: [
{ date: '2021-12-27' },
{ date: '2021-12-28' },
{ date: '2021-12-29' },
{ date: '2021-12-30' },
{ date: '2021-12-31' },
{ date: '2022-01-01', isCurrentMonth: true },
{ date: '2022-01-02', isCurrentMonth: true },
{ date: '2022-01-03', isCurrentMonth: true },
{ date: '2022-01-04', isCurrentMonth: true },
{ date: '2022-01-05', isCurrentMonth: true },
{ date: '2022-01-06', isCurrentMonth: true },
{ date: '2022-01-07', isCurrentMonth: true },
{ date: '2022-01-08', isCurrentMonth: true },
{ date: '2022-01-09', isCurrentMonth: true },
{ date: '2022-01-10', isCurrentMonth: true },
{ date: '2022-01-11', isCurrentMonth: true },
{ date: '2022-01-12', isCurrentMonth: true, isToday: true },
{ date: '2022-01-13', isCurrentMonth: true },
{ date: '2022-01-14', isCurrentMonth: true },
{ date: '2022-01-15', isCurrentMonth: true },
{ date: '2022-01-16', isCurrentMonth: true },
{ date: '2022-01-17', isCurrentMonth: true },
{ date: '2022-01-18', isCurrentMonth: true },
{ date: '2022-01-19', isCurrentMonth: true },
{ date: '2022-01-20', isCurrentMonth: true },
{ date: '2022-01-21', isCurrentMonth: true },
{ date: '2022-01-22', isCurrentMonth: true },
{ date: '2022-01-23', isCurrentMonth: true },
{ date: '2022-01-24', isCurrentMonth: true },
{ date: '2022-01-25', isCurrentMonth: true },
{ date: '2022-01-26', isCurrentMonth: true },
{ date: '2022-01-27', isCurrentMonth: true },
{ date: '2022-01-28', isCurrentMonth: true },
{ date: '2022-01-29', isCurrentMonth: true },
{ date: '2022-01-30', isCurrentMonth: true },
{ date: '2022-01-31', isCurrentMonth: true },
{ date: '2022-02-01' },
{ date: '2022-02-02' },
{ date: '2022-02-03' },
{ date: '2022-02-04' },
{ date: '2022-02-05' },
{ date: '2022-02-06' },
],
},
{
name: 'February',
days: [
{ date: '2022-01-31' },
{ date: '2022-02-01', isCurrentMonth: true },
{ date: '2022-02-02', isCurrentMonth: true },
{ date: '2022-02-03', isCurrentMonth: true },
{ date: '2022-02-04', isCurrentMonth: true },
{ date: '2022-02-05', isCurrentMonth: true },
{ date: '2022-02-06', isCurrentMonth: true },
{ date: '2022-02-07', isCurrentMonth: true },
{ date: '2022-02-08', isCurrentMonth: true },
{ date: '2022-02-09', isCurrentMonth: true },
{ date: '2022-02-10', isCurrentMonth: true },
{ date: '2022-02-11', isCurrentMonth: true },
{ date: '2022-02-12', isCurrentMonth: true },
{ date: '2022-02-13', isCurrentMonth: true },
{ date: '2022-02-14', isCurrentMonth: true },
{ date: '2022-02-15', isCurrentMonth: true },
{ date: '2022-02-16', isCurrentMonth: true },
{ date: '2022-02-17', isCurrentMonth: true },
{ date: '2022-02-18', isCurrentMonth: true },
{ date: '2022-02-19', isCurrentMonth: true },
{ date: '2022-02-20', isCurrentMonth: true },
{ date: '2022-02-21', isCurrentMonth: true },
{ date: '2022-02-22', isCurrentMonth: true },
{ date: '2022-02-23', isCurrentMonth: true },
{ date: '2022-02-24', isCurrentMonth: true },
{ date: '2022-02-25', isCurrentMonth: true },
{ date: '2022-02-26', isCurrentMonth: true },
{ date: '2022-02-27', isCurrentMonth: true },
{ date: '2022-02-28', isCurrentMonth: true },
{ date: '2022-03-01' },
{ date: '2022-03-02' },
{ date: '2022-03-03' },
{ date: '2022-03-04' },
{ date: '2022-03-05' },
{ date: '2022-03-06' },
{ date: '2022-03-07' },
{ date: '2022-03-08' },
{ date: '2022-03-09' },
{ date: '2022-03-10' },
{ date: '2022-03-11' },
{ date: '2022-03-12' },
{ date: '2022-03-13' },
],
},
]
export default function Example() {
return (
<div>
<div className="relative grid grid-cols-1 gap-x-14 md:grid-cols-2">
<button
type="button"
className="absolute -top-1 -left-1.5 flex items-center justify-center p-1.5 text-gray-400 hover:text-gray-500 dark:text-gray-400 dark:hover:text-white"
>
<span className="sr-only">Previous month</span>
<ChevronLeftIcon aria-hidden="true" className="size-5" />
</button>
<button
type="button"
className="absolute -top-1 -right-1.5 flex items-center justify-center p-1.5 text-gray-400 hover:text-gray-500 dark:text-gray-400 dark:hover:text-white"
>
<span className="sr-only">Next month</span>
<ChevronRightIcon aria-hidden="true" className="size-5" />
</button>
{months.map((month, monthIdx) => (
<section key={monthIdx} className="text-center last:max-md:hidden">
<h2 className="text-sm font-semibold text-gray-900 dark:text-white">{month.name}</h2>
<div className="mt-6 grid grid-cols-7 text-xs/6 text-gray-500 dark:text-gray-400">
<div>M</div>
<div>T</div>
<div>W</div>
<div>T</div>
<div>F</div>
<div>S</div>
<div>S</div>
</div>
<div className="isolate mt-2 grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm shadow-sm ring-1 ring-gray-200 dark:bg-white/10 dark:shadow-none dark:ring-white/10">
{month.days.map((day) => (
<button
key={day.date}
type="button"
data-is-today={day.isToday ? '' : undefined}
data-is-current-month={day.isCurrentMonth ? '' : undefined}
className="relative bg-gray-50 py-1.5 text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white data-is-current-month:text-gray-900 data-is-current-month:hover:bg-gray-100 nth-36:rounded-bl-lg nth-7:rounded-tr-lg dark:bg-gray-900/75 dark:text-gray-500 dark:hover:bg-gray-900/25 dark:data-is-current-month:bg-gray-900 dark:data-is-current-month:text-gray-100 dark:data-is-current-month:hover:bg-gray-900/50"
>
<time
dateTime={day.date}
className="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white dark:in-data-is-today:bg-indigo-500"
>
{day.date.split('-').pop().replace(/^0/, '')}
</time>
</button>
))}
</div>
</section>
))}
</div>
<section className="mt-12">
<h2 className="text-base font-semibold text-gray-900 dark:text-white">Upcoming events</h2>
<ol className="mt-2 divide-y divide-gray-200 text-sm/6 text-gray-500 dark:divide-white/10 dark:text-gray-400">
<li className="py-4 sm:flex">
<time dateTime="2022-01-17" className="w-28 flex-none">
Wed, Jan 12
</time>
<p className="mt-2 flex-auto sm:mt-0">Nothing on today’s schedule</p>
</li>
<li className="py-4 sm:flex">
<time dateTime="2022-01-19" className="w-28 flex-none">
Thu, Jan 13
</time>
<p className="mt-2 flex-auto font-semibold text-gray-900 sm:mt-0 dark:text-white">
View house with real estate agent
</p>
<p className="flex-none sm:ml-6">
<time dateTime="2022-01-13T14:30">2:30 PM</time> - <time dateTime="2022-01-13T16:30">4:30 PM</time>
</p>
</li>
<li className="py-4 sm:flex">
<time dateTime="2022-01-20" className="w-28 flex-none">
Fri, Jan 14
</time>
<p className="mt-2 flex-auto font-semibold text-gray-900 sm:mt-0 dark:text-white">
Meeting with bank manager
</p>
<p className="flex-none sm:ml-6">All day</p>
</li>
<li className="py-4 sm:flex">
<time dateTime="2022-01-18" className="w-28 flex-none">
Mon, Jan 17
</time>
<p className="mt-2 flex-auto font-semibold text-gray-900 sm:mt-0 dark:text-white">
Sign paperwork at lawyers
</p>
<p className="flex-none sm:ml-6">
<time dateTime="2022-01-17T10:00">10:00 AM</time> - <time dateTime="2022-01-17T10:15">10:15 AM</time>
</p>
</li>
</ol>
</section>
</div>
)
}