将日期字符串添加到 qml 日历

Question

调整后更新

因此，在根据建议修改我的代码并处理图像的可见性并将日期推送到数组后，我仍然没有看到单独标记的日期，我的新代码是：

    property var arrayFromFirebase: []

onFirebaseReady: {
          firebaseDb.getUserValue("dates", {
                                      orderByChild: true
                        }, function(success, key, value) {
                                  if(success) {
                                      console.log(JSON.stringify(value))
                                for( date in value){arrayFromFirebase.push(date.date)}
                                      }
                              })
      }

Image {
       visible: arrayFromFirebase.indexOf(styleData.date.getDate()) > -1
       }

我的日志仍然以以下格式读取 arrayFromFirebase：

[{"date":"2018-10-01T21:17:00.926"},{"date":"2018-10-02T12:00:00.000"},{"date":"2018-10-03T12:00:00.000"},{"date":"2018-10-06T12:00:00.000"},{"date":"2018-10-07T12:00:00.000"},{"date":"2018-10-08T12:00:00.000"}]

原始问题

我有一个日历，我的用户保存了存储在 firebase 中的选定日期，我的日历是使用 link

中的示例构建的

QtQuick Calendar

我的用户日期存储在 firebase 中，当我阅读它们时，我可以使用 JSON.stringify、

在日志中接收它们

将保存的日期写入我的数据库时，我使用以下代码：

    property var userData: {      
  "selectedDates": [         
        { },
      ]
}

  AppButton {
      id: saveButton
      text: "Save & Request"
      anchors.right: parent.right
      textColor: "#4e4e4e"
      backgroundColor: "#d1d1d1"
      onClicked: {
        userData.selectedDates.push({ "date": calendar.selectedDate});
        console.log(JSON.stringify(userData));
        firebaseDb.setUserValue("dates", userData.selectedDates)
      }
  }

然后在读取日期时我使用以下内容：

  FirebaseDatabase {
      config: customConfig
      onFirebaseReady: {
          firebaseDb.getUserValue("dates", {
                                      startAt: {
                                          Key: "1/date",
                                      }
                        }, function(success, key, value) {
                                  if(success) {
                                      console.log(JSON.stringify(value))
                                      }
                              })
      }
  }

阅读后，日志会显示如下日期：

[{"date":"2018-10-01T21:17:00.926"},{"date":"2018-10-02T12:00:00.000"},{"date":"2018-10-03T12:00:00.000"},{"date":"2018-10-06T12:00:00.000"},{"date":"2018-10-07T12:00:00.000"},{"date":"2018-10-08T12:00:00.000"}]

我想使用这串日期并在我的日历中添加标记以显示它们已被预订？

我该怎么做？

记录了类型 FirebaseDatabase here

日历 QML 代码

CalendarQMLCode

Answer 1

更新（@derM 评论后）

无需使用sqlite DB模型

就在 dayDelegate 我们玩 事件指示器图像 visibility

为此，从 firebase 获取数据后，将其保存到一个数组（我们将其命名为 arrayFromFireBase）并检查 styleData.date 是否在该数组中

FirebaseDatabase {
  config: customConfig
  onFirebaseReady: {
      firebaseDb.getUserValue("dates", {
                                  startAt: {
                                      Key: "1/date",
                                  }
                    }, function(success, key, value) {
                              if(success) {
                                  console.log(JSON.stringify(value))
                                  // value here is JSON ARRAY
                                  // value =[{"date":"2018-10-01T21:17:00.926"},{"date":"2018-10-02T12:00:00.000"}]
                                  // so value[0].date ="2018-10-01T21:17:00.926"
                                  //then you gonna insert here your dates in arrayFromFireBase as strings as follow
                                  for(i=0 ; i < arrayFromFireBase.length-1 ; i++) 
                                    arrayFromFireBase.push(new Date(value[i].date).getTime())
                                  }
                          })
  }
}
Calendar {
    ...
    style: CalendarStyle {
        dayDelegate: Item {
            ...
            Image {
                // HERE WE MUST COMPARE TIME (we used Date.getTime()) FROM FIREBASE with the calendar's date converted to time also 
                visible: arrayFromFireBase.indexOf(styleData.date.getTime()) > -1
                ...
                source: "qrc:/images/eventindicator.png"
            }
        }
    }
}

旧答案

部分代码取自 Qt Quick Controls - Calendar Example

刚刚添加void SqlEventModel::insertDates(QStringList dates)

C++部分

SqlEventModel::SqlEventModel()
{
 createConnection();
}

void SqlEventModel::createConnection()
{
 QSqlDatabase db = QSqlDatabase::addDatabase("QSQLITE");
 db.setDatabaseName(":memory:");
 if (!db.open()) {
     qFatal("Cannot open database");
     return;
 }
}
void SqlEventModel::insertDates(QStringList dates){
 QSqlQuery query;
 // We store the time as seconds because it's easier to query.
 // It depends on what you want as columns for your events
 query.exec("create table Event (name TEXT, startDate DATE, startTime INT, 
  endDate DATE, endTime INT)");
 foreach(QString date in dates){

  // It depends on what you want as columns for your events
  query.exec(QString("insert into Event values('%1', '%2', 
  %3, '%4', %5)").arg(date[0]).arg(date[1]).arg(date[2]).arg(date[3]).arg(date[4]));
 }
 return;
}

QML部分

SqlEventModel {
 id: eventModel
}

FirebaseDatabase {
  config: customConfig
  onFirebaseReady: {
      firebaseDb.getUserValue("dates", {
                                  startAt: {
                                      Key: "1/date",
                                  }
                    }, function(success, key, value) {
                              if(success) {
                                  console.log(JSON.stringify(value))
                                  //Insert here your dates in sql model
                                  eventModel.insertDates(value)
                                  }
                          })
  }
}

Answer 2

所以，在开发假期之后，我有了一个可行的解决方案！所以请看下面（不包括所有多余的代码）并感谢大家的帮助！！（特别是@Redanium，请耐心等待）

Main.qml:
App {

    property var arrayFromFireBase: []

 onLoggedIn:  {
      firebaseDb.getUserValue("dates/selectedDates", {},
                                    function(success, key, value) {
                                    if(success) {
                                         for(var idx in value)
                                            arrayFromFireBase.push(new Date(value[idx].date).getTime())
                                    })}}

然后在我的日历页面上显示以下内容：

CalendarPage.qml:

Page {
AppButton {
          id: saveButton
          text: "Save & Request"
              onClicked: {
                  userData.selectedDates.push({"date": calendar.selectedDate});
                  console.log(JSON.stringify(userData));
                  firebaseDb.setUserValue("dates", userData)
                  }
           }

property var userData: { 
            "selectedDates": [{}]
           }

Image {
       visible: arrayFromFireBase.indexOf(styleData.date.getTime()) > -1
      }
}

将日期字符串添加到 qml 日历

Add string of dates to qml calendar

calendar

qml

firebase

qtquick2

firebase-realtime-database