Example Reminders

You can Try it Online!

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
id: page
    background: Rectangle { color: "black" }
    property var tick: Date.now()
    palette {
        text: "white"
    }
        RowLayout {
            anchors.fill: parent
            Frame {
                Layout.fillWidth: true
                Layout.preferredWidth: 100
                Layout.fillHeight: true
                visible: edit.checked
                TextArea {
                    id: appointmentsText
                    text: `9:00 work
10:00 meeting
11:00 available
4:30 doctors
5:00 home`
                    onTextChanged: Qt.callLater(page.update)
                }
            }
            Frame {
                Layout.fillWidth: true
                Layout.preferredWidth: 300
                Layout.fillHeight: true
                ListView {
                    anchors.fill: parent
                    model: appointments
                    delegate: MyDelegate { }
                    Button {
                        id: edit
                        anchors.right: parent.right
                        anchors.bottom: parent.bottom
                        anchors.margins: 10
                        checkable: true
                        checked: false
                        hoverEnabled: true
                        icon.source: "https://raw.githubusercontent.com/Esri/calcite-ui-icons/master/icons/pencil-32.svg"
                        icon.width: 32
                        icon.height: 32
                        icon.color: "white"
                        opacity: hovered ? 1.0 : 0.5
                        background: Item { }
                    }
                }
            }
    }
    Timer {
        id: heartBeat
        repeat: true
        interval: 1000
        running: true
        onTriggered: tick = Date.now()
    }
    ListModel {
        id: appointments
        function loadFromString(text) {
            let l = [ ];
            for (let t of text.split(/\n/)) {
                let r = t.match(/(\d+):(\d+)\s+(.*)/);
                if (!r) continue;
                let d = new Date();
                let h = parseInt(r[1]);
                let m = parseInt(r[2]);
                if (h < 6) { h = h + 12; }
                d.setHours(h,m,0,0);
                let s = d.getTime();
                l.push({t,s});
            }
            clear();
            let n = new Date();
            n.setHours(24,0,0,0);
            for (let i = 0; i < l.length; i++) {
                let e = i + 1 < l.length ? l[i+1].s : n.getTime();
                append({t:l[i].t, s:l[i].s, e});
            }
        }
    }
    function update() {
        appointments.loadFromString(appointmentsText.text);
    }
    Component.onCompleted: Qt.callLater(update)
}

// MyDelegate.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Frame {
    width: ListView.view.width
    property bool finished: tick > e
    property bool meeting: tick > s && tick < e
    property color c: finished && "#f00"
    || meeting && "#0f0"
    || "#fa0"
    background: Item {
        Rectangle {
            anchors.fill: parent
            border.color: "yellow"
            radius: 10
            color: "transparent"
            visible: meeting
        }
    }
    RowLayout {
        width: parent.width
        Text {
            Layout.fillWidth: true
            text: t
            color: c
            font.pointSize: meeting ? 18 : 14
        }
        Text {
            text: getMessage(s - tick, e - tick)
            color: c
        }
    }
    function getTimeString(ms) {
        let prefix = "";
        if (ms < 0) {
            prefix = "-";
            ms = -ms;
        }
        let s = Math.floor(ms/1000);
        let m = Math.floor(s / 60);
        s = s % 60;
        let h = Math.floor(m / 60);
        m = m % 60;
        m = ('' + m).padStart(2, '0');
        s = ('' + s).padStart(2, '0');
        return `${prefix}${h}:${m}:${s}`;
    }
    function getMessage(ds, de) {
        if (de < 0) return qsTr("Finished: %1".arg(getTimeString(-de)));
        if (ds < 0) return qsTr("Remaining: %1".arg(getTimeString(de)));
        return qsTr("Starting: %1".arg(getTimeString(ds)));
    }
}