1

jquery full calendar http://arshaw.com/fullcalendar を使用して会議を表示しています。

イベントを追加できることを確認したいだけです(新しい会議を作成しましょう

これを使用して特定の日付に php ajax を使用する)。

4

2 に答える 2

2

ユーザーが日(月表示)またはタイムスロット(日/週表示)をクリックしたときにイベントを追加することを想定しています。その場合は、コールバックselecteventClickコールバックを使用して、カレンダーにイベントを追加およびフェッチできます。

このフィドルを確認してください:http: //jsfiddle.net/100thGear/xgSTr/

これにより、jQuery UIダイアログがFullCalendarに組み込まれ、選択した日付がjQueryUIの日付ピッカーに継承されます。

これが役立つかどうか教えてください。

于 2012-08-17T16:11:09.460 に答える
1

私は fullcalendar を広範囲に使用してきましたが、特定の日付にイベントを追加することはその中心的な機能です。イベント オブジェクトの構造を理解する必要があります ( http://arshaw.com/fullcalendar/docs/event_data/Event_Object/を参照)。具体的にstartは、開始日時の UNIX タイムスタンプに設定し、すべてとしてマークします。日イベントallDay = "true"またはendタイムスタンプを設定します。

Ajax について言及したように、カレンダーにイベントを設定する 1 つの方法は、JSON 経由でイベントをロードすることです。これは次のように実行できます。

$('#calendar').fullCalendar({ events: '/myfeed.php' });

イベント オブジェクトでいっぱいの json 構造をmyfeed.php返します。


さまざまなオプションを使用してカレンダーを設定する方法の完全な例を次に示します

//Initialise the calendar
$('#calendar').fullCalendar({
    header: { left: 'title', center: '', right: 'today agendaDay,agendaWeek,month prev,next'},
    editable: true,
    showTime: true,
    allDayDefault: false,
    defaultView: 'agendaDay',
    firstHour: 8,
    eventColor: '#23478A',
    eventBorderColor:'#000000',
    eventTextColor:'#ffffff',
    //eventBackgroundColor:,
    theme: true, //enables jquery UI theme

    eventSources: [
        '/myfeed.php'
    ],

    //this is when the event is dragged and dropped somewhere else 
    eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) 
    {
        //do something...
    },

    //this is when event is resized in day/week view
    eventResize: function(event,dayDelta,minuteDelta,revertFunc) 
    {
        //do something
    },

    eventClick: function(calEvent, jsEvent, view) 
    {          
        //do something
    },

    eventRender: function( event, element, view ) 
    { 
        //redo the title to include the description
        element.find(".fc-event-title").html(event.title + ": <span>" + event.description + "</span>");
    },

    loading: function(bool) 
    {
        if (bool)
        {
            $("#loading").show();
        }
        else 
        {
            $('#loading').hide();
        }
    }
});
于 2012-08-17T15:28:57.140 に答える