Merge lp:~majster-pl/ubuntu-calendar-app/new-event-page into lp:ubuntu-calendar-app

[Szymon Waliczek]

This is very first implementation of new-event-page.
There is still plenty of space of improvements but I want to get it reviewed before I continue my work.

[Jenkins Bot (ubuntu-core-apps-jenkins-bot)]

FAILED: Continuous integration, rev:773
No commit message was specified in the merge proposal. Click on the following link and set the commit message (if you want a jenkins rebuild you need to trigger it yourself):
https://code.launchpad.net/~majster-pl/ubuntu-calendar-app/new-event-page/+merge/288637/+edit-commit-message

https://core-apps-jenkins.ubuntu.com/job/calendar-app-ci/788/
Executed test runs:
    None: https://core-apps-jenkins.ubuntu.com/job/generic-update-mp/738/console

Click here to trigger a rebuild:
https://core-apps-jenkins.ubuntu.com/job/calendar-app-ci/788/rebuild

review: Needs Fixing (continuous-integration)

[Nekhelesh Ramananthan (nik90)]

I'm setting this MP as a work in progress since it is. I have added inline comments of all things that needs fixing. This is just a preliminary check since I suspect more changes.

Do note that when I click the add guest button, I get ,

file:///opt/click.ubuntu.com/com.ubuntu.calendar/0.4.latest/NewEvent.qml:726:17: QML ScriptAction: file:///opt/click.ubuntu.com/com.ubuntu.calendar/0.4.latest/NewEvent.qml:728: ReferenceError: addGuestButton is not defined
                            if (addGuestButton.contactsPopup) {

Not sure if this was introduced in your branch or in trunk by some other branch. Please do check to make sure you don't introduce a regression.

I also see file:///opt/click.ubuntu.com/com.ubuntu.calendar/0.4.latest/NewEvent.qml:347:28: Unable to assign [undefined] to QColor

review: Needs Fixing

[Nekhelesh Ramananthan (nik90)]

Nice work! It is *almost* ready. Just few minor touch ups to do and then we are set to land this MP.

1. In the old guest design layout, I notice 3 minor issues ( refer to http://imgur.com/HC4JAcs )

a) Remove the listitem dividers of the guests listitem
b) set the guest listitem height as listitemlayout.height. Otherwise it is not centered vertically.
c) Align the guest names to the "Add Guest" button. This can be done by setting the left and right margin to -2 gu. Yes negative :)

