@ -1,10 +1,14 @@
import React , { useState } from 'react' ; import React , { useState } from 'react' ;
import { DateRange } from '../components/calendar/DateRange' ; import { DateRange } from '../components/calendar/DateRange' ;
import { ActiveColors } from '../types/calendar' ; import { ActiveColors } from '../types/calendar' ;
import { format , startOfDay } from 'date-fns' ;
import styles from './Examples.module.scss' ; import styles from './Examples.module.scss' ;
export const DateRangeWithActiveColors : React.FC = ( ) = > { export const DateRangeWithActiveColors : React.FC = ( ) = > {
const [ colorScheme , setColorScheme ] = useState < 'default' | 'green' | 'purple' | 'orange' > ( 'default' ) ;
const [ colorScheme , setColorScheme ] = useState < 'default' | 'green' | 'purple' | 'orange' > ( 'default' ) ;
const [ activeDates , setActiveDates ] = useState < Date [ ] > ( [ ] ) ;
const [ lastClicked , setLastClicked ] = useState < string > ( '' ) ;
const [ headerMode , setHeaderMode ] = useState < 'normal' | 'short' | 'twoLetter' > ( 'normal' ) ;
const fromDate = new Date ( 2025 , 0 , 15 ) ; // January 15, 2025
const fromDate = new Date ( 2025 , 0 , 15 ) ; // January 15, 2025
const toDate = new Date ( 2025 , 0 , 20 ) ; // January 20, 2025
const toDate = new Date ( 2025 , 0 , 20 ) ; // January 20, 2025
@ -31,11 +35,62 @@ export const DateRangeWithActiveColors: React.FC = () => {
}
}
} ;
} ;
const handleDateClick = ( date : Date ) = > {
const dateString = format ( date , 'MMMM d, yyyy' ) ;
setLastClicked ( dateString ) ;
setActiveDates ( prev = > {
const dateTime = startOfDay ( date ) . getTime ( ) ;
const existingIndex = prev . findIndex ( d = >
startOfDay ( d ) . getTime ( ) === dateTime
) ;
if ( existingIndex >= 0 ) {
return prev . filter ( ( _ , index ) = > index !== existingIndex ) ;
} else {
return [ . . . prev , date ] ;
}
} ) ;
} ;
// Header text transform functions
const headerTransforms = {
normal : undefined ,
short : ( dayName : string ) = > dayName . slice ( 0 , 2 ) ,
twoLetter : ( dayName : string ) = > {
// Custom logic: Mo, Tu, We, Th, Fr, Sa, Su
const customMap : Record < string , string > = {
'MONDAY' : 'Mo' ,
'TUESDAY' : 'Tu' ,
'WEDNESDAY' : 'We' ,
'THURSDAY' : 'Th' ,
'FRIDAY' : 'Fr' ,
'SATURDAY' : 'Sa' ,
'SUNDAY' : 'Su' ,
'MON' : 'Mo' ,
'TUE' : 'Tu' ,
'WED' : 'We' ,
'THU' : 'Th' ,
'FRI' : 'Fr' ,
'SAT' : 'Sa' ,
'SUN' : 'Su' ,
'M' : 'Mo' ,
'T' : 'Tu' ,
'W' : 'We' ,
't' : 'Th' ,
'F' : 'Fr' ,
's' : 'Sa' ,
'S' : 'Su'
} ;
return customMap [ dayName ] || dayName . slice ( 0 , 2 ) ;
}
} ;
return (
return (
< section className = { styles . section } >
< section className = { styles . section } >
< h2 className = { styles . sectionTitle } > Date Range with Active Colors < / h2 >
< h2 className = { styles . sectionTitle } > Date Range with Active Colors & Header Transform < / h2 >
< p className = { styles . sectionDescription } >
< p className = { styles . sectionDescription } >
Customize the colors of selected date ranges using the activeColors prop .
Customize colors and header text display using activeColors and headerTextTransform props .
< / p >
< / p >
< div className = { styles . controlRow } >
< div className = { styles . controlRow } >
@ -52,28 +107,42 @@ export const DateRangeWithActiveColors: React.FC = () => {
< option value = "orange" > Orange < / option >
< option value = "orange" > Orange < / option >
< / select >
< / select >
< / label >
< / label >
< label className = { styles . control } style = { { marginLeft : '20px' } } >
< strong > Header Transform : < / strong >
< select
value = { headerMode }
onChange = { ( e ) = > setHeaderMode ( e . target . value as any ) }
style = { { marginLeft : '8px' , padding : '4px 8px' } }
>
< option value = "normal" > Normal ( default ) < / option >
< option value = "short" > First 2 letters < / option >
< option value = "twoLetter" > Custom 2 - letter ( Mo , Tu , We . . . ) < / option >
< / select >
< / label >
< / div >
< div className = { styles . info } >
< p > Last clicked : { lastClicked || 'None' } < / p >
< p > Active dates : { activeDates . length > 0
? activeDates . map ( d = > format ( d , 'MMM d' ) ) . join ( ', ' )
: 'None (click dates to toggle)' } < / p >
< / div >
< / div >
< div className = { styles . demoContainer } >
< div className = { styles . demoContainer } >
< h3 > Before ( Default Colors ) < / h3 >
< h3 > Interactive Date Range with Custom Colors & Headers < / h3 >
< DateRange
from = { fromDate }
to = { toDate }
selected = { true }
headerStyle = "tiny"
size = "l"
magnify = { true }
/ >
< h3 style = { { marginTop : '2rem' } } > After ( Custom Active Colors ) < / h3 >
< DateRange
< DateRange
from = { fromDate }
from = { fromDate }
to = { toDate }
to = { toDate }
selected = { true }
selected = { true }
headerStyle = "tiny"
headerStyle = "compacted"
size = "l"
size = "l"
fontProportion = { 100 }
magnify = { true }
magnify = { true }
onDateClick = { handleDateClick }
activeDates = { activeDates }
activeColors = { colorSchemes [ colorScheme ] }
activeColors = { colorSchemes [ colorScheme ] }
headerTextTransform = { headerTransforms [ headerMode ] }
/ >
/ >
< / div >
< / div >
@ -82,21 +151,35 @@ export const DateRangeWithActiveColors: React.FC = () => {
from = { new Date ( 2025 , 0 , 15 ) }
from = { new Date ( 2025 , 0 , 15 ) }
to = { new Date ( 2025 , 0 , 20 ) }
to = { new Date ( 2025 , 0 , 20 ) }
selected = { true }
selected = { true }
headerStyle = " tiny "
headerStyle = " compacted "
size = "l"
size = "l"
magnify = { true } $ { colorScheme !== 'default' ? `
magnify = { true }
onDateClick = { handleDateClick }
activeDates = { activeDates } $ { colorScheme !== 'default' ? `
activeColors = { {
activeColors = { {
headerBg : '${colorSchemes[colorScheme]?.headerBg}' ,
headerBg : '${colorSchemes[colorScheme]?.headerBg}' ,
headerColor : '${colorSchemes[colorScheme]?.headerColor}' ,
headerColor : '${colorSchemes[colorScheme]?.headerColor}' ,
contentBg : '${colorSchemes[colorScheme]?.contentBg}' ,
contentBg : '${colorSchemes[colorScheme]?.contentBg}' ,
contentColor : '${colorSchemes[colorScheme]?.contentColor}'
contentColor : '${colorSchemes[colorScheme]?.contentColor}'
} } ` : ''}
} } ` : ''} ${ headerMode !== 'normal' ? `
headerTextTransform = { $ { headerMode === 'short'
? '(dayName) => dayName.slice(0, 2)'
: '(dayName) => customTwoLetterMap[dayName]' } } ` : ''}
/ > ` } < / p r e > / > ` } < / p r e >
< / div >
< / div >
< div className = { styles . info } >
< div className = { styles . info } style = { { marginTop : '20px' , padding : '15px' , background : '#f9f9f9' , borderRadius : '8px' } } >
< h4 > ActiveColors Properties : < / h4 >
< h4 style = { { margin : '0 0 10px 0' } } > 📝 New Feature : headerTextTransform < / h4 >
< ul >
< ul style = { { margin : '10px 0' , paddingLeft : '20px' } } >
< li > The < code > headerTextTransform < / code > prop accepts a function : < code > ( dayName : string ) = > string < / code > < / li >
< li > It receives the day name after headerStyle processing ( e . g . , "MON" for compacted ) < / li >
< li > You can return any string to display in the header < / li >
< li > Great for custom abbreviations or localization needs < / li >
< li > Example : < code > dayName = > dayName . slice ( 0 , 2 ) < / code > for 2 - letter abbreviations < / li >
< / ul >
< h4 style = { { margin : '20px 0 10px 0' } } > 🎨 ActiveColors Properties : < / h4 >
< ul style = { { margin : '10px 0' , paddingLeft : '20px' } } >
< li > < code > headerBg < / code > : Background color for the day header < / li >
< li > < code > headerBg < / code > : Background color for the day header < / li >
< li > < code > headerColor < / code > : Text color for the day header < / li >
< li > < code > headerColor < / code > : Text color for the day header < / li >
< li > < code > contentBg < / code > : Background color for the day content ( number ) < / li >
< li > < code > contentBg < / code > : Background color for the day content ( number ) < / li >
Guillermo Pages
4 months ago