Vue3 Calendar
vue 2.x vue 3.x calendar component
Overview
The vue3-calendar is a calendar and datepicker component for Vue 3. It not only serves as a Vue component, but also as a webpack multi-page project. It has a Boostrap style and supports internationalization (I18n). This version is an upgrade from the previous vue2-slot-calendar.
Features
- v-model: Allows for two-way binding with the input DOM.
- width: Specifies the width of the input DOM.
- format: Sets the date format using a combination of d, dd, M, MM, MMM, MMMM, and yyyy.
- disabled-days-of-week: Disables specific days of the week by providing an array of values from 0 (Sunday) to 6 (Saturday).
- clear-button: Displays a clear button (×) to easily remove the selected date.
- placeholder: Sets a placeholder text for the input field when no date is set.
- hasInput: Determines whether the component shows the input field or the calendar pane directly.
- pane: Specifies the number of panes to display in the calendar.
- borderWidth: Sets the width of the calendar panes.
- onDayClick: A callback function triggered when a day is clicked.
- specialDays: Allows for customizing the text displayed for certain days.
- changePane: A function called when the pane changes, with parameters for the year, month, and pane.
- Express
Express.js is a simple Node.js framework for single, multi-page, and hybrid web applications.
- Vue
Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.
- Bootstrap
Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites.
- SCSS
SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Webpack
Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.
