small-google-calendar

Small calendar for selecting the date in a convenient way

Zero dependencies, lightweight library.

Import

import { Calendar } from 'small-google-calendar'

Simple usage with statefulness

import React, { useState } from 'react'
import { Calendar } from 'small-google-calendar'

function App() {
  const [date, setDate] = useState(new Date())

  return (
    <div>
      <Calendar onChange={(value) => setDate(value)} />
      <input value={`${date}`} />
    </div>
  )
}

Simple usage without state

import React from 'react'
import { Calendar } from 'small-google-calendar'

function App() {
  return (
    <Calendar>
      {(date) => {
        return <input value={`${date}`} />
      }}
    </Calendar>
  )
}

Open calendar only when you need it

import React, { useState } from 'react'
import { Calendar } from 'small-google-calendar'

function App() {
  const [show, setShow] = useState(false)
  const [date, setDate] = useState(new Date())

  return (
    <div>
      <input value={`${date}`} onClick={() => setShow(true)} />
      <Calendar
        show={show}
        onChange={(value) => {
          setDate(value)
          setShow(false)
        }}
      />
    </div>
  )
}

Format your date with whatever you want

import React, { useState } from 'react'
import { Calendar } from 'small-google-calendar'
import { format } from 'date-fns'

function App() {
  const [show, setShow] = useState(false)
  const [date, setDate] = useState(new Date())

  return (
    <div>
      <input value={format(date, 'dd/MM/yyyy')} onClick={() => setShow(true)} />
      <Calendar
        show={show}
        onChange={(value) => {
          setDate(value)
          setShow(false)
        }}
      />
    </div>
  )
}

Typescript support

You can also import props by calendar

import { Calendar, CalendarProps } from 'small-google-calendar'

export declare type Sizing = 'sm' | 'md' | 'lg';
export declare type CalendarProps = PropsWithChildren<{
    show?: boolean;
    onChange?: (date: Date) => void;
    children?: ((date: Date) => React.ReactElement) | React.ReactNode;
    sizing?: Sizing;
}>;

License

MIT