如何更改zabuto日历上的日期

Posted 2023-03-30

【中文标题】如何更改zabuto日历上的日期

【英文标题】：how to change the date on zabuto calendar

【发布时间】：2019-06-22 12:40:57

【问题描述】：

对于熟悉 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");
    

  );

【参考方案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); 
);

【参考方案2】：

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

【讨论】：

想完成您的回答吗？

哇，那是将近一年前的事了，我想我已经回答过了。我制作了原始 JS 文件的副本，然后我更改了今天的日期以将其删除，然后添加了 11 月的开始月份，并且只允许它持续一个月。这样它仍然使用主日历中所有功能和信息的原始数据，所以现在我有两个 zabuto JS 文件，但是一个 js 数据文件。去年我需要完成它，但似乎没有人愿意提供帮助或知道。

【参考方案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
  ...
);

【参考方案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();