chore(Calendar): code review

src/calendar/components/Header.js

@@ -0,0 +1,51 @@
+import { createNamespace } from '../../utils';
+import { t, bem, formatMonthTitle } from '../utils';
+
+const [createComponent] = createNamespace('calendar-header');
+
+export default createComponent({
+  props: {
+    title: String,
+    currentMonth: Date
+  },
+
+  methods: {
+    genTitle() {
+      const title = this.slots('title') || this.title || t('title');
+
+      if (title) {
+        return <div class={bem('header-title')}>{title}</div>;
+      }
+    },
+
+    genMonth() {
+      return (
+        <div class={bem('month-title')}>
+          {formatMonthTitle(this.currentMonth)}
+        </div>
+      );
+    },
+
+    genWeekDays() {
+      const weekdays = t('weekdays');
+
+      return (
+        <div class={bem('weekdays')}>
+          {weekdays.map(item => (
+            <span class={bem('weekday')}>{item}</span>
+          ))}
+        </div>
+      );
+    }
+  },
+
+  render() {
+    return (
+      <div class={bem('header')}>
+        {this.genTitle()}
+        {this.genMonth()}
+        {this.genWeekDays()}
+      </div>
+    );
+  }
+});

src/calendar/components/Month.js

@@ -0,0 +1,74 @@
+import { createNamespace } from '../../utils';
+import { t, bem } from '../utils';
+
+const [createComponent] = createNamespace('calendar-month');
+
+export default createComponent({
+  props: {
+    date: Date,
+    days: Array,
+    title: String
+  },
+
+  mounted() {
+    this.height = this.$el.getBoundingClientRect().height;
+  },
+
+  methods: {
+    getLabel(item) {
+      if (item.type === 'start') {
+        return t('start');
+      }
+
+      if (item.type === 'end') {
+        return t('end');
+      }
+    },
+
+    genTitle() {
+      if (this.title) {
+        return <div class={bem('month-title')}>{this.title}</div>;
+      }
+    },
+
+    genDay(item) {
+      const { type } = item;
+
+      const onClick = () => {
+        if (type !== 'disabled') {
+          this.$emit('click', item);
+        }
+      };
+
+      if (type === 'selected') {
+        return (
+          <div class={bem('day')} onClick={onClick}>
+            <div class={bem('selected-day')}>{item.day}</div>
+          </div>
+        );
+      }
+
+      const label = this.getLabel(item);
+      const Label = label && <div class={bem('day-label')}>{label}</div>;
+
+      return (
+        <div class={bem('day', [type])} onClick={onClick}>
+          {item.day}
+          {Label}
+        </div>
+      );
+    }
+  },
+
+  render() {
+    return (
+      <div class={bem('month')}>
+        {this.genTitle()}
+        <div class={bem('days')}>
+          <div class={bem('month-mark')}>{this.date.getMonth() + 1}</div>
+          {this.days.map(this.genDay)}
+        </div>
+      </div>
+    );
+  }
+});