0

これは、StackOverflow に関する私の最初の質問なので、「正しい方法」で質問するために特別な努力をしようと思います。

jQuery を使用して HTML カレンダーを動的に作成しようとしています。基本的に、カレンダーを次のようにしたいのですが、週末は除きます: http://postimage.org/image/4xryen3ej/。

カレンダーの日付は tbody 要素で作成されます。

<table>
    <thead>
        <tr>
            <th class="weekday">Mo</th>
            <th class="weekday">Tu</th>
            <th class="weekday">We</th>
            <th class="weekday">Th</th>
            <th class="weekday">Fr</th>
        </tr>
    </thead>
    <tbody id="dates">
    </tbody>
</table>

jQueryコードは次のとおりです。

var months = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");

var now       = new Date;
var year      = now.getFullYear();
var month     = now.getMonth();
var thisMonth = now.getMonth();
var monthStart;
var monthLength;
var addDays;
var dayOfWeek;
var today;

printDate();
createCalendar();

function printDate()
{
    monthStart   = new Date(year, month, 1);
    var monthEnd = new Date(year, month + 1);
    monthLength  = Math.round((monthEnd - monthStart) / (1000 * 60 * 60 * 24));

    $("#dateToday").text(months[month] + " " + year + " " + monthLength);
}

function createCalendar()
{
    addDays   = now.getDate();
    dayOfWeek = now.getDay();
    today     = now.getDate();

    $("#dates").append("<tr>");

    for (var i = 0; addDays < monthLength + 1; i++)
    {
        if (i < dayOfWeek)
        {
            $("#dates").append("<td style=\"border: 1px solid; height: 80px\">" +
                               "<div style=\"background-color: #EEEEEE; height: 18px; text-align: right\"></div>" +
                               "<div style=\"height: 62px\"></div>" +
                               "</td>");
        }
        else
        {
            if ((addDays == today) && (now.getMonth() == month))
            {
                $("#dates").append("<td style=\"border: 1px solid; height: 80px\">" +
                                   "<div style=\"background-color: #EEEEEE; height: 18px; text-align: right\"><b>" + addDays + "</b></div>" +
                                   "<div style=\"height: 62px\"></div>" +
                                   "</td>");

                addDays = addDays + 1;
            }
            else
            {
                if (i % 5 == 0)
                {
                    addDays = addDays + 2;

                    $("#dates").append("</tr>" +
                                       "<tr>");
                }

                $("#dates").append("<td style=\"border: 1px solid; height: 80px\">" +
                                   "<div style=\"background-color: #EEEEEE; height: 18px; text-align: right\">" + addDays + "</div>" +
                                   "<div style=\"height: 62px\"></div>" +
                                   "</td>");

                addDays = addDays + 1;
            }
        }
    }
}

この種の問題に関してネット上に多くの例があることは知っていますが、まだ問題を解決できていないため、ここに投稿する必要がありました。

4

1 に答える 1

0

JQuery Datepicker UI を使用する場合。週末を無効にするのは簡単です

$(function() {
   $('#id').datepicker({ 
       beforeShowDay: $.datepicker.noWeekends 
   });
});
于 2012-07-05T04:27:39.010 に答える