jquery full calendar http://arshaw.com/fullcalendar を使用して会議を表示しています。
イベントを追加できることを確認したいだけです(新しい会議を作成しましょう
これを使用して特定の日付に php ajax を使用する)。
jquery full calendar http://arshaw.com/fullcalendar を使用して会議を表示しています。
イベントを追加できることを確認したいだけです(新しい会議を作成しましょう
これを使用して特定の日付に php ajax を使用する)。
ユーザーが日(月表示)またはタイムスロット(日/週表示)をクリックしたときにイベントを追加することを想定しています。その場合は、コールバックselect
とeventClick
コールバックを使用して、カレンダーにイベントを追加およびフェッチできます。
このフィドルを確認してください:http: //jsfiddle.net/100thGear/xgSTr/
これにより、jQuery UIダイアログがFullCalendarに組み込まれ、選択した日付がjQueryUIの日付ピッカーに継承されます。
これが役立つかどうか教えてください。
私は 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();
}
}
});