I just did something very similar (also a calendar) and what I came up
with was this: I had a single overlay DIV hidden at the top of the
page, and after a click on an empty cell, I would load the overlay
with the Create Appointment screen, use Element.clonePosition() to set
the top and left of the overlay to match the cell that was clicked on,
and then Effect.Grow to cause it to appear.
For an existing appointment, the same thing would happen except that I
would load the Edit Appointment screen by following the link on the A
tag that represented the existing appointment.
Here's the relevant code, note that there are some optimizations I
have not made (substitute Event.findElement for my business with the
tagName attribute). References to combinator() are simply setting up
combo box behavior on select elements.
document.observe('click',function(evt){
var elm = evt.element();
var o = $('overlay');
if($('table_week') && elm.descendantOf($('table_week'))){
evt.stop();
if(elm.tagName.toLowerCase() == 'a'){
if(o.visible()) o.hide();
o.clonePosition(elm.up('td'),{setWidth:false,setHeight:false});
new Ajax.Updater('overlay',elm.href,{
onComplete:function(){
o.grow({direction:'top-left',
duration:0.5,
afterFinish:function(){
o.down('img.close').show();
o.down('form').focusFirstElement();
o.setOpacity(0.999);
}
});
combinator();
},
evalScripts: true
});
}else{
if(elm.tagName.toLowerCase() != 'td') elm =
elm.up('td');
if(elm.id && !elm.hasClassName('disabled')){
evt.stop();
if(o.visible()) o.hide();
o.clonePosition(elm,{setWidth:false,setHeight:false});
var parts = elm.id.split(/_/);
var date = parts[1] + '-' + parts[2] + '-' + parts[3] + ' ' +
parts[4];
new
Ajax.Updater('overlay','appointments/create',{
parameters:{
start_at: date +
':00:00',
calendars_id:
$F('calendars_id'),
parent: elm.id
},
onComplete:function(){
o.grow({direction:'top-left',
duration:0.5,
afterFinish:function(){
o.down('img.close').show();
o.down('form').focusFirstElement();
o.setOpacity(0.999);
}
});
combinator();
},
evalScripts: true
});
}
}
}
});
$('overlay').observe('click',function(evt){
if(evt.element().hasClassName('close')) this.hide();
});
Walter
On Jan 6, 2010, at 7:42 AM, bill wrote:
I am trying am ambitious project - a scheduling system (as part of
another application) and need some assistance.
Via AJAX I will load a div with:
a header div
a main div.
The main div will contain 0..40 small divs that are displayed as a 7
day schedule.
I can do all this.
The user will click on a spot in the main div to create an
appointment or will click on one of the small divs that represent
existing appointments.
now for the part with which I need help.
If they click on a spot in the main div that does not have a
appointment div I need to determine the coordinates of the click
both in terms of the main div and the viewport (as the content of
the main div will scroll) so I can display a div near the click with
a form to fill in to create an appointment.
If they click on an existing appointment div I need to determine the
coordinates and the div's ID.
From what little I know about prototype I presume I need an observer
of the main div, but I do not understand how to write it and then
process the event information.
Suggestions, links, and/or a tutorial would be much appreciated.
--
Bill Drescher
william {at} TechServSys {dot} com
--
You received this message because you are subscribed to the Google
Groups "Prototype & script.aculo.us" group.
To post to this group, send email to [email protected]
.
To unsubscribe from this group, send email to [email protected]
.
For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en
.
--
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
