I am writing an appointment scheduling module using FullCalendar. Thus, the main goal is to use two types of events:
- Destination - for the actual planned appointment
- Available - for an available time interval
I changed FullCalendar so that the events of the Appointment type are displayed in a specific color, and in the available event types, a different color.
The main goal is to allow someone - to view the available time intervals
- select all or part of this time interval to schedule an appointment type event
- the ability to prohibit duplication of Assignments
- do nothing at any time when the user clicks outside the available time interval
Available events are displayed first, and then events of the Destination type.
I modified fullcalendar so that overlapping events do not appear side by side, but rather Appointment events lay on top of the available events.
Inside eventClick, I first check the type of event. If this is an Appointment event, then I would simply edit the selected Appointment event.
"", "".
dayClick,
: CreateEvent on Select
UpdateClick eventClick
:
select : CreateEvent,
eventClick : UpdateClick,
, .
, , , , , , :
eventClick: function(calEvent, jsEvent, view) {
if (calEvent.type=='AVAILABLE') {
CreateEvent;
} else if (calEvent.type=='APPOINTMENT') {
UpdateClick;
}
}
, : 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");
}
}
});}
Event Start Event End, .
.
, , Y ?
/
FullCalendar?