将变量传递给我的jquery插件

Question

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

这是我的工作：小提琴

我想把我的插件命名为：

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

而且，是的，这是可能的，只是一个感觉上的调整。

我编辑了你的小提琴这里。

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 } );   

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

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