web-dev-qa-db-ja.com

カスタムHTMLをjQuery FullCalendarセルに追加する

私はjQuery FullCalendar（ http://arshaw.com/fullcalendar/docs/ ）を使用しています。

いくつかのカスタムHTMLを各デイセルに追加したいと思います。

たとえば、私の場合、いくつかのロジックに基づいて異なる背景色を使用したい場合は、中央に価格を表示します...

sample calendar

セルのレンダリングをカスタマイズする方法はありますか？

jquerycalendarrenderingfullcalendar
13
Nathan H

この問題を他の人のために解決した方法を説明します。

eventAfterRender コールバックを使用しました。そこでは、jQueryを使用して「要素」パラメーターを解析し、ブラウザーに送信する前にhtmlを書き直しました。

7
Nathan H

私がこれを行う方法は、コナーズが示したようなものです：

eventRender: function(event, element) {
    element.find(".fc-event-title").remove();
    element.find(".fc-event-time").remove();
    var new_description =   
        moment(event.start).format("HH:mm") + '-'
        + moment(event.end).format("HH:mm") + '<br/>'
        + event.customer + '<br/>'
        + '<strong>Address: </strong><br/>' + event.address + '<br/>'
        + '<strong>Task: </strong><br/>' + event.task + '<br/>'
        + '<strong>Place: </strong>' + event.place + '<br/>'
    ;
    element.append(new_description);
}
18
Gjermund Dahl

これが、アプリケーションでこの問題に対処する方法です。

Fullcalendar.jsでは、これを見つける必要があります。

html +=
    "<span class='fc-event-title'>" +
    htmlEscape(event.title || '') +
    "</span>" +
    "</div>";

セルのコンテンツが作成される場所です。

セルの右側にイベントの時間を入れたかったので、

html +=
    "<span class='fc-event-title'><div style='float:right'>" + moment(event.start).format('hh:mm a') + "</div>" +
    htmlEscape(event.title || '') +
    "</span>" +
    "</div>";

時間をフォーマットするためにmomentjsライブラリを使用しています。

これで、カレンダーのセルコンテンツに何でも追加でき、標準のhtmlを使用してフォーマットできます。

3
Nicolas Giszpenc

この答え は、私に役立つ非常にシンプルな方法を提供しました：

cell.prepend('<span class="selector">' + ReturnCellNumber(cellDay,cellMonth,cellYear) + '</span>');
2
mark groeneveld

私は、カレンダーを調整するまで、上記の Gjermund Dahl の回答を使用していました。この方法を使用すると、ビューごとに異なる書式を設定できます。カレンダーがリストとタイムラインを使用している場合、レンダリングのブランケットアクションでタイトルクラスを削除すると、ビューによって結果が異なります。

eventRender: function(event, element) {

    // explore the element object
    // console.log(element);        

    // edit list view titles
    // during the render, check for the list class to be in the element
    // if there is a fc-list-class then we are going to make our changes accordingly
    if( element[0].className === 'fc-list-item' ){
        // create your new name
        var x = '<strong>' + event.title + ' ' + model + '</strong><br/>' +  cust;
        // create array to be added to element                   
        var update = { innerHTML: x };
        // replace element with update value in the right place    
        $.extend( true, element[0].childNodes[2], update ); 
    }

    // edit timeline view titles
    // during the render, check for the timeline class to be in the element
    // if there is a fc-timeline-event then we are going to make our changes accordingly
    if( element[0].className.indexOf( 'fc-timeline-event' ) === 0 ) {
        var x = '<span class="fc-title">' + '<strong>'
        + customer + '</strong><br/>'+ new + ' ' + make + ' ' + model + '</span>';
        // create array to be added to element                   
        var update = { innerHTML: x };
        // replace element with update value in the right place    
        $.extend( true, element[0].childNodes[0].firstChild, update );
    } 
}

2つのビューに追加されている場所が異なることに注意してください。要素オブジェクトを探索して、新しいコンテンツが必要な場所を確認する必要があります。さらに細かく制御して、この変更を行う場所を選択することもできます。 innerHTML、innerText、またはあなたの心が望むものを変更します。

0
jchuck

これを試して：

  eventRender: function (event, element) {
            let new_description = '<div class="fc-content"><span class="fc-title '+event.className+'">' + event.title + '</span>'
                + '<span class="fc-time">' + event.start.format('hh:mma') + '-' + event.end.format('hh:mma') + '</span>'
                + '<span class="' + event.statusCss + '">' + event.status + '</span></div>'
            ;
            element.html(new_description);
        }
0
Tanavirrul haq

ここでは、これを得ることができます：

    dayRender: function(date, cell) {
            cell.append('<div style="text-align:center; background-color:blue; color:#fff;padding:2px 0;margin-top:20px;">Add Your Text!</div>');
           },

詳細情報： jQuery FullCalendarセルにカスタムHTMLを追加

0
Ajay Malhotra