@khaldoonalnuaimi/vue-calendar-3 v1.0.9
vue-datepicker
š An easier datePicker in Vue.js š
https://github.com/joffreyBerrier/vue-datepicker/projects/1
š„ Vue3 + Typescript + Tailwind + HeroIcon š„
Sandbox example
Open this link on a new tab
Installation
NPM / YARN
Install the package:
npm install vue-calendar-3 --save
yarn add vue-calendar-3
import { Calendar } from 'vue-calendar-3'
// If you using vite
import 'vue-calendar-3/style'
// If you not
import 'vue-calendar-3/dist/library.css'
export default {
components: {
Calendar,
},
}
<Calendar />
Data binding
CheckIn
- Type:
Date
- Default:
null
Exemple : v-model:checkIn=""
CheckOut
- Type:
Date
- Default:
null
Exemple : v-model:checkOut=""
Props/Options
BookedDates
- Type:
string[]
- Default:
[]
This data is an array of your booked dates, the date is already booked is appear it in disabled
Exemple:
bookedDates: [
'2021-06-01',
'2021-06-02',
'2021-06-03',
'2021-06-23',
'2021-06-24',
'2021-06-25',
]
PeriodDates
- Type:
Array
- Default:
[]
This data is an array of object of your periods
The startAt
Corresponds to the start of your periods with the format YYYY-MM-DD
The endAt
Corresponds to the start of your periods with the format YYYY-MM-DD
Each period correspond to different logic define by periodType
and minimumDuration
The periodType:
- Corresponds to the day you want to block the period,
nightly
,weekly_by_saturday
orweekly_by_sunday
The minimumDuration:
Corresponds to the number of the days where you want to block the period.
If the periodType is
nightly
the count corresponds the number of days- If the periodType is
weekly_by_saturday
orweekly_by_sunday
the count corresponds to the number of weeks
Exemple:
periodDates: [
// Nightly
{
startAt: '2021-08-01',
endAt: '2021-08-31',
minimumDuration: 4,
periodType: 'nightly',
},
// Weekly Saturday
{
startAt: '2021-09-01',
endAt: '2021-09-30',
minimumDuration: 2,
periodType: 'weekly_by_saturday',
},
// Weekly Sunday
{
startAt: '2021-11-01',
endAt: '2021-11-29',
minimumDuration: 1,
periodType: 'weekly_by_sunday',
},
]
Events
@renderNextMonth
: fires when the user clicks on paginate
Example :
bookedDates: [
'2021-06-01',
'2021-06-02',
'2021-06-03',
'2021-06-23',
'2021-06-24',
'2021-06-25',
] as string[],
periodDates: [
{
startAt: '2021-07-01',
endAt: '2021-08-31',
minimumDuration: 4,
periodType: 'nightly',
},
{
startAt: '2021-09-01',
endAt: '2021-09-30',
minimumDuration: 2,
periodType: 'weekly_by_saturday',
},
{
startAt: '2021-10-01',
endAt: '2021-10-30',
minimumDuration: 4,
periodType: 'nightly',
},
{
startAt: '2021-11-01',
endAt: '2021-11-29',
minimumDuration: 1,
periodType: 'weekly_by_sunday',
},
] as Period[],
checkIn: null,
checkOut: null,
š Done š
- Manage export library with Library Mode of #vite
- Manage tooltip š
- Manage minimum duration š
- Manage periods (weekly / nightly) š
- Show dates + month + year š
- Manage HoveringDate š
- Manage Checkin / CheckOut halfday š
- Manage BookingDates š
- Show checkIn checkOut date š
- When click on checkIn checkOut date open calendar š
To Do
- Manage translations
Contributing to development šāāļøšāāļø
- First create an issue
- Fork the repo from github.
- Clone your forked repo and run:
yarn
ornpm i
- Then, make your changes on any branch you want and push it.
- Naming your branch with the gitflow convention:
- Feature branches? feature/issueId
- Release branches? release/issueId
- Hotfix branches? hotfix/issueId
- Support branches? support/issueId
- Finally, open a pull request on the official repo, using the source branch from your forked repo.
2 years ago