1.0.10 • Published 3 years ago
small-google-calendar v1.0.10
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
1.0.19
3 years ago
1.0.18
3 years ago
1.0.22
3 years ago
1.0.21
3 years ago
1.0.20
3 years ago
1.0.17
3 years ago
1.0.16
3 years ago
1.0.15
3 years ago
1.0.14
3 years ago
1.0.13
3 years ago
1.0.12
3 years ago
1.0.11
3 years ago
1.0.10
3 years ago
1.0.9
3 years ago
1.0.8
3 years ago
1.0.7
3 years ago
1.0.6
3 years ago
1.0.5
3 years ago
1.0.4
3 years ago
1.0.3
3 years ago
1.0.2
3 years ago
1.0.1
3 years ago
1.0.0
3 years ago