Back to Mantine

Mantine schedule

apps/mantine.dev/src/pages/schedule/getting-started.mdx

9.3.11.4 KB
Original Source

import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.GettingStartedSchedule);

Mantine schedule

@mantine/schedule package provides a set of components for building calendar scheduling interfaces – day, week, month, and year views with event display, drag-and-drop, and time slot interactions.

Installation

<InstallScript packages="@mantine/schedule @mantine/dates dayjs" />

After installation, import package styles at the root of your application:

tsx
import '@mantine/core/styles.css';
import '@mantine/dates/styles.css';
// ‼️ import schedule styles after core and dates package styles
import '@mantine/schedule/styles.css';

Do not forget to import styles

Followed the installation instructions above but something is not working (schedule components have no styles and look broken)? You've fallen into the trap of not importing schedule styles! To fix the issue, import schedule styles at the root of your application:

tsx
import '@mantine/schedule/styles.css';

dayjs

@mantine/schedule components use dayjs under the hood for date manipulations and formatting. dayjs is a required dependency – you cannot change it to another date library. If you want to use a different date library in your application, you will need to install it separately.