我希望将当前的7天日历更改为5天日历。 我的7天是从周日到周六,我希望将它改为星期一到星期五。
从我提到的两个主要方法:
-Hide both Sunday and Saturday columns using css.
-Rerun script to exclude Sunday and Saturday, calculating the dates again.
我已经看过两种方式而且无法理解它是如何工作的,我正在寻求帮助。
createCalendar()
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\"> <\/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;
答案 0 :(得分:1)
假设内部for循环中的所有内容都像宣传的那样工作,你可以这样做:
for (var i = 1; i <= 6; i++) {
thisDate++ //Sunday
calendarString += '<tr>'
for (var x = 2; x <= 6; x++) {
//all of that inner for loop code
}
calendarString += '</tr>'
thisDate++ //Saturday
}
另外:thisDate == 1
应该是:thisDate = 1
在初始for循环之前的顶部。
答案 1 :(得分:1)
CSS解决方案更为复杂(对于你的凌乱代码和跳跃2天的问题),但修改JS应该更好。
它们是第一个和最后一个元素,所以你可以这样做:
table td:first-child, table td:last-child {
display: none;
}
问题:last-child在旧浏览器上不起作用(IE <9)。 解决方案:jQuery跨浏览器工作:
$('table td:first-child, table td:last-child').remove()
注意:您确定是thisDate == 1;
吗?还是一个=?