web-dev-qa-db-ja.com

フルカレンダーでより多くのテキストを表示する

イベントでより多くの情報を表示するソリューションを探しています。

たとえば、DayViewでは、06：00から10:00までのイベントが表示されます。
このイベントに追加の説明を表示したい（時間とタイトルだけでなく）。

javascripthtmlfullcalendar
57
chichi

私は個人的にツールチップを使用して追加情報を表示しているため、誰かがイベントにカーソルを合わせると、長い説明が表示されます。この例では qTip を使用していますが、ツールチップの実装はすべて機能します。

$(document).ready(function() {
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();
    $('#calendar').fullCalendar({
        header: {
            left: 'prev, next today',
            center: 'title',
            right: 'month, basicWeek, basicDay'
        },
        //events: "Calendar.asmx/EventList",
        //defaultView: 'dayView',
        events: [
        {
            title: 'All Day Event',
            start: new Date(y, m, 1),
            description: 'long description',
            id: 1
        },
        {
            title: 'Long Event',
            start: new Date(y, m, d - 5),
            end: new Date(y, m, 1),
            description: 'long description3',
            id: 2
        }],
        eventRender: function(event, element) {
            element.qtip({
                content: event.description + '<br />' + event.start,
                style: {
                    background: 'black',
                    color: '#FFFFFF'
                },
                position: {
                    corner: {
                        target: 'center',
                        tooltip: 'bottomMiddle'
                    }
                }
            });
        }
    });
});
36
Jake1164

このコードはあなたを助けることができます：

$(document).ready(function() { 
    $('#calendar').fullCalendar({ 
        events: 
            [ 
                { 
                    id: 1, 
                    title: First Event', 
                    start: ......., 
                    end: ....., 
                    description: 'first description' 
                }, 
                { 
                    id: 2, 
                    title: 'Second Event', 
                    start: ......., 
                    end: ....., 
                    description: 'second description'
                }
            ], 
        eventRender: function(event, element) { 
            element.find('.fc-title').append("<br/>" + event.description); 
        } 
    });
}
122
Eureka

単一行を変更すると、fullcalendar.jsスクリプトを変更して改行を許可し、同じ行に複数の情報を配置できます。

FullCalendar.jsの〜3922行目でhtmlEscape（s）関数を見つけ、.replace（/ <br\s？/？>/g、 '
'）最後まで。

function htmlEscape(s) {
    return s.replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/'/g, '&#039;')
    .replace(/"/g, '&quot;')
    .replace(/\n/g, '<br />')
    .replace(/&lt;br\s?\/?&gt;/g, '<br />');
}

これにより、タイトルに複数の行を使用して、情報を分離できます。例：event.titleをタイトルに置き換えます： '終日イベント' + '<br />' + 'その他の説明'

7
Jake1164

QTip2とeventMouseoverを使用したポップアップのコードは次のとおりです。

$(document).ready(function() {
    // Setup FullCalendar
    // Setup FullCalendar
    (function() {
        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();
        var day=date.toLocaleDateString(); 

        var tooltip = $('<div/>').qtip({
            id: 'fullcalendar',
            prerender: true,
            content: {
                text: ' ',
                title: {
                    button: true
                }
            },
            position: {
                my: 'bottom center',
                at: 'top center',
                target: 'mouse',
                viewport: $('#fullcalendar'),
                adjust: {
                    mouse: false,
                    scroll: false
                }
            },
            show: false,
            hide: false,
            style: 'qtip-light'
        }).qtip('api');

        $('#fullcalendar').fullCalendar({
            editable: true,
             disableDragging: true,
            height: 600,
            header: {
                left: 'title',
                center: '',
                right: 'today prev,next'
            },

            dayClick: function() { tooltip.hide() },
            eventResizeStart: function() { tooltip.hide() },
            eventDragStart: function() { tooltip.hide() },
            viewDisplay: function() { tooltip.hide() },
            events: [
                {
                    title: 'All Day Event',
                    start: new Date(2014, 3, 1)
                },
                {
                    title: 'Long Event',
                    start: new Date(y, m, d-5),
                    end: new Date(y, m, d-2)
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    start: new Date(y, m, d+4, 16, 0),
                    allDay: false
                },
                {
                    title: 'Meeting',
                    start: new Date(y, m, d, 10, 30),
                    allDay: false
                },
                {
                    title: 'Spring Membership Conference',
                    start: new Date(y, m, d+6, 7,0),
                    end: new Date(y, m, d+6, 13,0),
                    allDay: false,
                    description:'save the date! Join us for our Annual Membership Conference. Breakfast will be served beginning at 7:30 a.m. Featuring The EFEC Belief System & Our Pledge lunch'
                },
                {
                    title: 'Birthday Party',
                    start: new Date(y, m, d+1, 19, 0),
                    end: new Date(y, m, d+1, 22, 30),
                    allDay: false
                }
            ],
            eventMouseover : function(data, event, view) {
                var content = 
                '<p>'+data.description +'<p>'+
                '<h3>'+data.title+'</h3>' + 
                    '<p><b>Start:</b> '+data.start+'<br />' + 
                    (data.end && '<p><b>End:</b> '+data.end+'</p>' || '');

                tooltip.set({
                    'content.text': content
                })
                .reposition(event).show(event);
            },
        });
    }());
});
5
sunilkjt

可能な解決策として、タイトルにさらにコンテンツを追加します。このCSSスタイルを上書きします。

 .fc-day-grid-event .fc-content {
   white-space: normal; 
}
4
DolceVita

何らかの理由で、私は使用する必要があります

element.find('.fc-event-inner').empty();

それを機能させるために、私は日中にいると思います。

3
windmaomao

かなりの量の情報を（ツールチップなしで）表示する機能が必要でしたが、非常に良い結果が得られました。 FullCalendars title propを使用して、すべてのHTMLを保存しました。レンダリング後に機能することを確認するために行う必要があるのは、タイトルフィールドのHTMLを解析することだけです。

// `data` ismy JSON object.
$.each(data, function(index, value) {
  value.title = '<div class="title">' + value.title + '</div>';
  value.title += '<div class="deets"><span class="time"><img src="/themes/custom/bp/images/clock.svg">' + value.start_time + ' - ' + value.end_time + '</span>';
  value.title += '<span class="location"><img src="/themes/custom/bp/images/pin.svg">' + value.location + '</span></div>';
  value.title += '<div class="learn-more">LEARN MORE <span class="arrow"></span></span>';
});

// Initialize the calendar object.
calendar = new FullCalendar.Calendar(cal, {
  events: data,
  plugins: ['dayGrid'],
  eventRender: function(event) {
    // This is required to parse the HTML.
    const title = $(event.el).find('.fc-title');
    title.html(title.text());
  }
});
calendar.render();

テンプレートリテラルを使用していましたが、IE11をサポートする必要がありました

calender

1
Ronnie

さて、私は私のためのより簡単な解決策を見つけました：

Fullcalendar.cssを変更しました

以下を追加しました：

float: left;
clear: none;
margin-right: 10px;

その結果：

.fc-event-time,
.fc-event-title {
    padding: 0 1px;
    float: left;
    clear: none;
    margin-right: 10px;
}

今では、必要なときにのみラップします。

1
user1641172

EventRenderの代わりにeventAfterRenderコールバックを使用することをお勧めします。実際、eventRenderを使用すると、コーヒースクリプトでのイベントの正しい表示が危険にさらされる可能性があります。

$("#calendar").fullCalendar
    eventAfterRender: (event, element) ->
        element.find('.fc-title').after("<span>"+event.description+"</span>")
0
Sylvain Martin Saint Léon