[Dynapi-Help] Basic Question

[Samuel, Michael M]

Title: Basic Question

I've setup a layer that pops up the calendar when you click on a button. My problem is that I'm referencing the clientX and clientY and while this works when the page hasn't been scrolled, once it has - the layer is positioned from the x/y at the top of the page (thus incorrectly positioned).

I'd like the layer to be displayed exactly where the mouse click occurs.

function writeCal(strObject,e){
    var x=y=0;
    x = e.clientX; // this gets the values of the event
    y = e.clientY;
        lyrCal.moveTo(x,y);
        currStrObject = eval(strObject)
        lyrCal.setHTML(Calendar(-1,-1,'lyrCal'));
        lyrCal.setVisible(true);
}

Currently the calendar is in a separate JS file - it is not a widget as such. Is someone willing to convert it into a widget? The aim of the calendar is to pop open at the current month and allow the user to click on a date to fill a text box. They also have the ability to move forward one month or one year (backwards too)...

Thanks

I've attached the calendar script as well... It's a bit of a mash - but that's the way I do things! :) I've had to change the extension to .txt since my exchange admin doesn't like the sending of JS files - something to do with email virii! :)

Mike

 

function Calendar(Month,Year,lyrName)
{
     if (Month == -1 || Year == -1){
                Month = thisMonth;
                Year = thisYear;
     }
     var output = '';

     output += "<table><tr><td align=left>";
     output += "<a href='javascript:void(0)' 
onClick='changeCal(\"py\","+Month+","+Year+",\""+lyrName+"\");'>&lt;&lt;<\/a>&nbsp;&nbsp;&nbsp;"
     output += "<a href='javascript:void(0)' 
onClick='changeCal(\"pm\","+Month+","+Year+",\""+lyrName+"\");'>&lt;<\/a><\/td><td>"
     output += "<font color='#0000BB' face='Arial' size='-1'><b>" + names[Month] + " " 
+ Year + "<\/b><\/font><\/td><td align=right>";
     output += "<a href='javascript:void(0)' 
onClick='changeCal(\"nm\","+Month+","+Year+",\""+lyrName+"\");'>&gt;<\/a>&nbsp;&nbsp;&nbsp;"
     output += "<a href='javascript:void(0)' 
onClick='changeCal(\"ny\","+Month+","+Year+",\""+lyrName+"\");'>&gt;&gt;<\/a><\/td><\/tr><tr><td
 align=center colspan=3>";

     firstDay = new Date(Year,Month,1);
     startDay = firstDay.getDay();

     if (((Year % 4 == 0) && (Year % 100 != 0)) || (Year % 400 == 0))
          days[1] = 29; 
     else
          days[1] = 28;

     output += "<table callspacing=0 cellpadding=0 border=1 bordercolordark='#FFFFFF' 
bordercolorlight='#C0C0C0' bgcolor='silver'><tr>";

     for (i=0; i<7; i++)
     {
          output += "<td width=25 align=center valign=middle><font size=-1 
color='#000000' face='Arial'><b>" + dow[i] + "<\/b><\/font><\/td>";
     }

     output += "<\/tr><tr align=center valign=middle>";

     var column = 0;
     var lastMonth = Month - 1;
     if (lastMonth == -1)
          lastMonth = 11;
     for (i=0; i<startDay; i++)
     {
          output += "<td width=25 height=30><font size=-1 color='#808080' 
face='Arial'>" + (days[lastMonth]-startDay+i+1) + "<\/font><\/td>";
          column++;
     }

     for (i=1; i<=days[Month]; i++)
     {

          if ((i == thisDay)  && (Month == thisMonth) && (Year == thisYear))
               output += "<td width=25 height=30 bgcolor='#FFFFFF' 
bordercolordark='#000000' bordercolorlight='#C0C0C0'><font size=-1 color='#FF0000' 
face='Arial'><b><a href='javascript:void(0)' 
onClick='setDate("+i+","+Month+","+Year+")'>" + i + "<\/a><\/b><\/font><\/td>";
          else
               output += "<td width=25 height=30><font size=-1 color='#0000BB' 
face='Arial'><a href='javascript:void(0)' 
onClick='setDate("+i+","+Month+","+Year+",\""+lyrName+"\")'>" + i + 
"<\/a><\/font><\/td>";
          column++;
          if (column == 7)
          {
               output += "<\/tr><tr align=center valign=middle>";
               column = 0;
          }
     }

     if (column > 0)
     {
          for (i=1; column<7; i++)
          {
               output += "<td width=25 height=30><font size=-1 color='#808080' 
face='Arial'>" + i + "<\/font><\/td>";
               column++;
          }
     }
     output += "<\/tr><\/table>";
     output += "<\/form><\/td><\/tr><\/table>";
     
     return output;
}

function array(m0, m1, m2, m3, m4, m5, m6, m7, m8, m9, m10, m11)
{
     this[0] = m0; this[1] = m1; this[2]  = m2;  this[3]  = m3;
     this[4] = m4; this[5] = m5; this[6]  = m6;  this[7]  = m7;
     this[8] = m8; this[9] = m9; this[10] = m10; this[11] = m11;
}

function changeCal (Direction, Month, Year, lyrName) {
        if (Direction == 'pm'){ //Go to the Previous Month
                if (Month == 0){Month = 11; Year -= 1;}else{Month -= 1;}
        }
        if (Direction == 'nm'){ //Go to the Next Month
                if (Month == 11){Month = 0; Year += 1;}else{Month += 1;}
        }
        if (Direction == 'py'){ //Go to the Previous Year
                Year -= 1
        }
        if (Direction == 'ny'){ //Go to the Next Year
                Year += 1
        }
        var strOutput = '';
        strOutput = Calendar(Month,Year,lyrName);
        eval(lyrName+".setHTML(strOutput)")
}

function setDate (Day, Month, Year, lyrName){
        currStrObject.value = Day+"/"+(Month+1)+"/"+Year;
        lyrName = eval(lyrName);
        lyrName.setVisible(false);
}

function y2k(number) { return (number < 1000) ? number + 1900 : number; }

var names = new 
array("January","February","March","April","May","June","July","August","September","October","November","December");
var days  = new array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var dow   = new array("Sun","Mon","Tue","Wed","Thu","Fri","Sat","","","","","");
var today     = new Date();
var thisDay   = today.getDate();
var thisMonth = today.getMonth();
var thisYear  = y2k(today.getYear());