Question

我已经构建了一些jquery插件来了解它。它到目前为止工作但我已经在一些测试日期之前建立了我的插件，现在我尝试用外面的日期打开我的插件。

这是我的工作： jsfiddle

我希望通过以下几天来调用我的插件：

var days = [
    new Event('9-3','test1'),
    new Event('9-5', 'test2'),
    new Event('9-7', 'test3')
];
$("#cal").calendar({ 
    year: "2015", 
    month: "9", 
    events: days 
});

我是怎么做到的！？谢谢你帮我...

Answer 1

我已在此处更新您的代码：http://jsfiddle.net/Lqratxp1/

您现在可以创建一个对象，其中包含您要创建的事件的数据。您现在可以通过以下方式初始化它：

$("#cal").calendar( {year:"2015" month:"9",events:{'9-3':'test1','9-4':'test2'}});

您所要做的就是更改日历类：

var days = [];

$.each(config.events,function(k,v){
   days.push(new Event(k,v))
});

用于转换您在事件数组中作为参数传递的对象。

这里是完整的课程：

jQuery.fn.calendar = function(settings){

    var config = {
    // default settings
        year: "",
        month: "",
        events:  []
    // ...
    };
    // change default settings
    if (settings) { config = $.extend( {}, config, settings ); }

    var dayIndex = 0;

    function Event(start,title){        

        var parts = start.split('-');
        this.start= new Date(parts[2] || new Date().getFullYear(), parts[0] - 1, parts[1]);
        this.end= new Date(this.start);         

        this.title = title;
    }

    var days = [];

    $.each(config.events,function(k,v){
        days.push(new Event(k,v))
    });


    var mon = config.month - 1; // (1)
    var d = new Date(config.year, mon, 1);
    var start = 2 - d.getDay();
    var dateobj = new Date();
    var table = ['<table>'];

    while (d.getMonth() <= mon) {
        table.push('<tr>');

        for (var i = 0; i < 7; i++) {
            d = new Date(config.year, mon, start++);
            tmp = '<td>';
            tmp += '<div class="date">' + d.getDate() + '</div><div class="titlecontainer">';               

            var events = days.filter(function(e){ return e.start <= d && e.end >= d;}); //get all events for this day               
            if(events.length){          
                events.forEach(function(e){
                    tmp += '<div class="title">'
                        + e.title //+ ' grid:' + e.grid
                        + '</div>';
                });
            }
            tmp += '</div></td>';
            table.push(tmp)
        }
        table.push('</tr>');
    }
    table.push('</table>')
    $( this ).html(table.join('\n'));
};


$("#cal").calendar( { year: "2015", month: "9",events:{'9-3':'test1','9-4':'test2'} } );

Answer 2

并且，是的，这是可能的，只需要调整一下。

我编辑了你的小提琴here。

var days = [
    new Event('9-3','test11'),
    new Event('9-5', 'test22'),
    new Event('9-7', 'test33')
];

$("#cal").calendar( { year: "2015", month: "9", events: days } );

第一点是Event类应该在插件上下文之外可见，在这种情况下是在插件上下文中你无法看到它们在插件之外实例化。

为了让插件更容易，您可以考虑使用类的对象文字来创建Event对象。

将变量传递给我的jquery插件

2 个答案: