Question

我目前正在制作一个7天的日历（太阳坐），效果很好，但我想添加一个选项，将其更改为5天日历（周一至周五）。我希望我可以更改现有代码来显示我的日历。有什么想法我会怎么做？

日历

calendarString = '';
calendarString += '<table width="100%" height="425" data-role="table" border="1" bordercolor="#c0c0c0" cellpadding="0" cellspacing="0">';
    calendarString += '<tr>';
    calendarString += '<td bgcolor=\"#DDDDDD\" align=\"center\" valign=\"center\" width=\"40\" height=\"22\">Sun<\/td>';
    calendarString += '<td bgcolor=\"#DDDDDD\" align=\"center\" valign=\"center\" width=\"40\" height=\"22\">Mon<\/td>';
    calendarString += '<td bgcolor=\"#DDDDDD\" align=\"center\" valign=\"center\" width=\"40\" height=\"22\">Tue<\/td>';
    calendarString += '<td bgcolor=\"#DDDDDD\" align=\"center\" valign=\"center\" width=\"40\" height=\"22\">Wed<\/td>';
    calendarString += '<td bgcolor=\"#DDDDDD\" align=\"center\" valign=\"center\" width=\"40\" height=\"22\">Thu<\/td>';
    calendarString += '<td bgcolor=\"#DDDDDD\" align=\"center\" valign=\"center\" width=\"40\" height=\"22\">Fri<\/td>';
    calendarString += '<td bgcolor=\"#DDDDDD\" align=\"center\" valign=\"center\" width=\"40\" height=\"22\">Sat<\/td>';
    calendarString += '<\/tr>';

    thisDate == 1;

    for (var i = 1; i <= 6; i++) 
        {
            calendarString += '<tr>';
            for (var x = 1; x <= 7; x++) 
                {
                    daycounter = (thisDate - firstDay)+1;
                    thisDate++;
                    if ((daycounter > numbDays) || (daycounter < 1)) 
                        {
                            calendarString += '<td align=\"center\" bgcolor=\"#888888\" height=\"30\" width=\"40\">&nbsp;<\/td>';
                        } 
                    else 
                        {
                            if (checkevents(daycounter,monthNum,yearNum,i,x) || ((todaysDay == x) && (todaysDate == daycounter) && (todaysMonth == monthNum)))
                                {
                                    if ((todaysDay == x) && (todaysDate == daycounter) && (todaysMonth == monthNum)) 
                                        {
                                            tempweek = i;
                                            tempdayofweek = x;
                                            calendarString += '<td style=\"vertical-align: top;\" bgcolor=\"#AAFFAA\" height=\"30\" width=\"40\" onClick=showevents(' + daycounter + ',' + monthNum + ',' + yearNum + ',' + i + ',' + x + ')>' + daycounter + '<\/td>';
                                        }
                                else    
                                    {
                                    calendarString += '<td style=\"vertical-align: top;\" bgcolor=\"#FFFFC8\" height=\"30\" width=\"40\" onClick=showevents(' + daycounter + ',' + monthNum + ',' + yearNum + ',' + i + ',' + x + ')>' + daycounter + '<div id="amountevent" style="padding-left:5px;max-height:8px; height:8px; width:30px; max-width:30px;white-space: nowrap;">' + displayeventnumber(daycounter, monthNum, yearNum) + '</div><\/td>';


                                    }
                            } 
                            else 
                                {
                                    calendarString += '<td style=\"vertical-align: top;\" bgcolor=\"#f9f9f9\" height=\"30\" width=\"40\">' + daycounter + '<\/td>';         
                                }
                        }
                }
            calendarString += '<\/tr>';
        }
    calendarString += '<\/table>';
    var object=document.getElementById('calendar');
    object.innerHTML= calendarString;
    thisDate = 1;

Answer 1

一个选项可能是为两种样式提供完全相同的html，但如果用户选择五天日历，则动态隐藏sunday-saturday列。

Answer 2

删除

calendarString += '<td bgcolor=\"#DDDDDD\" align=\"center\" valign=\"center\" width=\"40\" height=\"22\">Sun<\/td>';
calendarString += '<td bgcolor=\"#DDDDDD\" align=\"center\" valign=\"center\" width=\"40\" height=\"22\">Sat<\/td>';

更改

for (var x = 1; x <= 7; x++)

到

for (var x = 2; x <= 6; x++)

将7天日历更改为5天

2 个答案: