MiniCalendar

A compact calendar component for displaying a month view with selectable dates.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/react-ui-library

Examples

⁽³⁾

Properties

Playground

Basic MiniCalendar

Compact calendar showing a week view with date selection.

Loading demo…

import
 
{
 useState 
}
 
from
 
'react'
;
import
 
{
 
Block
,
 
MiniCalendar
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
selectedDate
,
 setSelectedDate
]
 
=
 useState
<Date
 
|
 
null
>
(
new
 
Date
(
)
)
;
 
  
return
 
(
    
<Block
 fullWidth
>
      
<MiniCalendar
        
value
=
{
selectedDate
}
        
onChange
=
{
(
date
:
 
Date
 
|
 
null
)
 
=>
 
setSelectedDate
(
date
)
}
        
numberOfDays
=
{
7
}
      
/>
      
<Text
 
size
=
"sm"
 
color
=
"secondary"
>
        
{
selectedDate 
?
 
`Selected: ${selectedDate.toLocaleDateString()}`
 
:
 
'No date selected'
}
      
</Text
>
    
</Block
>
  
)
;
}

Custom Day Count

MiniCalendar with configurable number of days displayed.

Loading demo…

import
 
React
,
 
{
 useState 
}
 
from
 
'react'
;
import
 
{
 
Block
,
 
Button
,
 
MiniCalendar
,
 
Row
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
const
 DAY_OPTIONS 
=
 
[
3
,
 
5
,
 
7
]
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
selectedDate
,
 setSelectedDate
]
 
=
 useState
<Date
 
|
 
null
>
(
new
 
Date
(
)
)
;
  
const
 
[
numberOfDays
,
 setNumberOfDays
]
 
=
 
useState
(
5
)
;
 
  
return
 
(
    
<Block
 fullWidth
>
      
<Row
 
gap
=
"xs"
>
        
{
DAY_OPTIONS
.
map
(
(
days
)
 
=>
 
(
          
<Button
            
key
=
{
days
}
            
size
=
"sm"
            
variant
=
{
numberOfDays 
===
 days 
?
 
'filled'
 
:
 
'outline'
}
            
onPress
=
{
(
)
 
=>
 
setNumberOfDays
(
days
)
}
          
>
            
{
days
}
 days
          
</Button
>
        
)
)
}
      
</Row
>
      
<MiniCalendar
        
value
=
{
selectedDate
}
        
onChange
=
{
(
date
:
 
Date
 
|
 
null
)
 
=>
 
setSelectedDate
(
date
)
}
        
numberOfDays
=
{
numberOfDays
}
      
/>
      
<Text
 
size
=
"sm"
 
color
=
"secondary"
>
        
{
selectedDate 
?
 
`Selected: ${selectedDate.toLocaleDateString()}`
 
:
 
'No date selected'
}
      
</Text
>
    
</Block
>
  
)
;
}

Date Constraints

MiniCalendar with minimum and maximum date restrictions.

Loading demo…

import
 
React
,
 
{
 useMemo
,
 useState 
}
 
from
 
'react'
;
import
 
{
 
Block
,
 
MiniCalendar
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
selectedDate
,
 setSelectedDate
]
 
=
 useState
<Date
 
|
 
null
>
(
new
 
Date
(
)
)
;
 
  
const
 
{
 minDate
,
 maxDate 
}
 
=
 
useMemo
(
(
)
 
=>
 
{
    
const
 today 
=
 
new
 
Date
(
)
;
    
const
 nextWeek 
=
 
new
 
Date
(
)
;
    nextWeek
.
setDate
(
today
.
getDate
(
)
 
+
 
7
)
;
    
return
 
{
 minDate
:
 today
,
 maxDate
:
 nextWeek 
}
;
  
}
,
 
[
]
)
;
 
  
return
 
(
    
<Block
 fullWidth
>
      
<MiniCalendar
        
value
=
{
selectedDate
}
        
onChange
=
{
(
date
:
 
Date
 
|
 
null
)
 
=>
 
setSelectedDate
(
date
)
}
        
numberOfDays
=
{
7
}
        
minDate
=
{
minDate
}
        
maxDate
=
{
maxDate
}
      
/>
      
<Text
 
size
=
"sm"
 
color
=
"secondary"
>
        
{
selectedDate 
?
 
`Selected: ${selectedDate.toLocaleDateString()}`
 
:
 
'No date selected'
}
      
</Text
>
      
<Text
 
size
=
"xs"
 
color
=
"secondary"
>
        
Only
 the next seven days are enabled
      
</Text
>
    
</Block
>
  
)
;
}

Scan to open this page on your phonereact-ui-library.com/components/MiniCalendar

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

Components Charts Hooks

Docs

Getting Started Localization llms.txt

Resources

FAQ Changelog Accessibility Sitemap