FullCalendar: Can I get start time related to coordinates of an EventClick?

I am writing an Appointment Scheduling module using FullCalendar. Thus, the main goal is to utilize two types of events:

• Appointment -- for an actual scheduled appointment
• Available -- for an available timeslot

I modified FullCalendar so that Appointment type events are rendered a certain color, and Available type events another color.

The main goal is to allow someone to

- view available timeslots

- select all or part of that timeslot to schedule an Appointment type event

- ability to disallow overlapping Appointments

- do nothing anytime a user clicks outside an Available timeslot

The Available events are rendered first, then the Appointment type events last.

I modified fullcalendar so that overlapping events do not display side-by-side - but rather the Appointment events lay on top of the Available events.

Inside the eventClick I am first checking the event type. If it is an Appointment event, then i would like to just edit that selected Appointment event.

If it is an Available event, then i would like to create a new Appointment type event.

If it is just a dayClick event, then ignore

Originally, i would call function: CreateEvent on Select

and call UpdateClick on eventClick

like this:

select : CreateEvent,
eventClick : UpdateClick,

Those functions popup a dialog where they can either add or edit an event.

Since I only want them to be able to schedule an Appointment inside an existing Available event slot, I thought maybe i could call the same procedures like below:

eventClick: function(calEvent, jsEvent, view) {

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

 UpdateClick;   // edit existing appt.
}

}

The problem with that code is that the routine: CreateEvent requires a start and end ti开发者_运维知识库me.

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

I do not want to use the Event Start and Event End, since that will be the full available time-slot. When scheduling an appointment, they may only use part of that Available timeslot.

So, do you know how to convert the actual mouse pointer Y coordinate to a starting time for the appointment?

And/Or

Do you see a much easier way to handle this type of appointment scheduling with FullCalendar?

Thanks

I know that the jsEvent contains a lot of information including the coordinates of the click event within the calendar slot. (See eventClick documentation about PageX & pageY) where it talks about the coordinates.

Another solution that comes to mind would be to switch to a day view so it would be easier to select/see a time that is available. This switch could be handled by a modal-type pop-up even.

Hope that helps.