Click here to Skip to main content
Click here to Skip to main content
Add your own
alternative version

Custom JavaScript Event Manager (CJEM)

, 3 Aug 2011
A Custom JavaScript Event Manager Class Designed to Manage Window, Document and Control Events on a Webpage
calendar.zip
css
js
checkbox.zip
img
checkbox2.png
checkbox1.png
cjem.zip
cjemcompressed.zip
dropdown.zip
movableitem.zip
folder4.png
folder3.png
folder1.png
folder2.png
preventdefault.zip
tabcontrol.zip
// Register Collections
$N.R("System.Controls.Calendar");

// Creates a calendar input.
System.Controls.Calendar=function(){return{

  Moy:['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],

  // Initializer
  Init:function() 
  {
    var c = arguments[0][0];
    var o = arguments[0][1];

    // Check for NULLS
    if($NU($O(o))){return;}

    // Attach Events
    $CJEM.Add(c,o,'onmousedown', this.MD);

    return this;
  },

  // Days in month
  DM:function(M,Y)
  {
    return 32-new Date(Y,M,32).getDate();
  },

  // Show Calendar
  SC:function(me,_ID)
  {
    var o = $O(_ID);
    var n = $O(_ID + "input");

    // Current Date
    var dn = new Date();
    n.value = ($NU(n.value)) ? (dn.getMonth()+1 + "/" + dn.getDate() + "/" + dn.getFullYear().toString()) : n.value; 
    var cd = new Date(n.value);
    var fm = new Date(n.value); fm.setMonth(fm.getMonth()+1);
    var dd = new Date(n.value); dd.setDate(1);
    var od = new Date(n.value); od.setMonth(od.getMonth()-1);
    
    // Total Days
    var td = window[me].DM(cd.getMonth(),cd.getYear());

    // First Day
    var fd = (dd.getDay()==0)? 7 : dd.getDay();

    // Past Month
    var pm = window[me].DM(od.getMonth(),od.getYear());
    var c = 1;
    var d = 1;
    var l = 1;
    var s = pm-(fd-1);
    var w = new Array();

    // Create Calendar
    var ca = $C("div");
    ca.setAttribute("id","calendarholder");
    ca.setAttribute("class","calendarholder");

    var html = "<table id=\"calendar\" class=\"calendar\" border=\"0\" cellspacing=\"1\" cellpadding=\"0\">"; 
    html += "<tr><td colspan=\"7\" class=\"calendartop\"><div id=\"clb\" class=\"calendarleftbutton\">&lt;</div><div id=\"crb\" class=\"calendarrightbutton\">&gt;</div><div class=\"calendartitle\">" +  window[me].Moy[cd.getMonth()] + " " + cd.getFullYear().toString() +  "</div></td></tr>";
    html += "<tr><td class=\"calendarhead\">S</td><td class=\"calendarhead\">M</td><td class=\"calendarhead\">T</td><td class=\"calendarhead\">W</td><td class=\"calendarhead\">T</td><td class=\"calendarhead\">F</td><td class=\"calendarhead\">S</td></tr>";

    for(var i=1; i<43; i++)
    {
      if(c==1){ html += "<tr>"; }

      if(i<(fd+1))
      {
	html += "<td id=\"calendarday" + i + "\" class=\"calendarextdays\">" + s + "</td>"; 
	w[i] = (od.getMonth()+1) + "/" + s + "/" + od.getFullYear().toString(); 
	s++; 
      }
      else if (i>(fd+td))
      {  
	html += "<td id=\"calendarday" + i + "\" class=\"calendarextdays\">" + l + "</td>";
	w[i] = (fm.getMonth()+1) + "/" + l + "/" + fm.getFullYear().toString();  
	l++; 
      }
      else
      {
	html += "<td id=\"calendarday" + i + "\" class=\"" + ((d==cd.getDate())?"calendarselected":"calendardays") + "\">" + d + "</td>"; 
	w[i] = (cd.getMonth()+1) + "/" + d + "/" + cd.getFullYear().toString(); 
	d++;
      }

      if(c==7){ html+="</tr>"; c=1; }else{ c++; }
    }

    html += "</table>";
    ca.innerHTML = html;
    $A(o,ca);

    for(i=1; i<43; i++)
    {
      $CJEM.Add(me,"calendarday" + i,'onmousedown', window[me].MD2, null, null, {"id":_ID,"d":w[i]});
    }
  
    $CJEM.Add(me,"clb",'onmousedown', window[me].MD3, null, null, {"id":_ID,"t":-1});
    $CJEM.Add(me,"crb",'onmousedown', window[me].MD3, null, null, {"id":_ID,"t":1});
  },

  // Hide Calendar
  HC:function(M)
  {
    for(var i=1;i<43;i++){$CJEM.Remove("calendarday" + i,'onmousedown', window[M].MD2);}
    $CJEM.Remove("clb",'onmousedown', window[M].MD3);
    $CJEM.Remove("crb",'onmousedown', window[M].MD3);
    $D("calendarholder");
  },

  // Occurs when mousedown2
  MD2:function(src)
  {
    // Declare Vars
    var n = $O(src.UserObject.id + "input"); 
    n.value = src.UserObject.d;    
  },

  //Occurs when mousedown3
  MD3:function(src)
  {
    var n = $O(src.UserObject["id"] + "input");
    var fm = new Date(n.value); fm.setMonth(fm.getMonth()+ src.UserObject["t"]);
    n.value = (fm.getMonth()+1 + "/" + fm.getDate() + "/" + fm.getFullYear().toString());
    window[src.ClassObject].HC(src.ClassObject);
  },

  // Occurs when mousedown.
  MD:function(src)
  {
    // Show Calendar
    var m = $O("calendarholder");

    if($NU(m))
    {
      // Show Calendar
      window[src.ClassObject].SC(src.ClassObject,src.ControlID);
    }
    else
    {
      // Hide Calendar
      window[src.ClassObject].HC(src.ClassObject);
    }
  }

}.Init(arguments);};

// Captured the Window Load Handler.
function WindowLoadHandler(src)
{
  // Reset Calendar Date
  $O("startdateinput").value = "";

  // Create Calendar
  $N.R("calendar1");
  calendar1 = new System.Controls.Calendar("calendar1","startdate");
}

// Capture the Window Load Event one time.
$CJEM.Add('window','window','onload', WindowLoadHandler, 1);

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The GNU General Public License (GPLv3)

Share

About the Author

M@dHatter
Software Developer (Senior) Codevendor
United States United States
Please visit my personal website http://www.codevendor.com for my latest codes and updates.

| Advertise | Privacy | Mobile
Web01 | 2.8.140821.2 | Last Updated 4 Aug 2011
Article Copyright 2011 by M@dHatter
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid