0.0.4 • Published 3 years ago
react-carousel-calendar v0.0.4
React Carousel Calendar
- React calendar with carousel style.
Check-in,Check-outchanges status by selection, and the status is available as a Date object.
Installation
npm install react-carousel-calendar
Demo
A minimal demo page can be found in sample directory,
Online Demo : CodeSandbox
Usage
import {
Calendar,
CalendarContainer,
CalendarProvider,
} from 'react-carousel-calendar';
function App() {
return (
<div className='App'>
<h1>Hello Calendar</h1>
<CalendarProvider>
<CalendarContainer>
<Calendar />
</CalendarContainer>
</CalendarProvider>
</div>
);
}
export default App;If you want to use the selected date (ex. check-in, check-out), Please check the SampleCheckin, SampleCheckout Component as well.
User Guide
CalendarProvider
Props
| Prop name | Description | Default value | Example value |
|---|---|---|---|
| lang | Language to be displayed on the calendar | user's navigator.language or 'en-US' | 'en-US' or 'ko-KR' |
| isPastClickable | Decide if you want to click on a date before today | false | false or true |
If you want to add language, please issue to me 😊
CalendarContainer
- Container is optional, if you have any container, you can use that.
- Just I recommend
5:3 width, heightratio, and min-width400px
Props
| Prop name | Description | Default value | Example value |
|---|---|---|---|
| width | Calendar Container's width | 50 | use Number value |
| height | Calendar Container's height, if you don't give this, it's calculated by aspect ratio | 30 | use Number value |
| cssUnit | Width's and Height's unit | 'rem' | 'rem', 'px', ..etc |
| noPadding | Delete container's default padding | false | false or true |
| noBoxShadow | Delete container's default box shadow | false | false or true |
| cStyle | If you want to add a custom style, add it here. like inline style | null | 'color: blue;' |