monthly-calendar
v0.3.2
Published
A Monthly Calendar for react
Downloads
4
Readme
React calendar
based on https://github.com/markusenglund/react-npm-component-starter
How To Run
npm install --save monthly-calendar
How to Use in React
Note: Make sure fontawesome is loaded in your html
import Calendar from 'monthly-calendar'
import React from 'react'
class App extends React.Component {
render(){
return (
<div>
<Calendar
isMobile={false}
onDateSelected={(dateSelected) => alert(dateSelected)}
onTimeSelected={(timeSelected) => alert(timeSelected)}
listOfDates={
[{date: '01/11/2018', surgePrice: 1000}, {date: '15/11/2018', surgePrice: 100}, {date: '01/12/2018', surgePrice: 2000}, {date: '10/10/2018'}]
}
listOfTimes={
[{time: '07:00AM', surgePrice: null}, {time: '07:30AM', surgePrice: 100}]
}
/>
</div>
);
}
}
render(<App />, document.getElementById("app"));
NOTES
- There are 5 props
- the format of date is DD/MM/YYYY
- If you wish to include price, just insert like example above
- provide your function to onDateSelected, when user click this function will be called
- provide your own function to onTimeSelected, when user click the time, this function will be called