web-dev-qa-db-ja.com

jqueryフルカレンダー：フロントエンドからの各イベントに異なる色を設定します

これは私がプラグインを使用している方法です：

jQuery( document ).ready( function() {
            jQuery('#booking-calendar').fullCalendar({
                header: {
                    left: 'prev,next',
                    center: 'title',
                    right: 'month,basicWeek,basicDay'
                },
                editable: true,
                events: '<?php echo get_template_directory_uri() ?>/bookings-feed.php'
            });

            jQuery( '#apartment-selector' ).change( function() {
                apartment = jQuery( this ).val()
                jQuery('#booking-calendar').fullCalendar( 'removeEvents' )
                jQuery('#booking-calendar').fullCalendar( 'addEventSource',  {
                    url: '<?php echo get_template_directory_uri() ?>/bookings-feed.php',
                    type: 'POST',
                    data: {
                        apartment : apartment
                    }
                })
            })
        })

そして、これはどのように見えるかです：

enter image description here

ご覧のとおり、イベントの開始と終了を追跡するのは少し難しいので、各イベントの色を変更することを考えていました。

ここでの問題は、各イベントが異なる週に分割され（例のように）、各週に異なるDOMイベントがあり（意味がある）、関連するクラスがないため、

イベントごとに異なる色を付けるにはどうすればよいですか？

ありがとう！

javascriptjquerycolorsfullcalendar
32
Toni Michel Caubet

各イベントの色を変えるには、問題に取り組むためのアプローチがいくつかあります。

  1. イベントフィード '/bookings-feed.php'を更新し、色（背景と境界線）、backgroundColor、textColor、またはborderColorをイベントオブジェクトに追加します http://arshaw.com/fullcalendar/docs/event_data/Event_Object / 。

    events: [{
    title  : 'event1',
    start  : '2010-01-01',
    color  : '#000'
}]

  2. EventSourceを使用するには、イベントフィードを分離して更新します。これにより、色とテキストの色でイベントをグループ化できます。 http://arshaw.com/fullcalendar/docs/event_data/events_array/ 。

    $（ '＃calendar'）。fullCalendar（{

    eventSources: [

    // your event source
    {
        events: [ // put the array in the `events` property
            {
                title  : 'event1',
                start  : '2010-01-01'
            },
            {
                title  : 'event2',
                start  : '2010-01-05',
                end    : '2010-01-07'
            },
            {
                title  : 'event3',
                start  : '2010-01-09 12:30:00',
            }
        ],
        color: 'black',     // an option!
        textColor: 'yellow' // an option!
    }

    // any other event sources...

]
49
MarCrazyness

EventAfterRenderコールバックを使用してみてください。 ドキュメント を確認してください。

このように、ランダムな選択に基づいて「全体」イベントを取得し、その色を操作します。

ちょうどあなたがアイデアを得ることができるように、私はこのコールバックで作業しますが、色はイベントの日に基づいて変更されます。イベントがスケジュールされている、起こっている、または既に起こっていた場合、色が変わります。

eventAfterRender: function (event, element, view) {
        var dataHoje = new Date();
        if (event.start < dataHoje && event.end > dataHoje) {
            //event.color = "#FFB347"; //Em andamento
            element.css('background-color', '#FFB347');
        } else if (event.start < dataHoje && event.end < dataHoje) {
            //event.color = "#77DD77"; //Concluído OK
            element.css('background-color', '#77DD77');
        } else if (event.start > dataHoje && event.end > dataHoje) {
            //event.color = "#AEC6CF"; //Não iniciado
            element.css('background-color', '#AEC6CF');
        }
    },
21
Boga

イベントには、開始、終了、オーバーラップ、レンダリングなどのプロパティがあるオブジェクトが一覧表示されます。また、イベントの色を指定できるcolorというプロパティもあります。

カラープロパティが使用される以下のデモコードをご覧ください。

        events: [
            {
                start: '2017-11-24',
                end: '2017-11-28',
                overlap: false,
                rendering: 'background',
                color: '#257e4a'
            },
            {
                start: '2017-11-06',
                end: '2017-11-08',
                overlap: false,
                rendering: 'background',
                color: '#ff9f89'
            }]
2
yeisonherbert