let the component more common

dev/App.vue

@@ -16,7 +16,20 @@
         </div>
       </template>
     </vue-event-calendar>
+    <!-- add by Yupi Li -->
+    <h2 class="t-center">Without Events Wrapper</h2>
+    <vue-event-calendar :events="demoEvents" :showEventsWrapper="false"></vue-event-calendar>
+    <h2 class="t-center">Without Events Title</h2>
+    <vue-event-calendar :events="demoEvents" :showTitle="false">
+      <template scope="props">
+        <div v-for="(event, index) in props.showEvents" class="event-item">
+          <!-- In here do whatever you want, make you owner event template -->
+          {{event}}
+        </div>
+      </template>
+    </vue-event-calendar>
   </div>
+  <!-- add by Yupi Li -->
 </template>
 
 <script>

src/components/cal-events-wrapper.vue

@@ -0,0 +1,77 @@
+<!-- add by Yupi Li -->
+<template>
+  <div class="events-wrapper" :style="bgColor">
+    <h2 class="date" v-if="showTitle">
+      {{dayEventsTitle}}
+    </h2>
+    <slot>
+      <div class="cal-events">
+          <div v-for="(event, index) in events" class="event-item" :key="index">
+            <cal-event-item :event="event" :index="index" :locale="locale"></cal-event-item>
+          </div>
+      </div>
+    </slot>
+  </div>
+</template>
+
+<script>
+import i18n from '../i18n.js'
+import { dateTimeFormatter } from '../tools.js'
+import calEventItem from './cal-event-item.vue'
+export default {
+  name: 'cal-events',
+  data () {
+    return {
+      i18n
+    }
+  },
+  components: {
+    'cal-event-item': calEventItem
+  },
+  props: {
+    title: String,
+    showTitle: {
+        type: Boolean,
+        default: true
+    },
+    dayEvents: {
+      type: Object,
+      required: true
+    },
+    locale: {
+      type: String,
+      required: true
+    },
+    color: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    dayEventsTitle () {
+      if (this.title) return this.title
+      if (this.dayEvents.date !== 'all') {
+        let tempDate
+        if (this.dayEvents.events.length !== 0) {
+          tempDate = Date.parse(new Date(this.dayEvents.events[0].date))
+          return dateTimeFormatter(tempDate, i18n[this.locale].fullFormat)
+        } else {
+          tempDate = dateTimeFormatter(Date.parse(new Date(this.dayEvents.date)), i18n[this.locale].fullFormat)
+          return `${tempDate} ${i18n[this.locale].notHaveEvents}`
+        }
+      } else {
+        return i18n[this.locale].dayEventsTitle
+      }
+    },
+    events () {
+      return this.dayEvents.events
+    },
+    bgColor () {
+      return {backgroundColor: this.color}
+    }
+  },
+  methods: {
+    dateTimeFormatter
+  }
+}
+</script>

src/components/cal-events.vue

@@ -1,16 +1,11 @@
 <template>
-  <div class="events-wrapper" :style="bgColor">
-    <h2 class="date">
-      {{dayEventsTitle}}
-    </h2>
     <div class="cal-events">
       <slot>
         <div v-for="(event, index) in events" class="event-item" :key="index">
           <cal-event-item :event="event" :index="index" :locale="locale"></cal-event-item>
         </div>
       </slot>
     </div>
-  </div>
 </template>
 
 <script>
@@ -29,6 +24,10 @@ export default {
   },
   props: {
     title: String,
+    showTitle: {
+        type: Boolean,
+        default: true
+    },
     dayEvents: {
       type: Object,
       required: true

src/vue-event-calendar.vue

@@ -7,18 +7,30 @@
       @cur-day-changed="handleChangeCurDay"
       @month-changed="handleMonthChanged">
     </cal-panel>
+    <!-- add by Yupi Li -->
+    <cal-events-wrapper :title="title"
+                        :dayEvents="selectedDayEvents"
+                        :locale="calendarOptions.options.locale"
+                        :color="calendarOptions.options.color"
+                        :showTitle="showTitle"
+                        v-if="showEventsWrapper">
+    </cal-events-wrapper>
+    <!-- add by Yupi Li -->
     <cal-events
-      :title="title"
-      :dayEvents="selectedDayEvents"
-      :locale="calendarOptions.options.locale"
-      :color="calendarOptions.options.color">
+            :title="title"
+            :dayEvents="selectedDayEvents"
+            :locale="calendarOptions.options.locale"
+            :color="calendarOptions.options.color"
+            :showTitle="showTitle"
+            v-if="!showEventsWrapper">
       <slot :showEvents="selectedDayEvents.events"></slot>
     </cal-events>
   </div>
 </template>
 <script>
 import { isEqualDateStr} from './tools.js'
 
+import calEventsWrapper from './components/cal-events-wrapper.vue'
 import calEvents from './components/cal-events.vue'
 import calPanel from './components/cal-panel.vue'
 
@@ -27,7 +39,8 @@ export default {
   name: 'vue-event-calendar',
   components: {
     'cal-events': calEvents,
-    'cal-panel': calPanel
+    'cal-panel': calPanel,
+    'cal-events-wrapper': calEventsWrapper
   },
   data () {
     return {
@@ -39,6 +52,14 @@ export default {
   },
   props: {
     title: String,
+    showTitle: {
+        type: Boolean,
+        default: true
+    },
+    showEventsWrapper: {
+      type: Boolean,
+      default: true
+    },
     events: {
       type: Array,
       required: true,