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

【问题标题】：Add string of dates to qml calendar将日期字符串添加到 qml 日历
【发布时间】：2018-10-04 15:03:11
【问题描述】：

调整后更新

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

    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 中的选定日期，我的日历是用链接中的示例构建的

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

【问题讨论】：

为了改进您的问题，请提供一些代码。我不知道firebase，但我可能会帮助你处理QML。对我来说，知道你以哪种形式从火力库中读取数据会很有帮助——你如何在 QML 中拥有它。该代码还应显示您尝试解决此问题的一些尝试。
@derM 您好，感谢您的快速回复！我已经更新了原始帖子，包括我如何读取/写入我的 firebase 数据库的代码，这是否让您更好地了解我需要做什么？再次感谢！
您应该格式化从数据库收到的日期。然后你要么应该将字符串转换为date 类型。（来自 Qt 文档：要创建日期值，请将其指定为“YYYY-MM-DD”字符串）或使用 Javascript Date.parse() 解析字符串
嗨@folibis 不幸的是，这是我苦苦挣扎的地方，把我的日期字符串格式化然后使用！抱歉，如果我的问题并不完全清楚，因为我试图做到这一点，即使在阅读文档并尝试几种变体时，它也会将我从 firebase 和格式中读取的“价值”添加到我的日历中！
我根本不了解 Firebase，但我使用过很多不同的数据库，而且它们都可以选择格式化输出。在使用不允许这样做的工具之前，我会三思而后行。

标签： firebase firebase-realtime-database calendar qml qtquick2

【解决方案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)
                                  }
                          })
  }
}

【讨论】：

所以您提议，将您从数据库收到的内容放入 SQLITE 数据库中只是为了提供模型？是不是有点矫枉过正？
你是对的，我们可以在没有 sqlite DB 的情况下做到这一点。我的回答是基于他使用 [Qt Quick Controls - Calendar Example ](doc.qt.io/qt-5/qtquickcontrols-calendar-example.html)
@derM - 我之前尝试过使用可见性，但作为属性布尔而不是数组！实施您的建议后，我仍然没有在保存的日子里查看标记？自从您的 cmets 以来，我已经用我的新代码更新了我的原始问题！也非常感谢您的帮助！
你还是不懂！！！如果日历的单元格日期在 arrayFromFireBase 中，则此 arrayFromFireBase.indexOf(styleData.date) > -1 的计算结果为 bool true，否则为 bool false。
嗨@Redanium我知道如果单元格日期匹配数组是真/假，但是我的arrayFromFirebase.push(JSON.stringify(value))代码将数据放入数组中并且property var arrayFromFirebase: []不正确，因为它不管用？很抱歉让大家失望了！

【解决方案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
      }
}

【讨论】：