diff --git a/bleeding.js b/bleeding.js
index fd38fd939f0c76c4ebe9d383f66c8f44b23d3f13..6501246dbf0b3e94c34393c628fda1343c58aca3 100644
--- a/bleeding.js
+++ b/bleeding.js
@@ -11,7 +11,6 @@ import { saveBleeding } from './db'
 import { formatDateForViewHeader } from './format'
 import { bleeding as labels } from './labels'
 import getCycleDay from './get-cycle-day'
-import { bleedingDaysSortedByDate } from './db'
 
 export default class Bleeding extends Component {
   constructor(props) {
diff --git a/calendar.js b/calendar.js
index 2cb6f9495247dc54d03547105fc8b5d2f8092390..4fdbd2fb5cd822d8597b7c82ac26d8dea1dcd82c 100644
--- a/calendar.js
+++ b/calendar.js
@@ -9,10 +9,11 @@ export default class DatePickView extends Component {
     super(props)
     this.state = { bleedingDaysInCalFormat: getBleedingDaysInCalFormat(bleedingDaysSortedByDate) }
 
-    // so we rerender the calendar when there are new bleeding days
-    bleedingDaysSortedByDate.addListener(() => {
-      this.setState({ bleedingDaysInCalFormat: getBleedingDaysInCalFormat(bleedingDaysSortedByDate) })
-    })
+    bleedingDaysSortedByDate.addListener(setStateWithCalendarFormattedDays.bind(this))
+  }
+
+  componentWillUnmount() {
+    bleedingDaysSortedByDate.removeListener(setStateWithCalendarFormattedDays)
   }
 
   passDateToDayView(result) {
@@ -43,4 +44,8 @@ function getBleedingDaysInCalFormat(bleedingDaysSortedByDate) {
     acc[dateString] = { startingDay: true, endingDay: true, color: shadesOfRed[day.bleeding.value] }
     return acc
   }, {})
+}
+
+function setStateWithCalendarFormattedDays() {
+  this.setState({ bleedingDaysInCalFormat: getBleedingDaysInCalFormat(bleedingDaysSortedByDate) })
 }
\ No newline at end of file