Basic Setup

Once you've installed the package, you need to configure Tailwind CSS and then you can start using the calendar:

1. Configure Tailwind CSS

Since ilamy Calendar is built with Tailwind CSS v4, you need to register the source path in your CSS file to ensure all component styles are included:

Copy/* In your main CSS file (e.g., globals.css) */
@source "../node_modules/@ilamy/calendar/dist";

This tells Tailwind to scan the calendar package for classes and include them in your build. This is especially important since node_modules are typically ignored by Tailwind by default.

2. Configure Day.js (Optional)

If you are using Day.js and have installed it as a dependency in your project, you might need to extend the plugins that are required for this library. Although Day.js is exported from this library, your Day.js instance will be used, which may cause errors if the required plugins are not loaded.

Copyimport dayjs from 'dayjs';
import isSameOrAfter from 'dayjs/plugin/isSameOrAfter.js';
import isSameOrBefore from 'dayjs/plugin/isSameOrBefore.js';
import timezone from 'dayjs/plugin/timezone.js';
import utc from 'dayjs/plugin/utc.js';

dayjs.extend(isSameOrAfter);
dayjs.extend(isSameOrBefore);
dayjs.extend(timezone);
dayjs.extend(utc);

These plugins are required for proper date handling and timezone support within the calendar component.

3. Import and Use the Calendar

Now you can start using the calendar with minimal configuration:

Copyimport { IlamyCalendar } from '@ilamy/calendar';

export default function MyCalendar() {
  return (
    <div className="p-6">
      <IlamyCalendar />
    </div>
  );
}