기간 표시 ( 중복가능 )

Column
Tags
period
multi
 

중복 기간 표시 ( Multi-period marking )

notion image
Calendar 컴포넌트의 height를 늘리는 방식이므로 나머지 컴포넌트에선 지원되지 않는다.
 
  • 아래와 같이 sartingDay, endingDay 여부에 따라 앞단과 뒷단의 길이가 달라진다.
  • 기간을 표기하고 싶다면 해당하는 날짜에 전부 표기를 해야한다는 번거로움이 있다. (라인도 맞춰야함)
notion image
<Calendar markedDates={{
    '2020-12-14': {
        periods: [
            { startingDay: false, endingDay: false, color: 'blue' },
            { startingDay: true, endingDay: false, color: 'orange' },
            { startingDay: false, endingDay: true, color: 'purple' },
            { startingDay: true, endingDay: false, color: 'darkgreen' }
        ]
    },
    '2020-12-15': {
        periods: [
            { color: 'transparent' }, //비워둠 표시
            { color: 'transparent' }, //비워둠 표시
            { color: 'transparent' }, //비워둠 표시
            { startingDay: false, endingDay: false, color: 'darkgreen' }
        ]
    },
    '2020-12-16':{
        periods:[
            { color: 'transparent' }, //비워둠 표시
            { color: 'transparent' }, //비워둠 표시
            { color: 'transparent' }, //비워둠 표시
            { startingDay: false, endingDay: false, color: 'darkgreen' }
        ]
    },
    '2020-12-17':{
        periods:[
            { color: 'transparent' }, //비워둠 표시
            { color: 'transparent' }, //비워둠 표시
            { color: 'transparent' }, //비워둠 표시
            { startingDay: false, endingDay: true, color: 'darkgreen' }
        ]
    },
}}
    // Date marking style [simple/period/multi-dot/custom]. Default = 'simple'
    markingType='multi-period'
/>
 
notion image