2011-01-19 33 views
3

我在寫一個使用FullCalendar的預約計劃模塊。 因此,主要目標是利用兩種類型的事件:FullCalendar:我可以獲取與EventClick座標相關的開始時間嗎?

  • 預約 - 一個實際調度的約會
  • 可用 - 一個可用的時隙

我修改FullCalendar讓約會類型事件呈現某種顏色,可用類型事件呈現另一種顏色。

的主要目標是讓別人
- 查看可用時隙
- 選擇時隙的全部或部分安排預約型事件
- 能力不允許重疊約會
- 隨時隨地無能爲力用戶點擊外部可用時間段

可用事件先呈現,然後約會類型事件最後一次。
我修改了fullcalendar,以便重疊事件不會並排顯示 - 而是約會事件​​位於可用事件之上。

在eventClick中我首先檢查事件類型。 如果它是一個約會事件,那麼我想編輯選定的約會事件。

如果它是一個可用的事件,那麼我想創建一個新的約會類型事件。

如果它僅僅是一個dayClick事件,則忽略

本來,我會打電話的功能:在選擇
CreateEvent並呼籲UpdateClick上eventClick
這樣的:

select : CreateEvent, 
eventClick : UpdateClick, 

這些功能彈出一個可以添加或編輯事件的對話框。
因爲我只希望他們能夠調度現有可用的事件槽內部的約會,我想也許我可以調用諸如下同程序:

eventClick: function(calEvent, jsEvent, view) { 

if (calEvent.type=='AVAILABLE') { 
CreateEvent;  // schedule new appt. 
} else if (calEvent.type=='APPOINTMENT') { 

UpdateClick; // edit existing appt. 
} 

}

與代碼的問題是例程:CreateEvent需要一個開始和結束時間。

function CreateEvent(start, end, allDay) { 
$('#calendar').fullCalendar('unselect'); 
var id = $(formStart + formEnd); 

$(id).dialog({ 
    title : 'Create', 
    modal : true, 
    autoOpen : true, 
    width : "340px", 
    resizable : false, 
    close : function(event, ui) { 
    $(id).html(''); 
    }, 
    buttons : { 
    "Ok" : function() { 
    title = document.getElementById('titleId').value; 

    $(id).dialog("close"); 
    ev = { 
    title : title, 
    start : start.getTime()/1000, 
    end : end.getTime()/1000, 
    allDay : allDay 
    }; 
    if (!title) { 
    return; 
    } 
    serverSave(ev); 
    }, 
    "Cancel" : function() { 
    $(id).dialog("close"); 
    } 
    } 
});} 

我不想使用事件開始和事件結束,因爲那將是完整的可用時間段。 安排約會時,他們只能使用該可用時間段的一部分。

那麼,你知道如何將實際的鼠標指針Y座標轉換爲約會的開始時間嗎?

和/或

你看到一個更簡單的方法來處理與FullCalendar這種類型的預約安排的?

感謝

+0

我想我找到了這個問題的替代解決方案。當用戶點擊一個可用的時間段時,我的對話框會給他們提供該時間段內的時間選項。他們可以選擇時間範圍,然後創建Appointment類型事件。對不起,這個問題可能會變得有點過分。再次感謝任何已經查看過此內容的人。 – Trent 2011-01-20 19:49:16

回答

0

我知道jsEvent包含了大量的信息,包括日曆時隙內的點擊事件的座標。 (請參閱eventClick documentation about PageX & pageY)它在哪裏談論座標。

想到的另一個解決方案是切換到日視圖,以便選擇/查看可用時間。這個開關甚至可以通過模式類型的彈出來處理。

希望有所幫助。

相關問題