如何更改zabuto日历上的日期

Question

对于熟悉 Zabuto 日历的人来说，如果您将今天的日期设置为 true，那么日历将从“今天”的月份开始，并在日期上显示图标。除了在未来的一些问题上我希望能够在选择事件时向弹出窗口添加一个 url 之外，我所做的所有这些都是我需要的。但是这个问题，我希望能够在单独的页面上显示特定的有限月份。例如，今天的日期是 6 月 22 日，但在单独的网页上，我想显示 11 月和 12 月的月份和特定年份，但与今天的日期无关。我不知道从哪里开始，所以除了我在 zabuto 网站上使用的现有代码之外，我没有其他代码可以显示。这是我在 java 脚本中采取的所有路线。

我的 css 中用于颜色的类名“代码”，但这并不重要，因为我只想在单独的页面上使用 2 个月，但从单个 js 文件中访问数据，因为您在下面看到缩短的数据版本

var eventData = [
    {"date":"2018-10-02","badge":false,"title":"private party","body":"private fun
    {"date":"2019-12-25","badge":false,"title":"Christmas Day","body":"Christmas Lunch","footer":"all night","status":"100%","classname":"grad100"},
    {"date":"2019-12-26","badge":false,"title":"Boxing Day","body":"Boxing Day Lunch","footer":"all night","status":"100%","classname":"grad100"},
    {"date":"2019-12-31","badge":false,"title":"New Years Eve","body":"Bringing in the New Year of 2020","footer":"all night","status":"75%","classname":"grad75"}
];

$(document).ready(function() {

    $("#my-calendar").zabuto_calendar({
      action: function(event) {
        console.log(event)
        return myDateFunction(this.id, false);
      },
      action_nav: function() {
        return myNavFunction(this.id);
      },
      data: eventData,
      modal: true,

      /* The legend 

              legend: [
                  {type: "text", label: "Special event", badge: "00"},
                  {type: "block", label: "Regular event"}
              ]

      */
    });
    $("#date-popover").click(function() {
      $("#date-popover").hide();

    });

    function myDateFunction(id, fromModal) {

      console.log({
        id
      })
      if (fromModal) {
        $("#" + id + "_modal").modal("hide");
      }
      var date = $("#" + id).data("date");
      var eventItem = eventData.find(function(item) {
        return item.date === date;
      })
      if (!eventItem && !eventItem) {
        return false;
      }
      $("#date-popover .popover-content").text(eventItem.date+" which is a "+eventItem.title+"\n This is a "+eventItem.body+"\n we are currently "+eventItem.status+".")
      $("#date-popover").show();
    }

    function myNavFunction(id) {

      $("#date-popover").hide();
      var nav = $("#" + id).data("navigation");
      var to = $("#" + id).data("to");
    }

  });

Answer 1

正确的方法是在初始化日历时使用选项month。

Zabuto Calendar 的开发人员没有记录这一点，这有点奇怪，但这很好用。您只需覆盖库中的默认值，如下所示：

$('#my-calendar').zabuto_calendar({
  language: "en",
  data: eventData,
  month  : 7, // Put the number of the month you want to start with
  action: function() { myDateFunction(this.id); }
});

Answer 2

好的，但我必须编写一个新的 js，并进行一些更改以更改今天、月份和其他一些内容

Answer 3

我什至可以设置一个特定的年份！

$('#my-calendar').zabuto_calendar({
  language: "en",
  data: eventData,
  year: 2018, // <-- here :)
  month: 7, // Put the number of the month you want to start with
  ...
});

Answer 4

有谁知道我将如何在数据中添加一个 url，这样当我有一个偶数时，它会提供一个点击链接的选项吗？

我假设它在这里的某个地方需要更改 函数 myDateFunction(id, fromModal) {

  console.log({
    id
  })
  if (fromModal) {
    $("#" + id + "_modal").modal("hide");
  }
  var date = $("#" + id).data("date");
  var eventItem = eventData.find(function(item) {
    return item.date === date;
  })
  if (!eventItem && !eventItem) {
    return false;
  }
  $("#date-popover .popover-content").text(eventItem.date+" which is a "+eventItem.title+"\n This is a "+eventItem.body+"\n we are currently "+eventItem.status+".")
  $("#date-popover").show();
}