We The Curious Developers

We The Curious Developers

  • Guidelines
  • CuriOs SDK
  • Software
  • Films
  • Art
  • Audio
  • Photography

›Components

Getting Started

  • Getting Started Overview
  • ClI
  • Working With Us

Technical

  • Hardware

Frames

  • Frames Overview
  • Info Panel
  • Media Browser
  • Touch to Start

Components

  • Components Overview
  • Box
  • Button
  • Card
  • Checkbox
  • Header
  • Heading
  • Hero
  • Icon
  • Text Input
  • Markdown Viewer
  • Modal
  • WTCProvider
  • Table
  • Text
  • Video Player
  • Calendar
  • Dropdown
  • InputAutoComplete
  • Radio
  • Sidebar
  • Slider
  • Notification
  • IconNavButton
  • IconSideBar
  • List
  • Tab
  • Title
  • Toggle
  • Value

Calendar component

A Calendar component

Install

npm i @wethecurious/wtc-ui-library

Usage

Import it into your project

import { SingleDatePicker } from '@wethecurious/wtc-ui-library'

Plain button

// Simple
<SingleDatePicker onDateChange={action('date changed')} />

// Within set range
<SingleDatePicker
  autoFocus={true}
  keepOpenOnDateSelect={true}
  isOutsideRange={day =>
    !isInclusivelyAfterDay(day, moment()) ||
    // @ts-ignore
    isInclusivelyAfterDay(day, moment().add(2, 'weeks'))
  }
  onDateChange={action('date changed')}
/>

<SingleDatePicker
  autoFocus={true}
  keepOpenOnDateSelect={true}
  isDayBlocked={day1 =>
    dayStatuss.some(
      day2 =>
        day2.status === 'status.disabled' &&
        isSameDay(day1, moment(day2.date))
    )
  }
  isDayWarning={day1 =>
    dayStatuss.some(
      day2 =>
        day2.status === 'status.warning' &&
        isSameDay(day1, moment(day2.date))
    )
  }
  dayStatuss={dayStatuss}
  onDateChange={action('date changed')}
/>

Props

PropDescriptionDefault
autoFocusCalendar Open on loadfalse
keepOpenOnDateSelectKeep calendar open on date selectfalse
isDayBlockedSpecific day blocked
isDayWarningSpecific day warning
dayStatussEvents
onDateChangeDate change handler
screenReaderInputMessageScreen reader message
Last updated on 5/7/2019
← Video PlayerDropdown →
  • Install
  • Usage
    • Plain button
  • Props
Docs
Getting Started (or other categories)Guides (or other categories)API Reference (or other categories)
Community
User ShowcaseStack OverflowProject ChatTwitter
More
BlogGitHubStar
Copyright © 2020 We The Curious