无法在初始化时触发日历中的clickDay事件

时间:2017-06-20 10:38:11

标签: javascript jquery twitter-bootstrap calendar

我正在尝试在calendarat初始化中触发clickDay事件,但是它不起作用但是如果我使用jQuery经典方法来绑定日历事件上的方法,它的工作方式也一样!

注意:我已经评论了jQuery经典方法来绑定

使用的插件:http://www.bootstrap-year-calendar.com/#Documentation/Events

这是代码

$(function() {
    var currentYear = new Date().getFullYear();
var datas =  [
            {
                id: 0,
                name: 'Google I/O',
                location: 'San Francisco, CA',
                startDate: new Date(currentYear, 4, 28),
                endDate: new Date(currentYear, 4, 28),
                color: '#767676'
            },
            {
                id: 1,
                name: 'Microsoft Convergence',
                location: 'New Orleans, LA',
                startDate: new Date(currentYear, 2, 16),
                endDate: new Date(currentYear, 2, 16),
                color: '#676767'
            }
        ]
    $('#calendar').calendar({ 
         clickDay: function(e) {
             alert("sdtgfyh");
             var yclick=e.date.getFullYear();
             //console.log($(e.element).hasClass("day-start"));
             console.log(yclick);
         },
        enableContextMenu: true,
        style: "background",
        contextMenuItems:[
            {
                text: 'Mark',
                click: editMark
            },
            {
                text: 'Un Mark',
                click: deleteMark
            }
        ],

        selectRange: function(e) {
            editMark({ startDate: e.startDate, endDate: e.endDate });
        },
        mouseOnDay: function(e) {
            if(e.events.length > 0) {
                var content = '';

                $(e.element).popover({ 
                    trigger: 'manual',
                    container: 'body',
                    html:true,
                    content: content
                });

                //$(e.element).popover('show');
            }
        },
        mouseOutDay: function(e) {
            if(e.events.length > 0) {
                $(e.element).popover('hide');
            }
        },
        dayContextMenu: function(e) {
            $(e.element).popover('hide');
        },
        dataSource:datas,
        enableRangeSelection:(datas[0].color)



    });

    $('#save-event').click(function() {
        saveMark();
    });

    /* $('#calendar').clickDay(function(e){ 
    console.log($(e.element).hasClass("day-start"));
     var dayStartVal = $(e.element).hasClass("day-start");
        if(dayStartVal){
            $('#event-modal').modal("hide");
        }    
     });*/


});

1 个答案:

答案 0 :(得分:0)

我尝试在Fiddle上运行你的代码。

似乎为我工作

您的代码的精简版本托管在here

即使在呈现日历之前,您的日历也可能存在绑定事件的问题。因为你似乎使用自我调用方法。我不确定在您的html是否使用您的日历ID标记呈现之前是否已被触发。

检查的一种方法是

Add a timeout on top of your function call like 

setTimeout(function(){
  // your calendar init code here
}, 2000); // Some delay to sure html is rendered with the calendar selector element.

并检查是否是问题。这段代码对我来说似乎很好。