41

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

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
            }
        })
    })
})

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

ここに画像の説明を入力

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

ここでの問題は、各イベントが (例のように) 異なる週に分割される可能性があり、各週に異なる DOM イベントがあり (これは理にかなっています)、関連するクラスがないことです。

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

4

4 に答える 4

63

各イベントに異なる色を付けるには、問題に取り組むために使用できるいくつかのアプローチがあります。

  1. イベント フィード「/bookings-feed.php」を更新し、イベント オブジェクトhttp://arshaw.com/fullcalendar/docs/event_data/Event_Object/に color(background and border)、backgroundColor、textColor、または borderColor を追加します。

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

  2. イベント フィードを分離して更新し、eventSources を使用します。これにより、イベントを色とテキストの色でグループ化できます。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...
    ]
});

于 2013-09-04T17:30:09.570 に答える
23

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');
        }
    },
于 2013-09-05T13:18:27.560 に答える