javascript - 添加 onClick 事件到 zabuto 日历

Question

我在我的项目中实现了 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"}
            ]
        });

但这行不通。我该如何解决？

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/

(尝试双击 day wrappers，简单点击事件)

现在:

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

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

仔细查看代码...实际上比 fiddle 表演要多得多:

我认为您应该非常轻松地添加一个公共(public)方法来更改单元格的颜色。

干杯

往复