将 onClick 事件添加到 zabuto 日历答案

【问题标题】：Adding onClick events to zabuto calendar将 onClick 事件添加到 zabuto 日历
【发布时间】：2015-04-14 19:32:06
【问题描述】：

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

$(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"}
            ]
        });

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

【问题讨论】：

Wat....myDateFunction 中触发更改颜色的代码在哪里？我们如何在没有看到 HTML 标记的情况下知道我们需要定位的元素是什么？你能创建一个 jsFiddle 吗？
道歉......这将是更改颜色的代码行：document.getElementById("#" + id).style.color = "blue";

标签： javascript jquery calendar

【解决方案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日历中包含的模态，我已将其删除）
显示一天中的事件列表
...

这只是几个小时的工作，有很多功能要添加，还有很多事情要做以使其稳定，但它是可用的。 ;-)

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

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

干杯

从

【讨论】：

【解决方案2】：

通过这个http://zabuto.com/dev/calendar/examples/action.html。它包含你的答案。

【讨论】：