javascript - 修改日历，以便在单击日期时打开注释

Question

我有 2 个文件，calendar.html 和 notes.html，这是日历的屏幕截图:

我希望在单击日期时打开 notes.html。

到目前为止，这是我的代码:

$.fn.zabuto_calendar = function(b) {
    var c = $.extend({}, $.fn.zabuto_calendar_defaults(), b);
    var a = $.fn.zabuto_calendar_language(c.language);
    c = $.extend({}, c, a);
    this
            .each(function() {
                var j = $(this);
                j.attr("id", "zabuto_calendar_" + Math.floor(Math.random() * 99999).toString(36));
                j.data("initYear", c.year);
                j.data("initMonth", c.month);
                j.data("monthLabels", c.month_labels);
                j.data("weekStartsOn", c.weekstartson);
                j.data("navIcons", c.nav_icon);
                j.data("dowLabels", c.dow_labels);
                j.data("showToday", c.today);
                j.data("showDays", c.show_days);
                j.data("showPrevious", c.show_previous);
                j.data("showNext", c.show_next);
                j.data("cellBorder", c.cell_border);
                j.data("jsonData", c.data);
                j.data("ajaxSettings", c.ajax);
                j.data("legendList", c.legend);
                j.data("actionFunction", c.action);
                j.data("actionNavFunction", c.action_nav);
                l();
                function l() {
                    var y = parseInt(j.data("initYear"));
                    var B = parseInt(j.data("initMonth")) - 1;
                    var C = new Date(y, B, 1, 0, 0, 0, 0);
                    j.data("initDate", C);
                    var D = (j.data("cellBorder") === true) ? " table-bordered"
                            : "";
                    $tableObj = $('<table class="table' + D + '"></table>');
                    $tableObj = w(j, $tableObj, C.getFullYear(), C.getMonth());

                    //Custom code
                    var i = document.getElementById('$tableObj');
                    i = w('notes.html');

                    $legendObj = g(j);
                    var z = $('<div class="zabuto_calendar" id="'
                            + j.attr("id") + '"></div>');
                    z.append($tableObj);
                    z.append($legendObj);
                    j.append(z);
                    var A = j.data("jsonData");
                    if (false !== A) {
                        r(j, C.getFullYear(), C.getMonth())
                    }
                }

你能帮我找到正确的方向吗？

Answer 1

我觉得你的代码有点复杂，难以理解。

我认为你首先应该做的是创建两个对象:

第一个对象日历

function Calendar(month,year) {
var actualDate=new Date();
    var month=(!month)?(actualDate.getMonth()):month;
    var year=(!year)?(actualDate.getFullYear()):year;
    var days=new Array();   

//DEFINE SETTERS AND GETTERS

//FOLLOWING FUNCTION SHOWS THE CALENDAR
    this.showCalendar=function(){
        var d=new Date(year,month,1);
        var result='<table summary="Calendar"><caption>'+tableMonth[month]+'</caption><thead><th>Monday</th><th>Tuesday</th><th>Wed</th><th>Thirsday</th><th>Friday</th><th>Sat</th><th>Sun</th></thead>'+
                        <tr>';

if (f.getDay()==0)
    for (i=1;i<7;i++)
        result+='<td></td>'
else
    for (i=1;i<f.getDay();i++)
        result+='<td></td>';

for (i=1;i<=days.length;i++){
    var f=new Date(year,month,i);
    if (f.getDay()==0)
        resultad+='<td>'+i+'</td></tr><tr>'
    else
        resultad+='<td>'+i+'</td>';
}
resultad+='</tr></tbody></table>';
return resultado;

}

要创建的第二个对象是注释，遵循相同的过程:

第二个对象注释:

function notes(param1,param2) {
//same process as before you define your object as you like
}

一旦您定义了两个对象，然后将 dom 与 jquery 或 javascript 结合使用，您就可以在新层或新窗口 (window.open) 中显示您的笔记，或按您喜欢的方式显示。

代码太宽，写到这里，主要思路写给大家。