fathertorque: "Thanks works well in combination with shortcut and template month"

eleger81: "Yes it does work well.  Thank you so much for putting this together so quickly.  I made a few tweaks myself to the code, but overall works great.  "

fathertorque: "which tweaks? "

eleger81: "Basically I just made it a bit smaller, customized some of the colors for our home page, deleted the "Add Event" link at the top of the small calendar, and provided a link underneath that says, "View Full Calendar" (that links to the one that provides the feed).  This way it really is just a small overview of our main calendar.  It's very handy to have! "

fathertorque: "Yeah I will need to do that... Could you post your work? "

eleger81: "
Here's the basics of what I have so far.  Feel free to make any other edits and changes you see fit.  Note that I highlighted the important parts of the code in bold (namely the calendar's width, the day blocks' width/height, and the url to the full calendar).  If you find anything else that's worth doing/adding, please let me know.  Thanks!!!

****************************************

<tmpl_if admin>
    <p><tmpl_var adminControls></p>
</tmpl_if>

<tmpl_if displayTitle>
    <h1><tmpl_var title></h1>
</tmpl_if>

<tmpl_if description>
    <tmpl_var description>
</tmpl_if>


<table cellspacing="0" cellpadding="0" width="100px" id="mCAL" align="center">
<tr>
    <td>
        <div  class="curMonth">
            <tmpl_var monthName> <tmpl_var year>
        </div>
    </td>
</tr>
<tr>
    <td style="width:100%">
   
    <!-- the calendar table -->
        <table id="month" width="100%" cellspacing="2" cellpadding="0">
        <!-- day names -->
        <tr><tmpl_loop dayNames>
            <th><tmpl_var dayAbbr></th>
        </tmpl_loop></tr>
       
        <!-- the grid -->
        <tmpl_loop weeks><tr>
        <tmpl_loop days><td><div class="<tmpl_if dayMonth>active</tmpl_if><tmpl_if dayCurrent> current</tmpl_if>">
            <tmpl_if dayMonth>
               <a class="number" href="<tmpl_var dayUrl>"><tmpl_var dayMonth></a>
            <tmpl_if events>
   <tmpl_loop events></tmpl_loop>
   
   <a href="#" id="event_<tmpl_var dayMonth>" class="moreButton" onmouseover="return showEvents('overlay<tmpl_var dayMonth>');">
    <img src="<tmpl_var extrasUrl>/wobject/Calendar/images/more.gif" />
   </a>
   
            </tmpl_if> <!--/events-->
            </tmpl_if> <!--/day-->
        </div></td></tmpl_loop> <!--/days-->
        </tr></tmpl_loop>
    </table>
</tr>
</table>
<center><a href="/string/to/main/calendar">View Full Calendar...</a></center>
<tmpl_loop weeks><tmpl_loop days><tmpl_if events>
      <div id="overlay<tmpl_var dayMonth>" class="moreDisplay">
         <div>
            <ul>
   <tmpl_loop events>
   <li><a href="<tmpl_var eventUrl>"><tmpl_var eventTitle></a><br/></li>
            </tmpl_loop>
   </ul>           
      </div>
   </div>
</tmpl_if></tmpl_loop></tmpl_loop>

****************************************

<style type="text/css">
  #mCAL * {
   margin:0px;   
  }
  #mCAL td {
   font-size:10px;
   font-family:arial;
  }
  #mCAL .tab {

   border-bottom-style: none;
   font-weight: bold;
   padding: 2px 15px 0px 15px;
   text-align: center;
   background-color: #E9ECF3;
   -moz-border-radius-topLeft: 10px;
   -moz-border-radius-topRight: 10px;
   color: #7588B5;
   text-decoration: none;
   font-size: 10pt;
   display: block;
   float: left;
   margin-right: 5px;
  }
  #mCAL .tab:hover {
   color:black;
  } 
  #mCAL .active {
   background-color:#DFE3EE;
   color:#404F77;
   border-bottom:solid #DFE3EE 1px;
  } 
  #mCAL .controls {
   float:right;
   vertical-align:bottom;
  }
  #mCAL a {
   font-size:11px;
   color:#517AC8;
  } 
  #mCAL .months {
   text-align:center;
   background-color:#DFE3EE;   
  }
  #mCAL .months a {
   color:#517AC8;
   text-decoration:none;
  }
  #mCAL .months .monthLink {
   text-decoration:none;   
   padding-left:5px;
   padding-right:5px;
   color:#AAB8D5;
   font-size:12px;
   font-weight:bold;
  } 

  #mCAL .months .current, #mCAL .months .monthLink:hover {
   font-weight:bold;
   color:#517AC8;
   background-color:#fff;   
   -moz-border-radius:5px;
  }
  #mCAL .curMonth {
   text-align:center;
   margin: 2px 0px;
   background-color:#517AC8;
   color:white;
   font-size:14px;
   font-weight:bold;
  }

 

/**** Month view ****/
/* Table */
#mCAL table#month
{

}

#mCAL table#month *
{
 padding:  0px;
 margin:   0px;
}

#mCAL table#month a
{
 text-decoration: none;
}

#mCAL table#month th
{
 -moz-box-sizing:border-box;
 width:   30px;
 background-color: #517AC8;
 text-align:  center;
 font-weight:  bold;
 color:   white; 
}

#mCAL table#month div
{
 position:  relative;
 width:   30px;
 height:   30px;
 margin:   0px;
 background-color: #E9ECF3;
}

