Vue 3 dayjs composable with language support to build beautuiful calendars

13 April 2023
0
49

Docs is coming, don’t worry! for now my friend GPT-4 has provided something:

Vue 3 Calendar Composable

This composable is a calendar utility for Vue 3 projects, providing a flexible and easy-to-use solution for handling dates, months, and years. It supports multiple languages and is compatible with the dayjs library.

Installation

npm i vue3-calendar-composable
yarn add vue3-calendar-composable
pnpm add vue3-calendar-composable

Usage

Import the `useCalendar` composable in your component and provide the optional `CalendarConfig` object.

import { useCalendar } from "vue3-calendar-composable";

const calendar = useCalendar();

CalendarConfig

The `CalendarConfig` object allows customization of the calendar’s behavior:

`date`: Date | Dayjs (Optional) – The initial date to display.
`week`: MaybeRef (Optional) – Reference to a reactive week number.
`month`: MaybeRef (Optional) – Reference to a reactive month number.
`year`: MaybeRef (Optional) – Reference to a reactive year number.
`type`: “week” | “month” (Optional, default: “month”) – The display mode of the calendar.
`adaptUserLanguage`: boolean (Optional, default: true) – Whether to adapt to the user’s language or use English as default.
`startOnSunday`: boolean (Optional, default: false) – Whether the week should start on Sunday.
`onlyShowWeek`: boolean (Optional, default: false) – Whether to display only five days of the week.

Methods

The `useCalendar` composable exposes several methods for interacting with the calendar data:

`dates`: A computed property that returns an array of dates based on the current configuration.
`months`: A computed property that returns an array of all months.
`current`: An object containing the current dayjs instances (today and reference dayjs object).
`set`: A function to increment, decrement, or set the week, month, or year.
`format`: A function to format a dayjs instance based on the provided format.