javascript - start と end の間の各日付の javascript .addclass

Question

このウェブサイトの JQuery eventcalendar プラグインを使用しています。

私のイベントには開始日と終了日があり、カレンダーに緑色の四角を追加する次のコードがあります (1 つは開始日用、もう 1 つは終了日用)。

私が苦労しているのは、開始日と終了日の間の各日付に緑色の四角を追加する方法です。

eg start date - > 12-08-2012 
end date -> 15-08-12

12 番目 13 番目 14 番目と 15 番目を強調表示します

ここに画像の説明を入力

var eventDate = new Date(parseInt(event.startdate)),
eventYear = eventDate.getFullYear(),
eventMonth = eventDate.getMonth(),
eventDay = eventDate.getDate();

var eventDate1 = new Date(parseInt(event.enddate)),
eventYear1 = eventDate1.getFullYear(),
eventMonth1 = eventDate1.getMonth(),
eventDay1 = eventDate1.getDate();

// add mark in the dayList to the days with events
                    if (eventYear == flags.wrap.attr('data-current-year') && eventMonth == flags.wrap.attr('data-current-month')) {
                        flags.wrap.find('.currentMonth .eventsCalendar-daysList #dayList_' + eventDay).addClass('dayWithEvents');

                    }


if (eventYear1 == flags.wrap.attr('data-current-year') && eventMonth1 == flags.wrap.attr('data-current-month')) {
                        flags.wrap.find('.currentMonth .eventsCalendar-daysList #dayList_' + eventDay1).addClass('dayWithEvents');
                    }

score 0 · Accepted Answer

終了日を含む日付にマウスオーバーするたびに、同じスクリプトに似たものを作成しました。

            // add mark in the dayList to the days with events
            if (eventYear == flags.wrap.attr('data-current-year') && eventMonth == flags.wrap.attr('data-current-month')) {
                flags.wrap.find('.currentMonth .eventsCalendar-daysList #dayList_' + parseInt(eventDay)).addClass('list-group-item-success');

            if (event.date_end) {
                 $('#dayList_' + parseInt(eventDay)).hover(
            function () {
                $('#dayList_' + parseInt(eventDay)).nextUntil('#dayList_' + parseInt(eventDayEnd)).andSelf().add('#dayList_' + parseInt(eventDayEnd)).addClass('list-group-item-danger');

                       },
            function () {
                $('#dayList_' + parseInt(eventDay)).nextUntil('#dayList_' + parseInt(eventDayEnd)).andSelf().add('#dayList_' + parseInt(eventDayEnd)).removeClass('list-group-item-danger');
                       }
            );

            }

上記が機能する前に、いくつかの変更が必要です。各データが生成される部分:

$.each(data, function(key, event) {

私はいくつかの余分なコードを追加しました: (最初の IF)

                    if (event.date_end) {
                    var eventDateTimeEnd = event.date_end.split(" "),
                        eventDateEnd = eventDateTimeEnd[0].split("-"),
                        eventTimeEnd = eventDateTimeEnd[1].split(":"),
                        eventYearEnd = eventDateEnd[0],
                        eventMonthEnd = parseInt(eventDateEnd[1]) - 1,
                        eventDayEnd = parseInt(eventDateEnd[2]),
                        //eventMonthToShow = eventMonth,
                        eventMonthToShowEnd = parseInt(eventMonthEnd) + 1,
                        eventHourEnd = eventTimeEnd[0],
                        eventMinuteEnd = eventTimeEnd[1],
                        eventSecondsEnd = eventTimeEnd[2],
                        eventDateEnd = new Date(eventYearEnd, eventMonthEnd, eventDayEnd, eventHourEnd, eventMinuteEnd, eventSecondsEnd);                           
                }

2 番目の IF

                    if (event.date_end) {
                    var eventDateEnd = new Date(parseInt(event.date_end)),
                        eventYearEnd = eventDateEnd.getFullYear(),
                        eventMonthEnd = eventDateEnd.getMonth(),
                        eventDayEnd = eventDateEnd.getDate(),
                        eventMonthToShowEnd = eventMonthEnd + 1,
                        eventHourEnd = eventDateEnd.getHours(),
                        eventMinuteEnd = eventDateEnd.getMinutes();
                        }

ご覧のとおり、同じコードを使用して、各変数に新しい名前を付け、各変数に End を追加しただけです。

もちろん、イベントデータをプッシュするときは、データに終了日が含まれているかどうかを識別する必要があります。あなたが使用しているフォーマットはあなたのものとは異なります.Bootstrap 3.10で動作するこのスクリプトを作成しました.

if (event.date_end) {
                                    events.push('<li id="' + key + '" class="list-group-item '+event.type+'"><time datetime="'+eventDate+'"><em>' + eventStringDate + '</em><small>'+eventHour+":"+eventMinute+'</small></time>----TILL-----<time datetime="'+eventDateEnd+'"><em>' + eventStringDateEnd + '</em><small>'+eventHourEnd+":"+eventMinuteEnd+'</small></time>'+eventTitle+'<p class="eventDesc ' + eventDescClass + '">' + event.description + '</p></li>');
                                    }else{
                                    events.push('<li id="' + key + '" class="list-group-item '+event.type+'"><time datetime="'+eventDate+'"><em>' + eventStringDate + '</em><small>'+eventHour+":"+eventMinute+'</small></time>'+eventTitle+'<p class="eventDesc ' + eventDescClass + '">' + event.description + '</p></li>');
                                    }

生成された Json に、新しいフィールドを追加しました。

{ 
                        "date": "1394233485248", 
                        "type": "demo", 
                        "title": "Project B demo", 
                        "description": "Lorem ipsum dolor.", 
                        "url": "http://www.event2.com/",
                        "date_end": "1402891200000" 
                        },

誰かが mysql/pdo データベースからデータを取得するのを手伝いたい場合....私にメッセージを残してください。

score 0 · Accepted Answer

私はちょうど同じ機能強化を行いました (実際にはまだ微調整しています) 。日付の一致にはdatejsを使用しました。作業中にカレンダープラグインを github リポジトリに移植しましたが、この拡張機能はまだプッシュされていません。それでも回答に興味がある場合は、急いで回答を完成させてリンクを提供できますが、次のようになります。

var daysElement = $element.find('.currentMonth .eventsCalendar-daysList');
var dateToBeChecked = new Date(parseInt(event.startDate));
var endDate = new Date(parseInt(event.endDate));
while (dateToBeChecked.compareTo(endDate) <=0) {
    daysElement.find('#dayList_' + dateToBeChecked.getDate())
               .addClass('dayWithEvents');
    dateToBeChecked.addDays(1);
}

(「微調整」には、2 つの異なる暦月に存在するイベントの処理が含まれることに注意してください。)

javascript - start と end の間の各日付の javascript .addclass

2 に答える 2

Related

Reference