npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-timeslot-selector

v3.0.13

Published

A modified version of react schedule selector

Downloads

52

Readme

React Timeslot Selector

npm version

A modified version of mobile-friendly when2meet-style grid-based schedule selector built with styled components and date-fns. It contains feature to disable time slots.

image

Getting Started

pnpm install react-timeslot-selector styled-components
import ScheduleSelector from 'react-timeslot-selector'
import {useState} from 'react'

export default function App () {
  const [schedule, setSchedule] = useState([]);

  const handleChange = newSchedule => {
    setSchedule(newSchedule);
  }

    return (
      <ScheduleSelector
        selection={schedule}
        numDays={5}
        minTime={8}
        maxTime={22}
        hourlyChunks={2}
        onChange={handleChange}
        disabledSlots={[]}
      />
    )
  
}

<ScheduleSelector />

ScheduleSelector is a controlled component that can be used easily with the default settings. Just provide a controlled value for selection and include an onChange handler and you're good to go. Further customization can be done using the props outlined below.

To customize the UI, you can either:

  1. Specify values for the color, margin, format, etc. props
  2. Use the renderDateCell render prop to handle rendering yourself.

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

disabledSlots

type: Array<Date>

description: List of disabled dates in the grid, these dates cannot be selected.

required: no

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, starting from today

required: no

default value: 7

hourlyChunks

type: number

description: How many chunks to divide each hour into (e.g. 2 divides the hour into half-hour steps, 4 into 15-minute steps)

required: no

default value: 1

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

dateFormat

type: string

description: The date format to be used for the column headers

required: no

default value: 'M/D'

timeFormat

type: string

description: The time format to be used for the row labels

required: no

default value: 'ha'

margin (removed in v3.0, use columnGap and rowGap instead)

type: number

description: The margin between grid cells (in pixels)

required: no

default value: 3

columnGap

type: string

description: The gap between grid columns, specified using any valid CSS units

required: no

default value: '4 px'

rowGap

type: string

description: The gap between grid rows, specified using any valid CSS units

required: no

default value: '4 px'

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'

disabledColor

type: string

description: The color of a disabled cell

required: no

default value: 'rgba(79, 79, 79, 0.87)'

renderDateCell

type: (datetime: Date, selected: boolean, refSetter: (dateCell: HTMLElement | null) => void) => React.Node

description: A render prop function that accepts the time this cell is representing and whether the cell is selected or not and should return 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

renderTimeLabel

type: (time: Date) => React.Node

description: A render prop function that accepts the time a given row is representing and should return a React element.

required: no

renderDateLabel

type: (date: Date) => React.Node

description: A render prop function that accepts the time a given row is representing and should return a React element.

required: no