Calendar control ?

[Jarod]

Hey
Is there a way to make calendar "roll back" so when the user don't need it
should hide a lot of dates. Or maybe some roll back... I want to have
calendar in gridView but takes so much space that it wouldn't feet even if I
have page like 1280pixels wide ( there is a lot of diffrent fields too but
calendar really takes space ).
Jarod

[Julien]

I've resolved this problem using javascript. I've put my calendar into
a <div> tag with position:absolute, and display:none style property.
Just next to it, i've put an image with javascript function on the
onClick attribute. When clicking the image, the javascript function
change 'display' of the div to 'inline-block', and then calculate the
position attributes (top & left) to add to the styles attributes of my
div. So anywhere my image is put, any click on it make my calendar
appear just next to it, just like a little popup.

[Jarod]

> I've resolved this problem using javascript. I've put my calendar into

a <div> tag with position:absolute, and display:none style property.
Just next to it, i've put an image with javascript function on the
onClick attribute. When clicking the image, the javascript function
change 'display' of the div to 'inline-block', and then calculate the
position attributes (top & left) to add to the styles attributes of my
div. So anywhere my image is put, any click on it make my calendar
appear just next to it, just like a little popup.

Would you share some code ? Or link ? Or even email me with the solution ;)
Jarod

[Julien]

My JS code :
/* Affiche ou masque la balise div contenant le calendrier.
En cas d'affichage, elle la positionne également correctement sur la
fenêtre.

*/
function afficheCalendrier(eltReference, idDivCalend)
{
var divCalend = document.getElementById(idDivCalend);
if (divCalend.style.display == 'none')
{
var pos = WindowPositionDatePicker(eltReference);
divCalend.style.display = 'inline';
divCalend.style.pixelLeft = pos.x;
divCalend.style.pixelTop = pos.y + 20;

if ((divCalend.style.pixelLeft + divCalend.clientWidth) >=
document.body.clientWidth)
{
divCalend.style.pixelLeft = ((divCalend.style.pixelLeft -
divCalend.clientWidth) + eltReference.clientWidth);
}
}
else
{
divCalend.style.display = 'none';
}
}

/* Retourne les coordonnées absolues d'un élément

*/
function WindowPositionDatePicker(elt)
{
var pos = new Object;
pos.x = 0;
pos.y = 0;
while (elt.offsetParent != null && elt.id.search('WebPart') != 0)
{
pos.x += elt.offsetLeft;
pos.y += elt.offsetTop;
elt = elt.offsetParent;
}
return pos;
}

and then I've just put an image with
onclick="afficheCalendrier(this,'myDiv')" and also a div : <div
id="myDiv" style="display:none; position:absolute"> <asp:Calendar
....></div>

I put "this" as first parameter in my afficheCalendrier method, because
it allows as first parameter a reference element. As you will see (I
hope it will works fine), the div (which is abolute positionned) is
displayed just below the image. It's possible because the image is the
reference element.

I haven't test it very much, so perhaps you could had some
improvements. Tell me !