1

私は、各月を行として、水平方向にテーブルのグループとしてレンダリングする Javascript で生成された年カレンダーを持っています。現在の serverTime の取得に基づいて最初の月を動的に設定します。各テーブルは月です。テーブルは次のとおりです。

<table id="m1"></table>
<table id="m2"></table>
<table id="m3"></table>
<table id="m4"></table>
<table id="m5"></table>
<table id="m6"></table>
<table id="m7"></table>
<table id="m8"></table>
<table id="m9"></table>
<table id="m10"></table>
<table id="m11"></table>
<table id="m12"></table>
<table id="m13"></table>
<table id="m14"></table>

DOM インジェクションの後、毎月 ID が入力されます。2013 年 10 月の例 =

<table id="m2">
<tbody><tr><td>Oct 13</td>
<td></td><td></td>
<td class="avail" id="10_1_13">1</td>
<td class="avail" id="10_2_13">2</td>
<td class="avail" id="10_3_13">3</td>
<td class="avail" id="10_4_13">4</td>
<td class="avail" id="10_5_13">5</td>
<td class="avail" id="10_6_13">6</td>
<td class="avail" id="10_7_13">7</td>
<td class="avail" id="10_8_13">8</td><td class="avail" id="10_9_13">9</td><td class="avail" id="10_10_13">10</td><td class="avail" id="10_11_13">11</td><td class="avail" id="10_12_13">12</td><td class="avail" id="10_13_13">13</td><td class="avail" id="10_14_13">14</td><td class="avail" id="10_15_13">15</td><td class="avail" id="10_16_13">16</td><td class="avail" id="10_17_13">17</td><td class="avail" id="10_18_13">18</td><td class="avail" id="10_19_13">19</td><td class="avail" id="10_20_13">20</td><td class="avail" id="10_21_13">21</td><td class="avail" id="10_22_13">22</td><td class="avail" id="10_23_13">23</td><td class="avail" id="10_24_13">24</td><td class="avail" id="10_25_13">25</td><td class="avail" id="10_26_13">26</td><td class="avail" id="10_27_13">27</td><td class="avail" id="10_28_13">28</td><td class="avail" id="10_29_13">29</td><td class="avail" id="10_30_13">30</td><td class="avail" id="10_31_13">31</td><td></td><td></td><td></td><td></td></tr></tbody></table>

サーバーから 2 つの日付 (startDate + endDate) を受け取るJavaScript 関数 " showBookingData(data) " があります。この関数は、カレンダーに色付きの予約期間を表示するためのレンダリング関数 " highlightBookTableMonthsChange(start, end) " に渡します。開始日と終了日を一致させます。

このレンダリング関数は日付の差を計算して、ブロックされた期間を表示するために予約の各日にクラスを追加し、関連するテーブルを強調表示できるようにします。

レンダリング関数は、次の JSON で日付を受け取ります =

{"d":[{"__type":"booking+PropDates","dataValueField":"02/19/14","dataValueField2":"02/26/14"}]}

問題：

私のレンダリング関数 'highlightBookTableMonthsChange(start, end)' は日付を正しく受け取りますが、この時点から、次の 6 か月の予約について、1900 年代初頭から 2100 年代初頭までのさまざまな出力日付を計算しているようです。クライアントコンピュータ!!! したがって、クライアント側のコード内で行われているある種の想定される日付計算を避けるために、どこかでフォーマットを固定する必要があります。

Javascript 関数:

function showBookingData(data) {
    var len = data.d.length;
    var i = 0;
    for (i = 0; i < len; i++) {
        var sptype = data.d[i].__type;
        var startDate = data.d[i].dataValueField;
        var endDate = data.d[i].dataValueField2;
//        alert("{'startdate':" + startDate + ",'enddate':'" + endDate + "'}")
        highlightBookTableMonthsChange(startDate, endDate)
    }
}

