0.0.4 • Published 2 years ago
react-carousel-calendar v0.0.4
React Carousel Calendar
- React calendar with carousel style.
Check-in
,Check-out
changes 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, height
ratio, 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;' |