feat: prop to change calendar header format

src/components/CalendarContainer.tsx

@@ -23,6 +23,8 @@ interface CalendarContainerProps {
   onChange?: (date: dayjs.Dayjs) => void;
   /** TodayPanel show or hide */
   showToday?: boolean;
+  /** Change calendar header format to monthName, year */
+  monthNameOnHeader?: boolean;
 }
 
 interface PrivateProps {
@@ -60,13 +62,22 @@ class CalendarContainer extends React.Component<Props, State> {
     super(props);
   }
 
+  private formatHeaderTitle = (current: dayjs.Dayjs) => {    
+    if (this.props.monthNameOnHeader) {
+      return dayjs(current).format('MMM, YYYY');
+    }
+
+    return dayjs(current).format('YYYY.MM');
+  }
+
   public getHeaderTitle = () => {
+
     const { current } = this.props;
     const year = dayjs(current).year();
     return {
       [IDatePicker.ViewMode.YEAR]: `${year - 4} - ${year + 5}`,
       [IDatePicker.ViewMode.MONTH]: `${year}`,
-      [IDatePicker.ViewMode.DAY]: dayjs(current).format('YYYY.MM'),
+      [IDatePicker.ViewMode.DAY]: this.formatHeaderTitle(current),
     }[this.state.viewMode];
   };
 

stories/Calendar.stories.tsx

@@ -49,6 +49,9 @@ storiesOf('Calendar', module)
     const showMontCnt = number('showMonthCnt', 2);
     return <CalendarSelectedController showMonthCnt={showMontCnt} />;
   })
+  .add('monthNameOnHeader', () => {
+    return <CalendarSelectedController monthNameOnHeader />
+  })
   .add('disableDay', () => {
     const disableDay = (date: dayjs.Dayjs) => {
       return dayjs(date).date() < 7;

stories/DatePicker.stories.tsx

@@ -31,6 +31,9 @@ storiesOf('DatePicker', module)
   .add('showMonthCnt', () => {
     return <DatePicker {...defaultProps} showMonthCnt={2} />;
   })
+  .add('monthNameOnHeader', () => {
+    return <DatePicker {...defaultProps} monthNameOnHeader />;
+  })
   .add('onTop', () => {
     return (
       <div style={{ paddingTop: '300px' }}>

test/CalendarContainer.test.tsx

@@ -66,6 +66,32 @@ describe('<CalendarContainer/>', () => {
     });
   });
 
+  describe('prop: monthNameOnHeader', () => {
+    let component: ReactWrapper<Props>;
+    let componentNameOnHeader: ReactWrapper<Props>;
+
+    beforeEach(() => {
+      component = mount(
+        <CalendarContainer {...defaultProps} />
+      );
+      componentNameOnHeader = mount(
+        <CalendarContainer {...defaultProps} monthNameOnHeader />
+      );
+    });
+
+    it('should not change format of calendar header', () => {
+      expect(
+        component.find('.calendar__head--title').first().text()
+      ).toEqual('2018.12');
+    });
+
+    it('should change format of calendar header', () => {
+      expect(
+        componentNameOnHeader.find('.calendar__head--title').first().text()
+      ).toEqual('Dec, 2018');
+    });
+  });
+
   describe('handle base test(onPrev, onNext)', () => {
     beforeEach(() => {
       mountComponent = mount(