function highlightBookTableMonthsChange(start, end) {

    var start = new Date(start);
    var end = new Date(end);
    alert("{'startdate':" + start + ",'enddate':'" + end + "'}")
    var i = 1;
    $("#datesd").html($("#datesd").html()+'<br/>'+start + "" + end);
    var timeDiff = Math.abs(end.getTime() - start.getTime());
    var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
    diffDays++;
    while (start <= end) {
        var startMonth = start.getMonth() + 1;
        var startDate = start.getDate();
        var year = start.getFullYear();
        if (i == 1) {
            var prevClass = $("#" + parseInt(startMonth) + "_" + startDate + "_" + year).attr("class");
            if (prevClass == "lastBook" || prevClass == "fullBook")
            { $("#" + parseInt(startMonth) + "_" + startDate + "_" + year).attr("class", "fullBook"); }
            else
                $("#" + parseInt(startMonth) + "_" + startDate + "_" + year).attr("class", "firstBook");
        }
        else if (i == diffDays) {
            $("#" + parseInt(startMonth) + "_" + startDate + "_" + year).attr("class", "lastBook");
        }
        else {
            $("#" + parseInt(startMonth) + "_" + startDate + "_" + year).attr("class", "fullBook");
        }
        var newDate = start.setDate(start.getDate() + 1);
        start = new Date(newDate);
        i=i+1;
    }
}

function createYearCalander() {
    var i = 1;
    var startDates = new Date(calanderStartDate);
    var startMonth = startDates.getMonth();
    var startYear = startDates.getFullYear();
    if (country = "US") {
        startDatee = startMonth + "/1/" + startYear;
    }
    else {
        startDatee = "1/" + startMonth + "/" + startYear;
    }
    startMonth++;
    for (i = 1; i <= 12; i++) {  //Number of Months on Grid
        createMonthTable(i, startMonth, startYear);
        if (startMonth == 12) {
            startMonth = 1;
            startYear++;
        }
        else
            startMonth++;
    }

    gerData(1); //Get Booking Date Data From Server
}

function createMonthTable(monthCount,mth,year) {
    var table1 = document.getElementById('m' + monthCount);
    var tblRow = tblRow = table1.insertRow(0);
    var tblCell = null;
    var dayys = countDaysOfMonth(mth, year);
    var startDates = new Date(mth + "/1/" + year)
    var firstDayOfMth = startDates.getDay();  //first day of month
    var dataStarts = firstDayOfMth;
    var dataEnds = firstDayOfMth + dayys;
    var i = 0;
    var tempDayStart = 1;
    for (i = 0; i <= 37; i++) {
        tblCell = tblRow.insertCell(i);
        if (i == 0) {
            tblCell.innerHTML = monthName(mth) + "," + year;
        }
        else if (i > dataStarts && i <= dataEnds) {
             $(tblCell).attr("class", "avail")
             tblCell.id = mth + "_" + tempDayStart + "_" + year;
            tblCell.innerHTML = tempDayStart;
            tempDayStart = tempDayStart + 1;
        }

    }
    if (monthCount == 12) {  //Months displayed on table grid
        endDatee = mth + "/" + dayys + "/" + year;
    }
}


function countDaysOfMonth(m,y)
{
    return (/8|3|5|10/.test(--m) ? 30 : m == 1 ? (!(y % 4) && y % 100) || !(y % 400) ? 29 : 28 : 31);
} 


function monthName(month)
{
    if (month == 1) 
        return 'Jan'
    else if (month == 2)
        return 'Fab'
    else if (month == 3)
        return 'Mar'
    else if (month == 4)
        return 'Apr'
    else if (month == 5)
        return 'May'
    else if (month == 6)
        return 'Jun'
    else if (month == 7)
        return 'Jul'
    else if (month == 8)
        return 'Aug'
    else if (month == 9)
        return 'Sep'
    else if (month == 10)
        return 'Oct'
    else if (month == 11)
        return 'Nov'
    else if (month == 12)
        return 'Dec'
}
function getServerTime() {
    $.ajax({
        type: "POST",
        //data: "{'propId':" + programId + "}",
        url: "svcs/booking.asmx/getServerDate",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            calanderStartDate = data.d;
            createYearCalander();
            SetPrpCal();
        },
        error: OnError
    });
}

