 
     durationDays = calendarDuration.iterate('days')
     days = []
+    hasActiveAddDate =  @state.activeAddDate?
+
     while durationDays.hasNext()
       dayIter = durationDays.next()
+
       if dayIter.isAfter(referenceDay, 'day')
+
         day = <Day
           date={dayIter}
           onClick={@handleClick}
-          onMouseLeave={@checkAddOnDay}
-          onMouseEnter={@undoActives}
           modifiers={{upcoming: true}}/>
+
+        if hasActiveAddDate
+          # Only attach hover event check when there is an active date.
+          # Otherwise, we would be rendering way too often.
+          day.props.onMouseLeave = @checkAddOnDay
+          day.props.onMouseEnter = @undoActives
+
+          if @state.activeAddDate.isSame(dayIter, 'day')
+            day.props.classes =
+              active: true
+
       else
         day = <Day date={dayIter} modifiers={{past: true}}/>
+
       days.push(day)
 
     days


  handleClick: (componentName, dayMoment, mouseEvent) ->
    @refs.addOnDay.updateState(dayMoment, mouseEvent.pageX, mouseEvent.pageY)
    mouseEvent.currentTarget.classList.add('active')

  checkAddOnDay: (componentName, dayMoment, mouseEvent) ->
    unless mouseEvent.relatedTarget is React.findDOMNode(@refs.addOnDay)


  hideAddOnDay: (componentName, dayMoment, mouseEvent) ->
    @refs.addOnDay.close()
    @setState({
      activeAddDate: null
    })


  # render days based on whether they are past or upcoming