#mCAL table#month ul
{ 
 overflow:  hidden;
}

#mCAL table#month .active
{
 -moz-border-radius-topLeft: 8px;
 -moz-border-radius-bottomLeft: 8px;
 -moz-border-radius-bottomRight: 8px;
 vertical-align:  top; 
 background-color: #CCD2E3;
 border:   solid #CCD2E3 1px;
}

#mCAL table#month .current
{
 background-color: #FFE4B3;
 border-color:  orange;
}

#mCAL table#month .number
{
 -moz-border-radius-bottomLeft:5px;
 display:  block;
 position:  absolute;
 top:   0px;
 right:   0px;
 height:   10px;
 width:   10px;
 background-color: #516BA4;
 color:   white;
 text-align:  center;
 vertical-align:  middle;
 padding:  0px 3px 2px 2px;
 font-weight:  bold;
}

#mCAL table#month .current .number
{
 background-color: orange;
 color:   black;
}

#mCAL table#month .events
{
 padding:  3px;
 padding-top:  8px;
 font-weight:  bold;   
}

#mCAL table#month .events a
{
 color:   #4F4F4F;
 text-decoration: none;
 font-size:  9px;
}

#mCAL table#month .moreButton
{
 border-style:  none;
 position:  absolute;
 bottom:   0px;
 width:   100%;
 height:   9px;
 background-color: #517AC8; 
 font-size:  5px;
 text-align:  center;
 -moz-border-radius-bottomLeft: 8px;
 -moz-border-radius-bottomRight: 8px;
}

#mCAL table#month .moreButton img
{
 border:   none;
}


/* MORE STYLES */

.moreDisplay
{
 position:   absolute;
 border:   solid orange 1px;
 border-top:  solid orange 2px;
 font-family:  arial;
 font-size:  10px;
 width:   225px;
 height:   auto;
 padding:  2px;
 background-color: #FFD3A8;
 color:   black;
 display:        none;
 z-index:   100;
}

.moreDisplay a {
   color: black;
}

* html body table#month td { position: relative; z-index: 1; }
</style>

<script type="text/javascript" src='&#94;Extras;yui/build/yahoo/yahoo.js'></script>
<script type="text/javascript" src='&#94;Extras;yui/build/event/event.js' ></script>

<script>
<!--
//<![CDATA[
 
   //-----------------------------------------------------------------------------------    
   function isSelfOrChildOf(parent,node) {
      if(parent == node) return true;
   if(parent == null || node == null) return false;
   var childLen = parent.childNodes.length;
      for (var i = 0; i < childLen; i++) {
         var child = parent.childNodes[i];
      if(child.nodeType != 1) continue; //Skip text and attribute nodes
      if(isSelfOrChildOf (child,node)) {
         return true;
      }
      }
      return false;
   } 
  
   //-----------------------------------------------------------------------------------  
   function findParentNodeFromChild (node,tagName) {
      if(node == null) return node;
   var parent = node.parentNode;
   if(parent == null) return node;
   if(parent.tagName == tagName) {
      return parent;
   }
   return findParentNodeFromChild (parent,tagName);
   }
  
  
   //-----------------------------------------------------------------------------------  
   function showEvents(eventId) {
   var evt = YAHOO.util.Event.getEvent();
      var targ = YAHOO.util.Event.getTarget(evt);
  
   var elem = document.getElementById(eventId);
   var td;
      var pPagex;
      var pPagey;
         
      //IE is stupid
      var isIE = navigator.userAgent.indexOf("MSIE") > -1;
      var isIE7 = navigator.userAgent.indexOf("MSIE 7") > -1;
      if(isIE && !isIE7) {
         //IE 6 and below don't register offsetTop or offsetLeft for the div
         td = findParentNodeFromChild(targ,"TD");
         pPagex = td.offsetTop;
         pPagey = td.offsetLeft;
      } else {
         var cDiv = findParentNodeFromChild(targ,"DIV");
      pPagex = cDiv.offsetTop;
      pPagey = cDiv.offsetLeft;
         td = findParentNodeFromChild(cDiv,"TD");
      }
     
      var tdHeight = td.offsetHeight;

   var eventX = tdHeight + pPagex;
   var eventY = pPagey;
   
   elem.style.top = eventX + 'px';
   elem.style.left = eventY + 'px';
   elem.style.display = "block";
     
   //Register listener
   YAHOO.util.Event.addListener(document.body,"mousemove",hideEvents,{ "targ":targ, "elem": elem, "td": td })
   return false;
   }
  
   //-----------------------------------------------------------------------------------  
   function hideEvents(e, el) {
   if(!e || !el) return;
  
   var elem = el.elem;
   var td = el.td;
   var targ = el.targ;
  
   var evtTarg = YAHOO.util.Event.getTarget(e);
  
   var inDiv = isSelfOrChildOf(elem,evtTarg);
      var inTd = isSelfOrChildOf(td,evtTarg);
   var inTarget = isSelfOrChildOf(targ,evtTarg);
  
   if(inDiv || inTd || inTarget) {
      //do nothing
   } else {
      elem.style.display = "none";
   YAHOO.util.Event.removeListener (document.body,"mousemove",hideEvents);   
   }
   return false;
   }
  
//]]>
-->     
</script>
"

fathertorque: "
Mmmh for a tiny calendar I think a much better approach would be to use the Calendar component from YUI http://developer.yahoo.com/yui/calendar/ 
"