function gerData(programId) {
    Zzp = ($.super_cookie().read_value("propRz1", "zc"));
    $.ajax({
        type: "POST",
        data: "{'cp':" + Zzp + ",'fDate':'" + startDatee + "','tDate':'" + endDatee + "'}",
        url: "svcs/booking.asmx/getPropertyBookings",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            showBookingData(data)
        },
        error: OnError
    });
}
4

2 に答える 2

1

さらにテストして、これに対する答えを見つけました：

幅を抑えるために左側の日付列に短い形式の年を表示したいのですが、短い日付形式を使用すると、一部のクライアント システムは 19** と短い形式の年を使用して日付を計算します。

そこで、サーバーからの出力 JSON ストリームを日付形式 (MM/dd/yyyyy) に変更して、通年を強制しました。これにより、テーブルの日付 ID が「10_1_13」形式から、たとえば 2013 年 10 月 1 日として「10_1_2013」に自動的に変更され、テーブルの予約が正確に処理されます。ただし、最初の月の列には 1 年も表示されます。これを修正するために、関数 createMonthTable(monthCount, mth, year)内の日付形式をトリミングしました。したがって、新しい関数は次のようになります。

function createMonthTable(monthCount, mth, year) {
    var startYearShort = (year + '').substring(2, 4); //convert 2digit yy
    var table1 = document.getElementById('m' + monthCount);
    var tblRow = tblRow = table1.insertRow(0);
    var tblCell = null;
    var dayys = countDaysOfMonth(mth, year);
    var startDates = new Date(mth + "/1/" + year)
    var firstDayOfMth = startDates.getDay();  //first day of month
    var dataStarts = firstDayOfMth;
    var dataEnds = firstDayOfMth + dayys;
    var i = 0;
    var tempDayStart = 1;
    for (i = 0; i <= 37; i++) {
        tblCell = tblRow.insertCell(i);
        if (i == 0) {
            tblCell.innerHTML = monthName(mth) + " " + startYearShort;
        }
        else if (i > dataStarts && i <= dataEnds) {
            $(tblCell).attr("class", "avail")
            tblCell.id = mth + "_" + tempDayStart + "_" + year;
            tblCell.innerHTML = tempDayStart;
            tempDayStart = tempDayStart + 1;
        }

    }
    if (monthCount == 14) { //depends on table rows for #months
        endDatee = mth + "/" + dayys + "/" + year; 
    //I Send startDatee & endDatee values as an AJAX GET to the server so that I get
    //returned a date array matching the calendar months grid only.
    }
}

これで完璧に動作します! 出力を見る

JSON 経由で予約期間を受け取る、クライアント側の柔軟で動的な月間水平カレンダーを探している人向け。これは、少しの CSS を使用して簡単にスタイルを設定できる高速なモデルです。css ファイルが必要な場合は、私にメッセージを送ってください。送信します。

画像 - 予約のある水平レイアウト

于 2013-09-02T19:08:44.777 に答える
1

これはあなたの質問への回答ではないことは承知していますが、再利用できるものがすでにたくさんあるのに、独自のカレンダー機能を展開している理由はありますか? 日付/時刻は扱いにくい場合があります。

自分で作成する必要がある場合は、http://momentjs.com/を確認してください。2 つの日付の間の日数を取得したり、任意の日付に 1 日を追加したりできます。

したがって、次のようなことができます（ライブラリを見ずに擬似コード）：

newDate = startDate;
While ((newDate = newDate.addDay(1)) < endDate) {
    // highlight on calendar
}
于 2013-09-02T02:47:53.047 に答える