diff --git a/assets/helper.js b/assets/helper.js
new file mode 100644
index 00000000..b8f16b2a
--- /dev/null
+++ b/assets/helper.js
@@ -0,0 +1,38 @@
+import { take, get } from 'lodash'
+
+export function attributesFromEvents (_events, _tags) {
+  const colors = ['blue', 'orange', 'yellow', 'teal', 'indigo', 'green', 'red', 'purple', 'pink', 'gray']
+  const tags = take(_tags, 10).map(t => t.tag)
+  let attributes = []
+  attributes.push({ key: 'today', dates: new Date(), highlight: { color: 'green', fillMode: 'outline' } })
+
+  function getColor (event) {
+    const color = { class: 'vc-rounded-full', color: 'blue', fillMode: 'normal' }
+    const tag = get(event, 'tags[0]')
+    if (!tag) { return color }
+    const idx = tags.indexOf(tag)
+    if (idx < 0) { return color }
+    color.color = colors[idx]
+    return color
+  }
+
+  attributes = attributes.concat(_events
+    .filter(e => !e.multidate)
+    .map(e => {
+      return {
+        key: e.id,
+        dot: getColor(e),
+        dates: new Date(e.start_datetime * 1000)
+      }
+    }))
+
+  attributes = attributes.concat(_events
+    .filter(e => e.multidate)
+    .map(e => ({
+      key: e.id,
+      highlight: getColor(e),
+      dates: { start: new Date(e.start_datetime * 1000), end: new Date(e.end_datetime * 1000) }
+    })))
+
+  return attributes
+}
diff --git a/components/Calendar.vue b/components/Calendar.vue
index aaa643e1..ac89e7e3 100644
--- a/components/Calendar.vue
+++ b/components/Calendar.vue
@@ -16,7 +16,7 @@
 <script>
 import { mapState, mapActions } from 'vuex'
 import dayjs from 'dayjs'
-import { take, get } from 'lodash'
+import { attributesFromEvents } from '../assets/helper'
 
 export default {
   name: 'Calendar',
@@ -33,40 +33,7 @@ export default {
   computed: {
     ...mapState(['tags', 'filters', 'in_past', 'settings']),
     attributes () {
-      const colors = ['blue', 'orange', 'yellow', 'teal', 'indigo', 'green', 'red', 'purple', 'pink', 'gray']
-      const tags = take(this.tags, 10).map(t => t.tag)
-      let attributes = []
-      attributes.push({ key: 'today', dates: new Date(), highlight: { color: 'green', fillMode: 'outline' } })
-
-      function getColor (event) {
-        const color = { class: 'vc-rounded-full', color: 'blue', fillMode: 'normal' }
-        const tag = get(event, 'tags[0]')
-        if (!tag) { return color }
-        const idx = tags.indexOf(tag)
-        if (idx < 0) { return color }
-        color.color = colors[idx]
-        return color
-      }
-
-      attributes = attributes.concat(this.events
-        .filter(e => !e.multidate)
-        .map(e => {
-          return {
-            key: e.id,
-            dot: getColor(e),
-            dates: new Date(e.start_datetime * 1000)
-          }
-        }))
-
-      attributes = attributes.concat(this.events
-        .filter(e => e.multidate)
-        .map(e => ({
-          key: e.id,
-          highlight: getColor(e),
-          dates: { start: new Date(e.start_datetime * 1000), end: new Date(e.end_datetime * 1000) }
-        })))
-
-      return attributes
+      return attributesFromEvents(this.events, this.tags)
     }
   },
   methods: {
diff --git a/pages/add/DateInput.vue b/pages/add/DateInput.vue
index 842ed002..ffb8fc8c 100644
--- a/pages/add/DateInput.vue
+++ b/pages/add/DateInput.vue
@@ -48,16 +48,17 @@
   //-   v-btn-toggle(v-else dense group v-model='value.recurrent.type' color='primary')
   //-     v-btn(text link v-for='whenPattern in whenPatterns' :value='whenPattern.key' :key='whenPatterns.key') {{whenPattern.label}}
 
-  //- List(v-if='event.type==="normal" && todayEvents.length' :events='todayEvents' :title='$t("event.same_day")')
+  List(v-if='type==="normal" && todayEvents.length' :events='todayEvents' :title='$t("event.same_day")')
 
 </template>
 <script>
 import dayjs from 'dayjs'
 import { mapState } from 'vuex'
 import List from '@/components/List'
+import { attributesFromEvents } from '../../assets/helper'
 
 export default {
-  name: 'WhenInput',
+  name: 'DateInput',
   components: { List },
   props: {
     value: { type: Object, default: () => ({ from: null, due: null, recurrent: null }) }
@@ -71,6 +72,7 @@ export default {
       date: null,
       page: null,
       frequency: '',
+      events: [],
       frequencies: [
         { value: '1w', text: this.$t('event.each_week') },
         { value: '2w', text: this.$t('event.each_2w') },
@@ -79,7 +81,16 @@ export default {
     }
   },
   computed: {
-    ...mapState(['settings', 'events']),
+    ...mapState(['settings', 'tags']),
+    todayEvents () {
+      const start = dayjs(this.value.from).startOf('day').unix()
+      const end = dayjs(this.value.from).endOf('day').unix()
+      const events = this.events.filter(e => e.start_datetime >= start && e.start_datetime <= end)
+      return events
+    },
+    attributes () {
+      return attributesFromEvents(this.events, this.tags)
+    },
     fromDate () {
       if (this.value.multidate) {
         return ({ start: dayjs(this.value.from).toDate(), end: dayjs(this.value.due).toDate() })
@@ -105,9 +116,6 @@ export default {
     isRecurrent () {
       return !!this.value.recurrent
     },
-    attributes () {
-      return []
-    },
     whenPatterns () {
       if (!this.value.from) { return }
       const date = dayjs(this.value.from)
@@ -153,7 +161,7 @@ export default {
       return ''
     }
   },
-  mounted () {
+  async mounted () {
     if (this.value.multidate) {
       this.type = 'multidate'
     } else if (this.value.recurrent) {
@@ -161,6 +169,9 @@ export default {
     } else {
       this.type = 'normal'
     }
+    this.events = await this.$api.getEvents({
+      start: dayjs().unix()
+    })
   },
   methods: {
     updateRecurrent (value) {