2. In the repeat and reminders page, the "Repeat" and "Reminder" listitem header is shown using "blue" color due to the new SDK. Please change these to the new list items to fix this issue.
( refer to http://imgur.com/5yzzm8h )

3. The selection color which is shown when you click on the date/time is a bit strong. Please change the background to lightgray shade and the text color to white/black.

review: Needs Fixing

[Nekhelesh Ramananthan (nik90)]

Almost there, just noticed one minor issue. In the Event reminders page, the option "No Reminder" is hidden by the page header. I had a quick look at it, and is quite easy to fix -> http://paste.ubuntu.com/15391380/

review: Needs Fixing

[Nekhelesh Ramananthan (nik90)]

LGTM. Awesome work. We can finish of the new design implementation for the Guests feature when we get design specs for it in another MP.

@renato, You can go ahead test this and top-approve. It fixes the label color issue that bill pointed out as well.

review: Approve (code-review & testing)

[Renato Araujo Oliveira Filho (renatofilho)]

Great work.
I added some small comments but in general the code looks great.

[Szymon Waliczek (majster-pl)]

Thanks for review, I added few comments.
Will push fixed code soon.

[lp:~majster-pl/ubuntu-calendar-app/new-event-page]

779. By Szymon Waliczek on 2016-03-15

Added Flickable to EventRepetition.qml and fixed anchoring to header.
Removed unnecessary empty lanes and code clean up.

[Renato Araujo Oliveira Filho (renatofilho)]

Code looks good, but I can not test it due some conflicts with trunk.

please merge with trunk

[Jenkins Bot (ubuntu-core-apps-jenkins-bot)]

FAILED: Continuous integration, rev:779
No commit message was specified in the merge proposal. Click on the following link and set the commit message (if you want a jenkins rebuild you need to trigger it yourself):
https://code.launchpad.net/~majster-pl/ubuntu-calendar-app/new-event-page/+merge/288637/+edit-commit-message

https://core-apps-jenkins.ubuntu.com/job/calendar-app-ci/796/
Executed test runs:
    None: https://core-apps-jenkins.ubuntu.com/job/generic-update-mp/798/console

Click here to trigger a rebuild:
https://core-apps-jenkins.ubuntu.com/job/calendar-app-ci/796/rebuild

review: Needs Fixing (continuous-integration)

[Renato Araujo Oliveira Filho (renatofilho)]

MR replaced by: https://code.launchpad.net/~majster-pl/ubuntu-calendar-app/new-event-page2/+merge/291516

review: Disapprove

Unmerged revisions

779. By Szymon Waliczek on 2016-03-15

Added Flickable to EventRepetition.qml and fixed anchoring to header.
Removed unnecessary empty lanes and code clean up.

778. By Szymon Waliczek on 2016-03-15

Fix 'No Reminder' hiden under header. in EventReminder.qml

777. By Szymon Waliczek on 2016-03-15

Update code to new SDK (header, ListItems)
Small visual improvments in Guest repeater.
Changed color of selection then user choosing date/time.

776. By Szymon Waliczek on 2016-03-15

Postpone the 'Add guest' redesign - waiting for designs.

775. By Szymon Waliczek on 2016-03-15

Fix Save button to be desible when no event name is not set.

774. By Szymon Waliczek on 2016-03-15

Fixed everything what Nik90 pointed out in review, apart from AddGuest field as I'm missing designs for it.

773. By Szymon Waliczek on 2016-03-09

First implementation of NewEvent.qml page, few code clean ups

=== modified file 'EventReminder.qml'
--- EventReminder.qml	2016-01-29 14:47:31 +0000
+++ EventReminder.qml	2016-03-15 21:24:54 +0000
@@ -32,43 +32,54 @@
 
     visible: false
     flickable: null
-    title: i18n.tr("Reminder")
-
-    head.backAction: Action{
-        iconName:"back"
-        onTriggered:{
-            var repeatCount = 3;
-            var repeatDelay = 5 * 60;
-
-            //reminder on event time
-            if( reminderTime === 0 ) {
-                repeatCount = 0;
-                repeatDelay = 0;
-            } else if( reminderTime === 300) { //5 min
-                repeatCount = 1;
+
+    header: PageHeader {
+        title: i18n.tr("Reminder")
+        flickable: _pageFlickable
+
+        leadingActionBar.actions: [
+            Action {
+                iconName: "back"
+                text: "Back"
+                shortcut: "Esc"
+                onTriggered: onBackClicked()
             }
-
-            visualReminder.repetitionCount = repeatCount;
-            visualReminder.repetitionDelay = repeatDelay;
-            visualReminder.message = eventTitle
-            visualReminder.secondsBeforeStart = reminderTime;
-
-            audibleReminder.repetitionCount = repeatCount;
-            audibleReminder.repetitionDelay = repeatDelay;
-            audibleReminder.secondsBeforeStart = reminderTime;
-
-            pop();
+        ]
+    }
+
+    function onBackClicked() {
+        var repeatCount = 3;
+        var repeatDelay = 5 * 60;
+
+        //reminder on event time
+        if( reminderTime === 0 ) {
+            repeatCount = 0;
+            repeatDelay = 0;
+        } else if( reminderTime === 300) { //5 min
+            repeatCount = 1;
         }
+
+        visualReminder.repetitionCount = repeatCount;
+        visualReminder.repetitionDelay = repeatDelay;
+        visualReminder.message = eventTitle
+        visualReminder.secondsBeforeStart = reminderTime;
+
+        audibleReminder.repetitionCount = repeatCount;
+        audibleReminder.repetitionDelay = repeatDelay;
+        audibleReminder.secondsBeforeStart = reminderTime;
+
+        pop();
     }
+
     Scrollbar{
         id:scrollList
         flickableItem: _pageFlickable
-        anchors.fill :parent
+        anchors.fill: parent
     }
+
     Flickable {
         id: _pageFlickable
 
-
         clip: true
         anchors.fill: parent
         contentHeight: _reminders.itemHeight * reminderModel.count + units.gu(2)
@@ -91,6 +102,7 @@
                 }
             }
         }
+
         Component {
             id: selectorDelegate
             OptionSelectorDelegate { text: label; }
 
=== modified file 'EventRepetition.qml'
--- EventRepetition.qml	2016-03-07 17:57:04 +0000
+++ EventRepetition.qml	2016-03-15 21:24:54 +0000
@@ -19,25 +19,37 @@
 import QtQuick 2.4
 import QtOrganizer 5.0
 import Ubuntu.Components 1.3
-import Ubuntu.Components.ListItems 1.0 as ListItem
+import Ubuntu.Components.ListItems 1.0 as ListItems
 import Ubuntu.Components.Pickers 1.0
 import QtOrganizer 5.0
 import "Defines.js" as Defines
 import "Recurrence.js" as Recurrence
 
 Page {
-    id: repetition
+    id: root
 
     property var weekDays : [];
     property var eventRoot;
     property var isEdit
 
     visible: false
-    // TRANSLATORS: this refers to how often a recurrent event repeats
-    // and it is shown as the header of the page to choose repetition
-    // and as the header of the list item that shows the repetition
-    // summary in the page that displays the event details
-    title: i18n.tr("Repeat")
+    header: PageHeader {
+        // TRANSLATORS: this refers to how often a recurrent event repeats
+        // and it is shown as the header of the page to choose repetition
+        // and as the header of the list item that shows the repetition
+        // summary in the page that displays the event details
+        title: i18n.tr("Repeat")
+        flickable: null
+
+        leadingActionBar.actions: [
+            Action {
+                iconName: "back"
+                text: "Back"
+                shortcut: "Esc"
+                onTriggered: onBackClicked()
+            }
+        ]
+    }
 
     EventUtils{
         id:eventUtils
@@ -92,192 +104,229 @@
         recurrenceOption.selectedIndex = index;
     }
 
-    head.backAction: Action{
-        id:backAction
-        iconName: "back"
-        onTriggered: {
-            var recurrenceRule = Defines.recurrenceValue[ recurrenceOption.selectedIndex ];
-
-            if (recurrenceRule !== RecurrenceRule.Invalid) {
-                if (eventRoot.rule === null || eventRoot.rule === undefined ){
-                    eventRoot.rule = Qt.createQmlObject("import QtOrganizer 5.0; RecurrenceRule {}", eventRoot.event.recurrence,"EventRepetition.qml");
-                }
-
-                var rule = eventRoot.rule;
-                rule.frequency = recurrenceRule;
-                switch(recurrenceOption.selectedIndex){
-                case 1: //daily
-                case 2: //weekly
-                case 3: //weekly
-                case 4: //weekly
-                case 5: //weekly
-                    rule.daysOfWeek = eventUtils.getDaysOfWeek(recurrenceOption.selectedIndex, weekDays );
-                    break;
-                case 6: //monthly
-                    rule.daysOfMonth = [eventRoot.date.getDate()];
-                    break;
-                case 7: //yearly
-                    rule.monthsOfYear = [eventRoot.date.getMonth()];
-                    rule.daysOfMonth = [eventRoot.date.getDate()];
-                    break;
-                case 0: //once
-                default:
-                    //it should not come here
-                    break;
-                }
-
-                if (limitOptions.selectedIndex === 1
-                        && recurrenceOption.selectedIndex > 0
-                        && limitCount.text != "") {
-                    rule.limit =  parseInt(limitCount.text);
-                }
-                else if (limitOptions.selectedIndex === 2 && recurrenceOption.selectedIndex > 0) {
-                    rule.limit =  datePick.date;
-                }
-                else {
-                    rule.limit = undefined;
-                }
+    function onBackClicked() {
+        var recurrenceRule = Defines.recurrenceValue[ recurrenceOption.selectedIndex ];
+
+        if (recurrenceRule !== RecurrenceRule.Invalid) {
+            if (eventRoot.rule === null || eventRoot.rule === undefined ){
+                eventRoot.rule = Qt.createQmlObject("import QtOrganizer 5.0; RecurrenceRule {}", eventRoot.event.recurrence,"EventRepetition.qml");
+            }
+
+            var rule = eventRoot.rule;
+            rule.frequency = recurrenceRule;
+            switch(recurrenceOption.selectedIndex){
+            case 1: //daily
+            case 2: //weekly
+            case 3: //weekly
+            case 4: //weekly
+            case 5: //weekly
+                rule.daysOfWeek = eventUtils.getDaysOfWeek(recurrenceOption.selectedIndex, weekDays );
+                break;
+            case 6: //monthly
+                rule.daysOfMonth = [eventRoot.date.getDate()];
+                break;
+            case 7: //yearly
+                rule.monthsOfYear = [eventRoot.date.getMonth()];
+                rule.daysOfMonth = [eventRoot.date.getDate()];
+                break;
+            case 0: //once
+            default:
+                //it should not come here
+                break;
+            }
+
+            if (limitOptions.selectedIndex === 1
+                    && recurrenceOption.selectedIndex > 0
+                    && limitCount.text != "") {
+                rule.limit =  parseInt(limitCount.text);
+            }
+            else if (limitOptions.selectedIndex === 2 && recurrenceOption.selectedIndex > 0) {
+                rule.limit =  datePick.date;
             }
             else {
-                eventRoot.rule = null;
+                rule.limit = undefined;
             }
-            pop()
-        }
+        }
+        else {
+            eventRoot.rule = null;
+        }
+        pop()
     }
 
-    Column{
-        id:repeatColumn
-
-        anchors.fill: parent
-        spacing: units.gu(1)
-
-        ListItem.Header{
-            text: i18n.tr("Repeat")
-        }
-
-        OptionSelector{
-            id: recurrenceOption
-            visible: true
-
-            anchors {
-                left: parent.left
-                right: parent.right
-                margins: units.gu(2)
-            }
-
-            model: Defines.recurrenceLabel
-            containerHeight: itemHeight * 4
-            onExpandedChanged: Qt.inputMethod.hide();
-        }
-
-        ListItem.Header{
-            text: i18n.tr("Repeats On:")
-            visible: recurrenceOption.selectedIndex == 5
-        }
-
-        Row {
-            id: weeksRow
-
-            anchors {
-                left: parent.left
-                right: parent.right
-                margins: units.gu(2)
-            }
-
+    Flickable {
+        anchors { fill: parent; topMargin: parent.header.height }
+        contentHeight: repeatColumn.height + units.gu(2)
+        interactive: repeatColumn.height > height ? true : false
+        Column{
+            id:repeatColumn
+
+            width: parent.width
             spacing: units.gu(1)
-            visible: recurrenceOption.selectedIndex == 5
-
-            Repeater {
-                model: Defines.weekLabel
-                Column {
-                    id: weeksRowColumn
-                    spacing: units.gu(1)
-                    Label {
-                        id:lbl
-                        text:modelData
-                        anchors.horizontalCenter: parent.horizontalCenter
-                    }
-                    CheckBox {
-                        id: weekCheck
-                        onCheckedChanged: {
-                            //EDS consider 7 as Sunday index so if the index is 0 then we have to explicitly push Sunday.
-                            if(index === 0)
-                                (checked) ? weekDays.push(Qt.Sunday) : weekDays.splice(weekDays.indexOf(Qt.Sunday),1);
-                            else
-                                (checked) ? weekDays.push(index) : weekDays.splice(weekDays.indexOf(index),1);
-                        }
-                        checked:{
-                            (weekDays.length === 0 && eventRoot.date && (index === eventRoot.date.getDay()) && !isEdit) ? true : false;
-                        }
-
-                    }
-                }
-            }
-        }
-
-        ListItem.Header {
-            text: i18n.tr("Recurring event ends")
-            visible: recurrenceOption.selectedIndex != 0
-        }
-
-        OptionSelector{
-            id: limitOptions
-            visible: recurrenceOption.selectedIndex != 0
-
-            anchors {
-                left: parent.left
-                right: parent.right
-                margins: units.gu(2)
-            }
-
-            model: limitLabels
-            containerHeight: itemHeight * 4
-            onExpandedChanged:   Qt.inputMethod.hide()
-        }
-
-        ListItem.Header{
-            // TRANSLATORS: this refers to how often a recurrent event repeats
-            // and it is shown as the header of the option selector to choose
-            // its repetition
-            text:i18n.tr("Repeats")
-            visible: recurrenceOption.selectedIndex != 0
-                     && limitOptions.selectedIndex == 1
-        }
-
-        TextField {
-            id: limitCount
-            objectName: "eventLimitCount"
-
-            anchors {
-                left: parent.left
-                right: parent.right
-                margins: units.gu(2)
-            }
-
-            visible: recurrenceOption.selectedIndex != 0 && limitOptions.selectedIndex == 1
-            validator: IntValidator{ bottom: 1; }
-            inputMethodHints: Qt.ImhDialableCharactersOnly
-
-            onTextChanged: {
-                backAction.enabled = !!text.trim()
-            }
-        }
-
-        ListItem.Header{
-            text:i18n.tr("Date")
-            visible: recurrenceOption.selectedIndex != 0 && limitOptions.selectedIndex == 2
-        }
-
-        DatePicker{
-            id:datePick;
-
-            anchors {
-                left: parent.left
-                right: parent.right
-                margins: units.gu(2)
-            }
-
-            visible: recurrenceOption.selectedIndex != 0 && limitOptions.selectedIndex===2
+
+            ListItem {
+                height: repeatListItem.height
+                divider.visible: false
+
+                ListItemLayout {
+                    id: repeatListItem
+                    title.text: i18n.tr("Repeat")
+                    title.color: Theme.palette.selected.overlayText
+                }
+            }
+
+            OptionSelector{
+                id: recurrenceOption
+                visible: true
+
+                anchors {
+                    left: parent.left
+                    right: parent.right
+                    margins: units.gu(2)
+                }
+
+                model: Defines.recurrenceLabel
+                containerHeight: itemHeight * 4
+                onExpandedChanged: Qt.inputMethod.hide();
+            }
+
+            ListItem {
+                visible: recurrenceOption.selectedIndex == 5
+                divider.visible: false
+
+                ListItemLayout {
+                    id: repeatsOnListItem
+                    title.text: i18n.tr("Repeats On:")
+                    title.color: Theme.palette.selected.overlayText
+                }
+            }
+
+            Row {
+                id: weeksRow
+
+                anchors {
+                    left: parent.left
+                    right: parent.right
+                    margins: units.gu(2)
+                }
+
+                spacing: units.gu(1)
+                visible: recurrenceOption.selectedIndex == 5
+
+                Repeater {
+                    model: Defines.weekLabel
+                    Column {
+                        id: weeksRowColumn
+                        spacing: units.gu(1)
+                        Label {
+                            id:lbl
+                            text:modelData
+                            anchors.horizontalCenter: parent.horizontalCenter
+                        }
+                        CheckBox {
+                            id: weekCheck
+                            onCheckedChanged: {
+                                //EDS consider 7 as Sunday index so if the index is 0 then we have to explicitly push Sunday.
+                                if(index === 0)
+                                    (checked) ? weekDays.push(Qt.Sunday) : weekDays.splice(weekDays.indexOf(Qt.Sunday),1);
+                                else
+                                    (checked) ? weekDays.push(index) : weekDays.splice(weekDays.indexOf(index),1);
+                            }
+                            checked:{
+                                (weekDays.length === 0 && eventRoot.date && (index === eventRoot.date.getDay()) && !isEdit) ? true : false;
+                            }
+
+                        }
+                    }
+                }
+            }
+
+            ListItem {
+                visible: recurrenceOption.selectedIndex != 0
+                divider.visible: false
+                height: recurringEventListItem.height
+
+                ListItemLayout {
+                    id: recurringEventListItem
+                    title.text: i18n.tr("Recurring event ends")
+                    title.color: Theme.palette.selected.overlayText
+                }
+            }
+
+            OptionSelector{
+                id: limitOptions
+                visible: recurrenceOption.selectedIndex != 0
+
+                anchors {
+                    left: parent.left
+                    right: parent.right
+                    margins: units.gu(2)
+                }
+
+                model: limitLabels
+                containerHeight: itemHeight * 4
+                onExpandedChanged:   Qt.inputMethod.hide()
+            }
+
+            ListItem {
+                visible: recurrenceOption.selectedIndex != 0
+                         && limitOptions.selectedIndex == 1
+                divider.visible: false
+                height: repeatsListItem.height
+
+                ListItemLayout {
+                    id: repeatsListItem
+                    // TRANSLATORS: this refers to how often a recurrent event repeats
+                    // and it is shown as the header of the option selector to choose
+                    // its repetition
+                    title.text:i18n.tr("Repeats")
+                    title.color: Theme.palette.selected.overlayText
+                }
+
+            }
+
+            TextField {
+                id: limitCount
+                objectName: "eventLimitCount"
+
+                anchors {
+                    left: parent.left
+                    right: parent.right
+                    margins: units.gu(2)
+                }
+
+                visible: recurrenceOption.selectedIndex != 0 && limitOptions.selectedIndex == 1
+                validator: IntValidator{ bottom: 1; }
+                inputMethodHints: Qt.ImhDialableCharactersOnly
+
+                onTextChanged: {
+                    backAction.enabled = !!text.trim()
+                }
+            }
+
+            ListItem {
+                visible: recurrenceOption.selectedIndex != 0 && limitOptions.selectedIndex == 2
+                divider.visible: false
+                height: dateListItem.height
+
+                ListItemLayout {
+                    id: dateListItem
+                    title.text:i18n.tr("Date")
+                    title.color: Theme.palette.selected.overlayText
+                }
+            }
+
+            DatePicker{
+                id:datePick;
+
+                anchors {
+                    left: parent.left
+                    right: parent.right
+                    margins: units.gu(2)
+                }
+
+                visible: recurrenceOption.selectedIndex != 0 && limitOptions.selectedIndex===2
+            }
         }
     }
+
 }
 
=== modified file 'NewEvent.qml'
--- NewEvent.qml	2016-03-14 20:25:50 +0000
+++ NewEvent.qml	2016-03-15 21:24:54 +0000
@@ -66,8 +66,7 @@
         }
     }
 
-    function cancel()
-    {
+    function cancel() {
         if (pageStack)
             pageStack.pop();
         root.canceled()
@@ -254,6 +253,11 @@
         secondsBeforeStart: root.reminderValue
     }
 
+    RemindersModel {
+        id: reminderModel
+    }
+
+
     function getDaysOfWeek(){
         var daysOfWeek = [];
         switch(recurrenceOption.selectedIndex){
@@ -310,7 +314,6 @@
         scrollAnimation.start()
     }
 
-    Keys.onEscapePressed: root.cancel()
     onStartDateChanged: {
         if (!startDate)
             return
@@ -333,42 +336,47 @@
 
     header: PageHeader {
         id: pageHeader
-
-        flickable: null
-        title: isEdit ? i18n.tr("Edit Event"):i18n.tr("New Event")
-        leadingActionBar.actions: Action {
-            id: backAction
-
-            name: "cancel"
-            text: i18n.tr("Cancel")
-            iconName: isEdit ? "back" : "down"
-            onTriggered: root.cancel()
-        }
-
-        trailingActionBar.actions: [
-            Action {
-                text: i18n.tr("Delete");
-                objectName: "delete"
-                iconName: "delete"
-                visible : isEdit
-                onTriggered: {
-                    var dialog = PopupUtils.open(Qt.resolvedUrl("DeleteConfirmationDialog.qml"),root,{"event": event});
-                    dialog.deleteEvent.connect( function(eventId){
-                        model.removeItem(eventId);
-                        if (pageStack)
-                            pageStack.pop();
-                        root.eventDeleted(eventId);
-                    });
-                }
-            },
-            Action {
-                iconName: "ok"
-                objectName: "save"
+        property Component delegate: Component {
+            AbstractButton {
+                id: button
+                action: modelData
+                width: label.width + units.gu(4)
+                height: parent.height
+                Rectangle {
+                    color: parent.pressed ? UbuntuColors.coolGrey : UbuntuColors.slate
+                    opacity: 0.1
+                    anchors.fill: parent
+                    visible: button.pressed
+                }
+                Label {
+                    anchors.centerIn: parent
+                    id: label
+                    text: action.text
+                    font.weight: text === i18n.tr("Save") ? Font.Normal : Font.Light
+                }
+            }
+        }
+        leadingActionBar {
+            anchors.leftMargin: 0
+            actions: Action {
+                text: i18n.tr("Cancel")
+                iconName: "close"
+                shortcut: "Esc"
+                onTriggered: root.cancel()
+            }
+            delegate: pageHeader.delegate
+        }
+        trailingActionBar {
+            anchors.rightMargin: 0
+            actions: Action {
                 text: i18n.tr("Save")
+                iconName: "tick"
+                shortcut: "Ctrl+S"
                 enabled: !!titleEdit.text.trim()
-                onTriggered: saveToQtPim();
+                onTriggered: saveToQtPim()
             }
-        ]
+            delegate: pageHeader.delegate
+        }
     }
 
     Component{
@@ -389,7 +397,6 @@
 
     Flickable{
         id: flickable
-        clip: true
 
         property var activeItem: null
 
@@ -419,11 +426,11 @@
             flickable.returnToBounds()
         }
 
+        clip: true
         flickableDirection: Flickable.VerticalFlick
         anchors{
             left: parent.left
-            top: parent.top
-            topMargin: pageHeader.height
+            top: parent.header.bottom
             right: parent.right
             bottom: keyboardRectangle.top
         }
@@ -437,7 +444,8 @@
 
             NewEventTimePicker{
                 id: startDateTimeInput
-                header: i18n.tr("From")
+                //TRANSLATORS: this referes to date. eg:  From: Wendsday, 9 March 2016
+                headerText: i18n.tr("From")
                 showTimePicker: !allDayEventCheckbox.checked
                 anchors {
                     left: parent.left
@@ -450,7 +458,8 @@
 
             NewEventTimePicker{
                 id: endDateTimeInput
-                header: i18n.tr("To")
+                //TRANSLATORS: this referes to date. eg:  To: Wendsday, 9 March 2016
+                headerText: i18n.tr("To")
                 showTimePicker: !allDayEventCheckbox.checked
                 anchors {
                     left: parent.left
@@ -461,184 +470,186 @@
                 }
             }
 
-            ListItems.Standard {
-                anchors {
-                    left: parent.left
-                    right: parent.right
-                }
-
-                text: i18n.tr("All day event")
-                showDivider: false
-                control: CheckBox {
-                    objectName: "allDayEventCheckbox"
-                    id: allDayEventCheckbox
-                    checked: false
-                }
-            }
-
-            ListItems.ThinDivider {}
-
-            Column {
-                width: parent.width
-                spacing: units.gu(1)
-
-                ListItems.Header{
-                    text: i18n.tr("Event Details")
-                }
-
-                TextField {
-                    id: titleEdit
-                    objectName: "newEventName"
-
-                    anchors {
-                        left: parent.left
-                        right: parent.right
-                        margins: units.gu(2)
-                    }
-
-                    inputMethodHints: Qt.ImhNoPredictiveText
-                    placeholderText: i18n.tr("Event Name")
-                    onFocusChanged: {
-                        if(titleEdit.focus) {
-                            flickable.makeMeVisible(titleEdit);
-                        }
-                    }
-                }
-
-                TextArea{
-                    id: messageEdit
-                    objectName: "eventDescriptionInput"
-
-                    anchors {
-                        left: parent.left
-                        right: parent.right
-                        margins: units.gu(2)
-                    }
-
-                    placeholderText: i18n.tr("Description")
-                    onFocusChanged: {
-                        if(messageEdit.focus) {
-                            flickable.makeMeVisible(messageEdit);
-                        }
-                    }
-                }
-
-                TextField {
-                    id: locationEdit
-                    objectName: "eventLocationInput"
-
-                    anchors {
-                        left: parent.left
-                        right: parent.right
-                        margins: units.gu(2)
-                    }
-
-                    inputMethodHints: Qt.ImhNoPredictiveText
-                    placeholderText: i18n.tr("Location")
-
-                    onFocusChanged: {
-                        if(locationEdit.focus) {
-                            flickable.makeMeVisible(locationEdit);
-                        }
-                    }
-                }
-            }
-
-            Column {
-                width: parent.width
-                spacing: units.gu(1)
-
-                ListItems.Header {
-                    text: i18n.tr("Calendar")
-                }
-
-                OptionSelector{
-                    id: calendarsOption
-                    objectName: "calendarsOption"
-
-                    anchors {
-                        left: parent.left
-                        right: parent.right
-                        margins: units.gu(2)
-                    }
-
-                    containerHeight: itemHeight * 4
-                    model: root.model.getWritableCollections();
-
-                    delegate: OptionSelectorDelegate{
-                        text: modelData.name
-
-                        UbuntuShape{
-                            id: calColor
-                            width: height
-                            height: parent.height - units.gu(2)
-                            color: modelData.color
-                            anchors {
-                                right: parent.right
-                                rightMargin: units.gu(4)
-                                verticalCenter: parent.verticalCenter
-                            }
-                        }
-                    }
-                    onExpandedChanged: Qt.inputMethod.hide();
-                }
-            }
-
-            Column {
-                width: parent.width
-                spacing: units.gu(1)
-
-                ListItems.Header {
-                    text: i18n.tr("Guests")
-                }
-
-                Button{
-                    id: addGuestButton
-                    objectName: "addGuestButton"
-
-                    property var contactsPopup: null
-
-                    text: i18n.tr("Add Guest")
-                    anchors {
-                        left: parent.left
-                        right: parent.right
-                        margins: units.gu(2)
-                    }
-
-                    onClicked: {
-                        if (contactsPopup)
-                            return
-
-                        flickable.makeMeVisible(addGuestButton)
-                        contactsPopup = PopupUtils.open(Qt.resolvedUrl("ContactChoicePopup.qml"), addGuestButton);
-                        contactsPopup.contactSelected.connect( function(contact, emailAddress) {
-                            if(!internal.isContactAlreadyAdded(contact, emailAddress) ) {
-                                var t = internal.contactToAttendee(contact, emailAddress);
-                                contactModel.append({"contact": t});
-                            }
-
-                        });
-                        contactsPopup.Component.onDestruction.connect( function() {
-                            addGuestButton.contactsPopup = null
-                        })
-                    }
-                }
-
-                UbuntuShape {
-                    anchors {
-                        left: parent.left
-                        right: parent.right
-                        margins: units.gu(2)
-                    }
-
-                    height: contactList.height
+            // All day event ListItem with Switch
+            ListItem {
+                width: parent.width
+
+                ListItemLayout {
+                    title.text: i18n.tr("All day event")
+                    Switch {
+                        id: allDayEventCheckbox
+                        checked: false
+                        SlotsLayout.position: SlotsLayout.Trailing;
+                    }
+                }
+                onClicked: {
+                    Haptics.play()
+                    allDayEventCheckbox.checked = !allDayEventCheckbox.checked
+                }
+
+            }
+
+            // ListItem which holds "Event details" label + TextField + TextArea + TextField
+            ListItem {
+                    height: eventDetailsColumn.height + (eventDetailsColumn.anchors.margins*2)
+
+                Column {
+                    id: eventDetailsColumn
+                    spacing: units.gu(2)
+                    anchors {
+                        left: parent.left
+                        right: parent.right
+                        top: parent.top
+                        margins: units.gu(2)
+                    }
+
+                    Label {
+                        width: parent.width
+                        text: i18n.tr("Event details")
+                        elide: Text.ElideRight
+                    }
+
+                    TextField {
+                        id: titleEdit
+                        objectName: "newEventName"
+
+                        width: parent.width
+                        inputMethodHints: Qt.ImhNoPredictiveText
+                        placeholderText: i18n.tr("Event Name")
+
+                        onFocusChanged: {
+                            if(titleEdit.focus) {
+                                flickable.makeMeVisible(titleEdit);
+                            }
+                        }
+                    }
+
+                    TextArea{
+                        id: messageEdit
+                        objectName: "eventDescriptionInput"
+
+                        width: parent.width
+                        placeholderText: i18n.tr("Description")
+
+                        onFocusChanged: {
+                            if(messageEdit.focus) {
+                                flickable.makeMeVisible(messageEdit);
+                            }
+                        }
+                    }
+
+                    TextField {
+                        id: locationEdit
+                        objectName: "eventLocationInput"
+
+                        width: parent.width
+                        inputMethodHints: Qt.ImhNoPredictiveText
+                        placeholderText: i18n.tr("Location")
+
+                        onFocusChanged: {
+                            if(locationEdit.focus) {
+                                flickable.makeMeVisible(locationEdit);
+                            }
+                        }
+                    }
+                }
+            }
+
+            // ListItem to hold calendars selector
+            ListItem {
+                height: chooseCalendarColumn.height + (eventDetailsColumn.anchors.topMargin*2)
+
+                Column {
+                    id: chooseCalendarColumn
+                    spacing: units.gu(2)
+                    anchors {
+                        left: parent.left
+                        right: parent.right
+                        top: parent.top
+                        topMargin: units.gu(2)
+                    }
+
+                    Label {
+                        width: parent.width
+                        anchors {
+                            left: parent.left
+                            leftMargin: units.gu(2)
+                            right: parent.right
+                            rightMargin: units.gu(2)
+                        }
+                        text: i18n.tr("Choose calendar")
+                        elide: Text.ElideRight
+                    }
+
+                    ListItems.ItemSelector {
+                        id: calendarsOption
+                        model: root.model.getWritableCollections();
+                        delegate: OptionSelectorDelegate { text: modelData.name }
+                    }
+
+                }
+            }
+
+
+            ListItem {
+                height: guestsColumn.height + (guestsColumn.anchors.margins*2)
+
+                Column {
+                    id: guestsColumn
+                    spacing: units.gu(2)
+                    anchors {
+                        left: parent.left
+                        right: parent.right
+                        top: parent.top
+                        margins: units.gu(2)
+                    }
+
+                    Label {
+                        width: parent.width
+                        text: i18n.tr("Guests")
+                        elide: Text.ElideRight
+                    }
+
+                    Button{
+                        id: addGuestButton
+                        objectName: "addGuestButton"
+
+                        property var contactsPopup: null
+
+                        text: i18n.tr("Add Guest")
+                        anchors { left: parent.left; right: parent.right }
+
+                        onClicked: {
+                            if (contactsPopup)
+                                return
+
+                            flickable.makeMeVisible(addGuestButton)
+                            contactsPopup = PopupUtils.open(Qt.resolvedUrl("ContactChoicePopup.qml"), addGuestButton);
+                            contactsPopup.contactSelected.connect( function(contact, emailAddress) {
+                                if(!internal.isContactAlreadyAdded(contact, emailAddress) ) {
+                                    var t = internal.contactToAttendee(contact, emailAddress);
+                                    contactModel.append({"contact": t});
+                                }
+
+                            });
+                            contactsPopup.Component.onDestruction.connect( function() {
+                                addGuestButton.contactsPopup = null
+                            })
+                        }
+                    }
+
 
                     Column{
                         id: contactList
                         objectName: "guestList"
 
-                        spacing: units.gu(1)
-                        width: parent.width
+                        anchors {
+                            left: parent.left;
+                            leftMargin: units.gu(-2);
+                            right: parent.right;
+                            rightMargin: units.gu(-2);
+
+                        }
                         clip: true
 
                         ListModel{
@@ -650,7 +661,11 @@
                             delegate: ListItem {
                                 objectName: "eventGuest%1".arg(index)
 
+                                height: guestListItemLayout.height
+                                divider.visible: false
+
                                 ListItemLayout {
+                                    id: guestListItemLayout
                                     title.text: contact.name
                                     subtitle.text: contact.emailAddress
                                 }
@@ -666,27 +681,28 @@
                             }
                         }
                     }
-                }
-
-                ListItems.ThinDivider {
-                    visible: (event != undefined) && (event.itemType === Type.Event)
-                }
-
+
+                    //TODO//
+                    /////////////////
+
+                }
             }
 
-            ListItems.Subtitled{
+
+            ListItem {
                 id:thisHappens
                 objectName :"thisHappens"
 
-                anchors {
-                    left: parent.left
+                height: thisHappensLayout.height
+
+                ListItemLayout {
+                    id: thisHappensLayout
+                    title.text: i18n.tr("Repeats")
+                    summary.text: (event != undefined) && (event.itemType === Type.Event) ? rule === null ? i18n.tr(Defines.recurrenceLabel[0])
+                                                                                                          : eventUtils.getRecurrenceString(rule)
+                                                                                            : ""
+                    ProgressionSlot {}
                 }
-
-                showDivider: false
-                progression: true
-                visible: (event != undefined) && (event.itemType === Type.Event)
-                text: i18n.tr("Repeats")
-                subText: (event != undefined) && (event.itemType === Type.Event) ? rule === null ? Defines.recurrenceLabel[0] : eventUtils.getRecurrenceString(rule) : ""
                 onClicked: {
                     var stack = pageStack
                     if (!stack)
@@ -696,41 +712,23 @@
                 }
             }
 
-            ListItems.ThinDivider {
-                visible: (event != undefined) && (event.itemType === Type.Event)
-            }
 
-            ListItems.Subtitled{
+            ListItem {
                 id:eventReminder
                 objectName  : "eventReminder"
 
-                anchors.left:parent.left
-                showDivider: false
-                progression: true
-                text: i18n.tr("Reminder")
-
-                RemindersModel {
-                    id: reminderModel
-                }
-
-                subText:{
-                    if(visualReminder.secondsBeforeStart !== -1) {
-                        for( var i=0; i<reminderModel.count; i++ ) {
-                            if(visualReminder.secondsBeforeStart === reminderModel.get(i).value) {
-                                return reminderModel.get(i).label
-                            }
-                        }
-                    } else {
-                        return reminderModel.get(0).label
-                    }
-
-                }
-
-                onClicked:{
+                height: eventReminderLayout.height
+
+                ListItemLayout {
+                    id: eventReminderLayout
+                    title.text: i18n.tr("Reminder")
+                    subtitle.text: i18n.tr("%1").arg(reminderModel.getSelectedReminder())
+                    ProgressionSlot {}
+                }
+
+                onClicked: {
                     var stack = pageStack
-                    if (!stack)
-                        stack = bottomEdgePageStack
-
+                    if (!stack) stack = bottomEdgePageStack
                     stack.push(Qt.resolvedUrl("EventReminder.qml"),
                                               {"visualReminder": visualReminder,
                                                "audibleReminder": audibleReminder,
@@ -739,8 +737,15 @@
                 }
             }
 
-            ListItems.ThinDivider {}
         }
+
+
+    }
+
+    // Scrollbar
+    Scrollbar{
+        flickableItem: flickable
+        align: Qt.AlignTrailing
     }
 
     // used to keep the field visible when the keyboard appear or dismiss
 
=== removed file 'NewEventEntryField.qml'
--- NewEventEntryField.qml	2016-01-29 14:47:31 +0000
+++ NewEventEntryField.qml	1970-01-01 00:00:00 +0000
@@ -1,38 +0,0 @@
-/*
- * Copyright (C) 2013-2014 Canonical Ltd
- *
- * This file is part of Ubuntu Calendar App
- *
- * Ubuntu Calendar App is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License version 3 as
- * published by the Free Software Foundation.
- *
- * Ubuntu Calendar App is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-import QtQuick 2.4
-import Ubuntu.Components 1.3
-
-Label {
-    id: root
-
-    property bool highlighted: false
-
-    height: units.gu(6)
-
-    verticalAlignment: Text.AlignVCenter
-    color: highlighted ? "#2C001E" : Theme.palette.normal.baseText
-
-    Rectangle {
-        z: -1
-        anchors.fill: parent
-        color: root.highlighted ? Theme.palette.selected.background
-                                : "Transparent"
-    }
-}
 
=== modified file 'NewEventTimePicker.qml'
--- NewEventTimePicker.qml	2016-01-25 17:52:33 +0000
+++ NewEventTimePicker.qml	2016-03-15 21:24:54 +0000
@@ -1,75 +1,111 @@
 import QtQuick 2.4
-import Ubuntu.Components.ListItems 1.0 as ListItem
+import Ubuntu.Components 1.3
 import Ubuntu.Components.Themes.Ambiance 1.0
-import Ubuntu.Components.Pickers 1.0
+import Ubuntu.Components.Pickers 1.3
+//import QtQuick.Layouts 1.1
 
-Column {
+ListItem {
     id: dateTimeInput
-    property alias header: listHeader.text
-
-    property date dateTime;
-    property bool showTimePicker;
+
+    property string headerText //header label ("From" or "To")
+    property date dateTime //keep date from DatePicker
+    property bool showTimePicker //if true then user is able to set time on event
+
+    // when new date set in DatePicker then this will be run.
+    onDateTimeChanged: {
+        layout.summary.text = dateTime.toLocaleDateString() // set date
+        secondLabel.text = Qt.formatTime(dateTime, "hh:mm AP").replace(/\./g, "") // set time
+    }
 
     function clearFocus() {
-        dateInput.focus = false;
-        timeInput.focus = false;
+        dateBG.focus = false;
+        timeBG.focus = false;
     }
 
+    // function to open date/time picker
     function openDatePicker (element, caller, callerProperty, mode) {
         element.highlighted = true;
         var picker = PickerPanel.openDatePicker(caller, callerProperty, mode);
         if (!picker) return;
-        picker.closed.connect(function () {
-            element.highlighted = false;
-        });
-    }
-
-    onDateTimeChanged: {
-        dateInput.text = dateTime.toLocaleDateString();
-        timeInput.text = Qt.formatTime(dateTime);
-    }
-
-    ListItem.Header {
-        id: listHeader
-    }
-
-    Item {
-        anchors {
-            left: parent.left
-            right: parent.right
-            margins: units.gu(2)
-        }
-
-        height: dateInput.height
-
-        NewEventEntryField{
-            id: dateInput
-            objectName: "dateInput"
-
-            text: ""
-            anchors.left: parent.left
-            width: !showTimePicker ? parent.width : 4 * parent.width / 5
-
-            MouseArea{
-                anchors.fill: parent
-                onClicked: openDatePicker(dateInput, dateTimeInput, "dateTime", "Years|Months|Days")
-            }
-        }
-
-        NewEventEntryField{
-            id: timeInput
-            objectName: "timeInput"
-
-            text: ""
-            anchors.right: parent.right
-            width: parent.width / 5
+        picker.closed.connect(function () { element.highlighted = false; });
+    }
+
+    height: layout.height + divider.height
+
+    // backgroud color of full date fabel, to be shown when user click on date and DatePicker is visable
+    Rectangle {
+        id: dateBG
+
+        property bool highlighted: false
+
+        height: layout.summary.height + units.gu(3.5)
+        width: showTimePicker ? layout.title.width + units.gu(3) : layout.width
+        anchors.bottom: parent.bottom
+        color: highlighted ? UbuntuColors.lightGrey : "transparent"
+
+        Behavior on color { ColorAnimation {} }
+    }
+
+    // backgroud color of time label, to be shown when user click on date and DatePicker is visable
+    Rectangle {
+        id: timeBG
+
+        property bool highlighted: false
+
+        height: dateBG.height
+        width: slot.width + units.gu(4)
+        anchors.bottom: parent.bottom
+        anchors.right: parent.right
+        color: highlighted ? UbuntuColors.lightGrey : "transparent"
+
+        Behavior on color { ColorAnimation {} }
+    }
+
+    // ListItemLayout to keep full date label and time label
+    ListItemLayout {
+        id: layout
+
+        title.text: headerText
+        title.color: Theme.palette.selected.overlayText
+        title.font.pixelSize: FontUtils.sizeToPixels("small")
+        subtitle.text: " "
+        summary.color: dateBG.highlighted ? "white" : Theme.palette.selected.fieldText
+        summary.font.pixelSize: FontUtils.sizeToPixels("medium")
+
+        Behavior on summary.color { ColorAnimation {} }
+
+        // Item to hold Trailing tile label item
+        Item {
+            id: slot
+
+            width: secondLabel.width
+            height: parent.height
             visible: showTimePicker
-            horizontalAlignment: Text.AlignRight
-
-            MouseArea{
-                anchors.fill: parent
-                onClicked: openDatePicker(timeInput, dateTimeInput, "dateTime", "Hours|Minutes")
+            SlotsLayout.overrideVerticalPositioning: true
+
+            // label to keep time [ 10:20 AM ]
+            Label {
+                id: secondLabel
+
+                fontSize: "medium"
+                color: timeBG.highlighted ? "white" : Theme.palette.selected.fieldText
+                y: layout.mainSlot.y + layout.summary.y + layout.summary.baselineOffset - baselineOffset
+                Behavior on color { ColorAnimation {} }
             }
         }
     }
+
+    // AbstractButton to be triggered when user click on full date
+    AbstractButton {
+        anchors.fill: dateBG
+        onClicked: { openDatePicker(dateBG, dateTimeInput, "dateTime", "Years|Months|Days")}
+    }
+
+    // AbstractButton to be triggered when user click on time
+    AbstractButton {
+        anchors.fill: timeBG
+        visible: showTimePicker
+        onClicked: { openDatePicker(timeBG, dateTimeInput, "dateTime", "Hours|Minutes")}
+    }
+
 }
 
=== modified file 'RemindersModel.qml'
--- RemindersModel.qml	2016-03-14 14:30:16 +0000
+++ RemindersModel.qml	2016-03-15 21:24:54 +0000
@@ -40,5 +40,17 @@
         reminderModel.append({ "label": i18n.tr("2 weeks"), "value": 1209600 })
         reminderModel.loaded()
     }
+
+    function getSelectedReminder() {
+        if(visualReminder.secondsBeforeStart !== -1) {
+            for( var i=0; i<reminderModel.count; i++ ) {
+                if(visualReminder.secondsBeforeStart === reminderModel.get(i).value) {
+                    return reminderModel.get(i).label
+                }
+            }
+        } else {
+            return reminderModel.get(0).label
+        }
+    }
 }
 
 
=== modified file 'po/com.ubuntu.calendar.pot'
--- po/com.ubuntu.calendar.pot	2016-03-03 22:32:56 +0000
+++ po/com.ubuntu.calendar.pot	2016-03-15 21:24:54 +0000
@@ -8,7 +8,7 @@
 msgstr ""
 "Project-Id-Version: \n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2016-03-04 04:02+0530\n"
+"POT-Creation-Date: 2016-03-15 12:32+0000\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <[e-mail]>\n"
@@ -18,7 +18,7 @@
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=INTEGER; plural=EXPRESSION;\n"
 
-#: ../AgendaView.qml:50 ../calendar.qml:292 ../calendar.qml:518
+#: ../AgendaView.qml:50 ../calendar.qml:321 ../calendar.qml:547
 msgid "Agenda"
 msgstr ""
 
@@ -57,8 +57,10 @@
 #. where it's shown has limited space
 #: ../AllDayEventComponent.qml:150
 #, qt-format
-msgid "%1 ev."
-msgstr ""
+msgid "%1 event"
+msgid_plural "%1 events"
+msgstr[0] ""
+msgstr[1] ""
 
 #. TRANSLATORS: the argument refers to the number of all day events
 #: ../AllDayEventComponent.qml:154
@@ -68,7 +70,7 @@
 msgstr[0] ""
 msgstr[1] ""
 
-#: ../CalendarChoicePopup.qml:34 ../EventActions.qml:51
+#: ../CalendarChoicePopup.qml:34 ../EventActions.qml:52
 msgid "Calendars"
 msgstr ""
 
@@ -78,11 +80,11 @@
 
 #. TRANSLATORS: Please translate this string  to 15 characters only.
 #. Currently ,there is no way we can increase width of action menu currently.
-#: ../CalendarChoicePopup.qml:48 ../EventActions.qml:36
+#: ../CalendarChoicePopup.qml:48 ../EventActions.qml:37
 msgid "Sync"
 msgstr ""
 
-#: ../CalendarChoicePopup.qml:48 ../EventActions.qml:36
+#: ../CalendarChoicePopup.qml:48 ../EventActions.qml:37
 msgid "Syncing"
 msgstr ""
 
@@ -95,7 +97,7 @@
 msgstr ""
 
 #: ../ColorPickerDialog.qml:55 ../DeleteConfirmationDialog.qml:60
-#: ../EditEventConfirmationDialog.qml:53 ../NewEvent.qml:340
+#: ../EditEventConfirmationDialog.qml:53 ../NewEvent.qml:362
 msgid "Cancel"
 msgstr ""
 
@@ -107,23 +109,17 @@
 msgid "Search contact"
 msgstr ""
 
-#: ../DayView.qml:71 ../MonthView.qml:50 ../WeekView.qml:54 ../YearView.qml:57
+#: ../DayView.qml:72 ../MonthView.qml:50 ../WeekView.qml:55 ../YearView.qml:57
 msgid "Today"
 msgstr ""
 
 #. TRANSLATORS: this is a time formatting string,
 #. see http://qt-project.org/doc/qt-5/qml-qtqml-date.html#details for valid expressions.
 #. It's used in the header of the month and week views
-#: ../DayView.qml:115 ../DayView.qml:203 ../MonthView.qml:78
-#: ../WeekView.qml:137 ../WeekView.qml:256
+#: ../DayView.qml:122 ../MonthView.qml:78 ../WeekView.qml:144
 msgid "MMMM yyyy"
 msgstr ""
 
-#: ../DayView.qml:201 ../MonthView.qml:73 ../WeekView.qml:254
-#, qt-format
-msgid "%1 %2"
-msgstr ""
-
 #: ../DeleteConfirmationDialog.qml:31
 msgid "Delete Recurring Event"
 msgstr ""
@@ -151,11 +147,11 @@
 msgid "Delete this"
 msgstr ""
 
-#: ../DeleteConfirmationDialog.qml:51 ../NewEvent.qml:347
+#: ../DeleteConfirmationDialog.qml:51
 msgid "Delete"
 msgstr ""
 
-#: ../EditEventConfirmationDialog.qml:29 ../NewEvent.qml:335
+#: ../EditEventConfirmationDialog.qml:29
 msgid "Edit Event"
 msgstr ""
 
@@ -173,25 +169,25 @@
 msgid "Edit this"
 msgstr ""
 
-#: ../EventActions.qml:63 ../Settings.qml:29
+#: ../EventActions.qml:64 ../Settings.qml:29
 msgid "Settings"
 msgstr ""
 
 #. TRANSLATORS: the first argument (%1) refers to a start time for an event,
 #. while the second one (%2) refers to the end time
-#: ../EventBubble.qml:97
+#: ../EventBubble.qml:104
 #, qt-format
 msgid "%1 - %2"
 msgstr ""
 
 #. TRANSLATORS: the first argument (%1) refers to a time for an event,
 #. while the second one (%2) refers to title of event
-#: ../EventBubble.qml:108 ../EventBubble.qml:113
+#: ../EventBubble.qml:115 ../EventBubble.qml:120
 #, qt-format
 msgid "%1 <b>%2</b>"
 msgstr ""
 
-#: ../EventDetails.qml:44 ../NewEvent.qml:483
+#: ../EventDetails.qml:44
 msgid "Event Details"
 msgstr ""
 
@@ -235,38 +231,34 @@
 msgid "Edit"
 msgstr ""
 
-#: ../EventDetails.qml:389 ../NewEvent.qml:589
+#: ../EventDetails.qml:389 ../NewEvent.qml:615
 msgid "Guests"
 msgstr ""
 
-#: ../EventDetails.qml:432 ../EventReminder.qml:35 ../NewEvent.qml:701
+#: ../EventDetails.qml:432 ../EventReminder.qml:35 ../NewEvent.qml:754
 msgid "Reminder"
 msgstr ""
 
-#. TRANSLATORS: this refers to how often a recurrent event repeats
-#. and it is shown as the header of the page to choose repetition
-#. and as the header of the list item that shows the repetition
-#. summary in the page that displays the event details
-#: ../EventRepetition.qml:40 ../EventRepetition.qml:155
+#: ../EventRepetition.qml:43 ../EventRepetition.qml:175
 msgid "Repeat"
 msgstr ""
 
-#: ../EventRepetition.qml:174
+#: ../EventRepetition.qml:202
 msgid "Repeats On:"
 msgstr ""
 
-#: ../EventRepetition.qml:219
+#: ../EventRepetition.qml:254
 msgid "Recurring event ends"
 msgstr ""
 
 #. TRANSLATORS: this refers to how often a recurrent event repeats
 #. and it is shown as the header of the option selector to choose
 #. its repetition
-#: ../EventRepetition.qml:242 ../NewEvent.qml:685
+#: ../EventRepetition.qml:285 ../NewEvent.qml:730
 msgid "Repeats"
 msgstr ""
 
-#: ../EventRepetition.qml:267
+#: ../EventRepetition.qml:317
 msgid "Date"
 msgstr ""
 
@@ -314,58 +306,74 @@
 msgid "Wk"
 msgstr ""
 
-#: ../NewEvent.qml:171
+#: ../MonthView.qml:73 ../WeekView.qml:131
+#, qt-format
+msgid "%1 %2"
+msgstr ""
+
+#: ../NewEvent.qml:173
 msgid "End time can't be before start time"
 msgstr ""
 
-#: ../NewEvent.qml:335 ../NewEventBottomEdge.qml:52
-msgid "New Event"
-msgstr ""
-
-#: ../NewEvent.qml:364
+#: ../NewEvent.qml:355 ../NewEvent.qml:372
 msgid "Save"
 msgstr ""
 
-#: ../NewEvent.qml:375
+#: ../NewEvent.qml:387
 msgid "Error"
 msgstr ""
 
-#: ../NewEvent.qml:377
+#: ../NewEvent.qml:389
 msgid "OK"
 msgstr ""
 
-#: ../NewEvent.qml:437
+#. TRANSLATORS: this referes to date. eg:  From: Wendsday, 9 March 2016
+#: ../NewEvent.qml:454
 msgid "From"
 msgstr ""
 
-#: ../NewEvent.qml:450
+#. TRANSLATORS: this referes to date. eg:  To: Wendsday, 9 March 2016
+#: ../NewEvent.qml:468
 msgid "To"
 msgstr ""
 
-#: ../NewEvent.qml:467
+#: ../NewEvent.qml:484
 msgid "All day event"
 msgstr ""
 
-#: ../NewEvent.qml:497
+#: ../NewEvent.qml:514
+msgid "Event details"
+msgstr ""
+
+#: ../NewEvent.qml:524
 msgid "Event Name"
 msgstr ""
 
-#: ../NewEvent.qml:515
+#: ../NewEvent.qml:538
 msgid "Description"
 msgstr ""
 
-#: ../NewEvent.qml:534
+#: ../NewEvent.qml:553
 msgid "Location"
 msgstr ""
 
-#: ../NewEvent.qml:549 com.ubuntu.calendar_calendar.desktop.in.in.h:1
-msgid "Calendar"
+#: ../NewEvent.qml:586
+msgid "Choose calendar"
 msgstr ""
 
-#: ../NewEvent.qml:598
+#: ../NewEvent.qml:645
 msgid "Add Guest"
 msgstr ""
 
+#: ../NewEvent.qml:755
+#, qt-format
+msgid "%1"
+msgstr ""
+
+#: ../NewEventBottomEdge.qml:52
+msgid "New Event"
+msgstr ""
+
 #: ../RecurrenceLabelDefines.qml:23
 msgid "Once"
 msgstr ""
@@ -467,7 +475,7 @@
 msgid "All Day"
 msgstr ""
 
-#: ../WeekView.qml:131 ../WeekView.qml:132
+#: ../WeekView.qml:138 ../WeekView.qml:139
 msgid "MMM"
 msgstr ""
 
@@ -476,29 +484,33 @@
 msgid "Year %1"
 msgstr ""
 
-#: ../calendar.qml:46
+#: ../calendar.qml:48
 msgid ""
 "Calendar app accept four arguments: --starttime, --endtime, --newevent and --"
 "eventid. They will be managed by system. See the source for a full comment "
 "about them"
 msgstr ""
 
-#: ../calendar.qml:260 ../calendar.qml:434
+#: ../calendar.qml:289 ../calendar.qml:463
 msgid "Year"
 msgstr ""
 
-#: ../calendar.qml:268 ../calendar.qml:455
+#: ../calendar.qml:297 ../calendar.qml:484
 msgid "Month"
 msgstr ""
 
-#: ../calendar.qml:276 ../calendar.qml:476
+#: ../calendar.qml:305 ../calendar.qml:505
 msgid "Week"
 msgstr ""
 
-#: ../calendar.qml:284 ../calendar.qml:497
+#: ../calendar.qml:313 ../calendar.qml:526
 msgid "Day"
 msgstr ""
 
+#: com.ubuntu.calendar_calendar.desktop.in.in.h:1
+msgid "Calendar"
+msgstr ""
+
 #: com.ubuntu.calendar_calendar.desktop.in.in.h:2
 msgid "A calendar for Ubuntu which syncs with online accounts."
 msgstr ""