Question

我在我的项目中实施了zabuto日历。这是屏幕截图：
calendar 。
我希望点击时更改日期单元格的颜色。这是我的代码的一部分：

$(document).ready(function () {
                $("#my-calendar").zabuto_calendar({
                    cell_border: true,
                    today: false,
                    show_days: true,
                    weekstartson: 0,
                    nav_icon: {
                        prev: '<i class="fa fa-chevron-circle-left"></i>',
                        next: '<i class="fa fa-chevron-circle-right"></i>'
                    }
                });
            });

这是onClick代码。

myDateFunction(this.id);
function myDateFunction(id) {
  var date = $("#" + id).data("date");
  document.getElementById("#" + id).style.color = "blue";
}
 $("#my-calendar").zabuto_calendar({
            action: function () {
                return myDateFunction(this.id, false);
            },
legend: [
                {type: "text", label: "Special event", badge: "00"},
                {type: "block", label: "Regular event"}
            ]
        });

但这不起作用。我该如何解决？

Answer 1

旧帖子，但我制作了自定义的Zabuto日历。

它没有经过测试，很多功能都没有了，但你应该看一眼：

  $("#my-calendar").zabuto_calendar({
    language: "fr",
    year: 2015,
    month: 1,
    show_previous: 1,
    show_next: 2,
    // show_reminder: true,
    // show_today: false,
    // show_days: true,
    // weekstartson: 0,
    // nav_icon: {
    //   prev: '<i class="fa fa-chevron-circle-left"></i>',
    //   next: '<i class="fa fa-chevron-circle-right"></i>'
    // },
    callbacks: {
      on_cell_double_clicked: function() {
        return cellDoubleClicked(this);
      },
      on_cell_clicked: function() {
        return cellClicked(this);
      },
      on_nav_clicked: function() {
        return navClicked(this);
      },
      on_event_clicked: function() {
        return eventClicked(this);
      }
    },
    events: {
      local: events_array,
      ajax: {
        url: "" // load ajax json events here...
      }
    },
    legend: [
      {label: "Rendez-vous", type: "appointment"},
      {label: "Evenement A", type: "eventtype2"},
      {label: "Evenement B", type: "eventtype3"},
      {label: "<span class='fa fa-bell-o'></span> Rappel", type: "reminder"}
    ]
  });

http://jsfiddle.net/n2gkm4d9/

（尝试在日包装器中双击，只需单击事件）

现在：

使用本地json + ajax数据的初始日历
调用公共方法（例如，一次只添加一个事件）
通过模态添加事件（不是zabuto日历中包含的模式，我已将其删除）
显示一天的事件列表
...

只需几个小时的工作，就可以添加许多功能以及要使其稳定但可以使用的事情。 ; - ）

仔细查看代码......实际上不仅仅是小提示：

我认为你应该很容易添加一个公共方法来改变单元格的颜色。

干杯

FRO

Answer 2

完成此http://zabuto.com/dev/calendar/examples/action.html。它包含你的答案。

将onClick事件添加到zabuto日历

2 个答案: