centris-schedule-picker v1.0.12
Centris Schedule Picker
Koyo ngene rasane wong kang nandang kangen Rino wengi atiku rasane peteng Tansah kelingan kepingin nyawang Sedelo wae uwis emoh tenan Cidro janji tegane kowe ngapusi Nganti sprene suwene aku ngenteni Nangis batinku nggrantes uripku Teles kebes netes eluh neng dadaku sakno... sakno... styled components and date-fns.
Getting Started
yarn add centris-schedule-pickerimport ScheduleSelector from 'centris-schedule-picker'
class App extends React.Component {
state = { schedule = [] }
handleChange = newSchedule => {
this.setState({ schedule: newSchedule })
}
render() {
return (
<ScheduleSelector
selection={this.state.schedule}
numDays={5}
minuteStep={30}
minTime={8}
maxTime={22}
onChange={this.handleChange}
/>
)
}
}<ScheduleSelector />
Props
selection
type: Array<Date>
description: List of dates that should be filled in on the grid (reflect the start time of each cell).
required: yes
selectionScheme
type: 'square' | 'linear'
description: The behavior for selection when dragging. square selects a square with the start and end cells at opposite corners. linear selects all the cells that are chronologically between the start and end cells.
required: no
default value: 'square'
onChange
type: (Array<Date>) => void
description: Called when selected availability is changed. The new list of selected dates is passed in as the first parameter.
required: yes
startDate
type: Date
description: The date on which the grid should start (time portion is ignored, specify start time via minTime)
required: no
default value: today
numDays
type: number
description: The number of days to show, startin from today
required: no
default value: 7
minTime
type: number
description: The minimum hour to show (0-23)
required: no
default value: 9
maxTime
type: number
description: The maximum hour to show (0-23)
required: no
default value: 23
minuteStep
type: number
description: Step per minute (15 minute, dll)
required: no
default value: 15
dateFormat
type: string
description: The date format to be used for the column headers
required: no
default value: 'M/D'
margin
type: number
description: The margin between grid cells (in pixels)
required: no
default value: 3
unselectedColor
type: string
description: The color of an unselected cell
required: no
default value: 'rgba(89, 154, 242, 1)'
selectedColor
type: string
description: The color of an unselected cell
required: no
default value: 'rgba(162, 198, 248, 1)'
hoveredColor
type: string
description: The color of a hovered cell
required: no
default value: '#dbedff'
renderDateCell
type: (time: Date, selected: boolean, refSetter: function) => React.Node
description: A render prop function that accepts the time this cell is representing and whether the cell is selected or not and returns a React element. It is your responsibility to apply the refSetter as a ref to the component you render -- neglecting to do so will cause the component to not work properly for touch devices. If you choose to use this custom render function, the color props above have no effect.
required: no