         'click .input-details-trigger': -> @switchToScreen('details')
         'click .input-alert': -> @switchToScreen('alert')
         'click .input-repeat': -> @switchToScreen('repeat')
+
+
+    initialize: ->
+        # Listen to the model's change to update the view accordingly.
+        # `start` and `end` are updated when one changed to prevent overlapping
+        # times.
+        @listenTo @model, "change:start", @onStartChange
+        @listenTo @model, "change:end", @onEndChange
+
+
+    # Remove the listeners when the screen is left.
+    onLeaveScreen: ->
+        @stopListening @model
 
 
     getRenderData: ->


    onSetPlace: (ev) ->
        @model.set 'place', ev.target.value



    onSetStart: ->

    expandPopover: ->
        @$optionalFields.attr 'aria-hidden', false
        @$moreDetailsButton.hide()


    # Handle model's change for field `start`
    onStartChange: ->
        newValue = @model.getStartDateObject().format tFormat
        @$('.input-start').val newValue


    # Handle model's change for field `end`
    onEndChange: ->
        endOffset = if @model.isAllDay() then -1 else 0
        newValue = @model.getEndDateObject()
            .add endOffset, 'd'
            .format tFormat
        @$('.input-end-time').val newValue
