Question

对于那些熟悉Zabuto日历的人，如果将当日的日期变量设为true，则日历从“今天”的月份开始，并在日期上显示图标。除了我希望在将来的某个问题上提出的所有问题外，我还希望能够在选择事件时向弹出式窗口添加网址。但是，这个问题，我希望能够在单独的页面上显示特定的有限月份。例如，今天的日期是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

正确的方法是在初始化日历时使用选项this.getTasks().subscribe((tasks) => { const emptyTasks = Array(5).fill({id: 'empty'}); this.tasks = tasks.map((t, index) => t || emptyTasks[index]); })。

Zabuto Calendar的开发人员没有对此进行记录，这有点奇怪，但是效果很好。您只需按如下所示覆盖库中的默认值：

month

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
  ...
});

如何更改zabuto日历上的日期

3 个答案: