Introduction

When mentioning date pickers, people might think about the DatePicker from component libraries, however, DatePicker is usually a combination of Input and Calendar. Although this suits most form scenarios, what if you only want to display a Calendar? vue-day-calendar is created to solve this problem.

✨ Main features

Select days, ranges or whatever
Localizable into any language
Easy to style and customize,support tailwindcsss 和 unocss
Using dayjs as the date library
A calendar component focused on date selection

VS Vue datepicker

Before vue-day-calendar, I used vue-datepicker, which is an outstanding component library with lots of out-of-the-box features. It also supports displaying in Calendar mode, but if you only use the Calendar mode, I feel it's too massive and not pure enough, lacking flexibility. Thus, vue-day-calendar was born, keeping the purity and uninhibited nature of a Calendar component.

Actually, I still recommend that you use vue-datepicker. Relatively speaking, it is more comprehensive and feature-rich, the top choice for those who prefer convenience.

VS React DayPicker

React has a rich component ecosystem, and the inspiration for vue-day-calendar comes from React DayPicker. It has a simple and durable design appearance and highly customizable styles. Each component inside can be customized, which gives users a high degree of playfulness. As such, vue-day-calendar has borrowed a lot of ideas.

Q & A

Why are the formats of `v-model` and `month` string types?

First of all, why restrict the format? It is actually to support two-way binding. Imagine if the default value is passed as a Date type, but the result is returned in YYYY-MM-DD or dayjs format. The experience would be poor. Therefore, the format is designed to be easy to understand and straightforward.

The format of v-model is YYYY-MM-DD.
The format of month is YYYY-MM.

Why does `vue-day-calendar` look like it has no styles?

When using a component library, it is inevitable that you need to modify the styles. Whether a component looks good or has many special effects, I believe everyone has experienced the pain of trying to modify styles. Ultimately, it is because of high coupling.

Everyone has different aesthetics. Instead of fancy styles, it is better to beautify based on the basic styles as much as possible. The classes attribute can be applied to each DOM node, ensuring maximum flexibility in design.

The end

If you like this component, please give me a star, it is the biggest encouragement for me.
If you have any questions while using it, feel free to raise an Issue, I will respond as soon as possible.
If you have better ideas or feel that the documentation is not clear, feel free to submit a PR, I will merge it as soon as possible.