将onClick事件添加到zabuto日历

qwertymaster 发表于 Dev

qwertymaster

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

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

fro_oo

旧帖子，但我制作了自定义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"}
    ]
  });