Calendar with Clock
<html>
<head>
<title>DynAPI Examples - Template Manager</title>
<script language="JavaScript" src="./dynapisrc/dynapi.js"></script>
<script language="Javascript">
dynapi.library.setPath('./dynapisrc/');
dynapi.library.include('dynapi.api');
dynapi.library.include('TemplateManager');
dynapi.library.include('HTMLCalendar');
dynapi.library.include('HTMLRollover');
dynapi.library.include('HTMLClock');
dynapi.library.include('HTMLMenu');
</script>
<script language="Javascript">
// HTML code/templates
var template1='<table cellSpacing=0 cellPadding=0 width=340 border=0>\n <tr>\n <td width=10><img src="./dynapiexamples/images/edge.tplt.gif" border=0 width="10" height="10" /></td>\n <td width=320 background="./dynapiexamples/images/edge.tp.gif"><img height=10 src="./dynapiexamples/images/pixel.gif" width=1 border=0 /></td>\n <td width=10><img height=10 src="./dynapiexamples/images/edge.tprt.gif" width="10" border="0" /></td>\n </tr>\n <tr>\n <td width=10 background="./dynapiexamples/images/edge.lt.gif"><img height=1 src="./dynapiexamples/images/pixel.gif" width=10 border=0></td>\n <td vAlign=top width=320 bgColor=#f5f5f5>\n <table cellSpacing=0 cellPadding=4 width="100%" border=0>\n <tr>\n <td noWrap align=center bgcolor="#FFFFFF" width="100%">\n <table border="0" style="border-collapse: collapse" bordercolor="#111111" cellpadding="0" cellspacing="0">\n <tr>\n <td width="100%">\n <img border=0 src="./dynapiexamples/images/htmlcomponents.gif" width="285" height="42"></td>\n </tr>\n <tr>\n <td width="100%" bgcolor="003366">\n {@hmenu}\n </td>\n </tr>\n <tr>\n <td width="100%">\n <table border="0" cellpadding="4" style="border-collapse: collapse" bordercolor="#111111" id="AutoNumber1" cellspacing="3">\n <tr>\n <td valign="top">\n <table border="0" cellpadding="2" cellspacing="1" style="border-collapse: collapse" bordercolor="#111111" width="103" id="AutoNumber2">\n <tr>\n <td width="93" align="center">{@hbtn1}</td>\n </tr>\n <tr>\n <td width="93" align="center">{@hbtn2}</td>\n </tr>\n <tr>\n <td width="93" align="center"><br>\n {@hclk}</td>\n </tr>\n </table>\n </td>\n <td valign="top">{@hcal}</td>\n </tr>\n </table>\n </td>\n </tr>\n <tr>\n <td width="100%" align="right">{@lyr1}</td>\n </tr>\n <tr>\n <td width="100%" align="center" style="border-top: 1px solid #000000" bgcolor="#F5F5F5"><b>\n <font face="Arial, Helvetica, sans-serif" size="2" color="#800000">DynAPI</font></b><font color=#333333 \n face="Arial, Helvetica, sans-serif" size=2> | {@hlink}</font></td>\n </tr>\n </table> \n </td>\n </tr>\n </table>\n </td>\n <td width=10 background="./dynapiexamples/images/edge.rt.gif"><img height=1 src="./dynapiexamples/images/pixel.gif" width=10 border=0></td>\n </tr>\n <tr>\n <td width=10><img height=10 src="./dynapiexamples/images/edge.bmlt.gif" width=10 border=0></td>\n <td width=320 background="./dynapiexamples/images/edge.bm.gif"><img height=10 src="./dynapiexamples/images/pixel.gif" width=1 border=0></td>\n <td width=10><img height=10 src="./dynapiexamples/images/edge.bmrt.gif" width=10 border=0></td>\n </tr>\n</table>';
var tp = new Template(template1,150,40,400,360);
var imgPath = "./dynapiexamples/images/";;
var btn_home = imgPath+"btn_home_";
var btn_contact = imgPath+"btn_contact_";
var btnE = {
onclick:function(e){
alert("Hello from "+e.getSource()._tmplFld)
}
};
// HTMLMenu
var mbar;
tp.addChild(new HTMLMenu(),'hmenu');
// Main Menu
mbar= tp.hmenu.createMenuBar('main',40,20);
mbar.addItem(null,'File','file');
mbar.addItem(null,'Edit','edit');
mbar.addItem(null,'View','view');
mbar.addItem(null,'Tools','tools');
mbar.addItem(null,'Help','help');
//File menu
mbar = tp.hmenu.createMenuBar('file',130);
mbar.addItem(null,'New');
mbar.addItem(null,'Open',null,'alert("Open files")',null,null,'navy','red');
mbar.addItem(null,'Save');
mbar.addItem(null,'Save As ...');
mbar.addItem(null,'Recent Files','recent');
mbar.addItem(null,'Exit');
//Recent menu
mbar = tp.hmenu.createMenuBar('recent',120);
mbar.addItem(null,'Dynapi.js');
mbar.addItem(null,'Quickref.html');
mbar.addItem(null,'Changelog.html');
mbar.addItem(null,'Index.html');
//edit menu
mbar = tp.hmenu.createMenuBar('edit',120);
mbar.addItem(null,'Undo');
mbar.addItem(null,'Cut');
mbar.addItem(null,'Copy');
mbar.addItem(null,'Paste');
//view menu
mbar = tp.hmenu.createMenuBar('view',130);
mbar.addItem(null,'Go');
mbar.addItem(null,'Stop');
mbar.addItem(null,'Toolbars','tbar');
mbar.addItem(null,'Status Bar');
// tbar
mbar = tp.hmenu.createMenuBar('tbar',120);
mbar.addItem(null,'Header');
mbar.addItem(null,'Footer');
mbar.addItem(null,'Standard');
mbar.addItem(null,'Drawing');
//tools menu
mbar = tp.hmenu.createMenuBar('tools',120);
mbar.addItem(null,'Options');
mbar.addItem(null,'Macro');
mbar.addItem(null,'Convert...');
mbar.addItem(null,'Run...');
//HTMLRollovers
tp.addChild(new HTMLRollover(null,85,29,btn_home+'off.gif',btn_home+'on.gif'),'hbtn1');
tp.addChild(new HTMLRollover(null,85,29,btn_contact+'off.gif',btn_contact+'on.gif'),'hbtn2');
tp.hbtn1.addEventListener(btnE);
tp.hbtn2.addEventListener(btnE);
//HTMLHyperLink
tp.addChild(new HTMLHyperLink(null,'Click Here','http://dynapi.sf.net'),'hlink');
tp.hlink.startFlash('blue','black')
tp.hlink.addEventListener({
onclick:function(e){
var o=e.getSource();
alert("A link to DynAPI's website")
// o.allowEvent(); // By default HyperLink events are canceled (return false)
}
});
//HTMLClock
tp.addChild(new HTMLClock(),'hclk');
// HTML Calender
hc = tp.addChild(new HTMLCalendar(),'hcal');
// modify colors
hc.borCol = '#000000';
hc.titleBgCol ='maroon';
hc.titleFgCol ='white';
hc.wkDayBgCol ='beige';
hc.selBorCol = '#CCCCCC';
hc.selBgCol = '#DEDEFF';
hc.selTDayBgCol = 'beige';
hc.addEventListener({
onchange:function(e){
var o=e.getSource();
var l=o.parent.lyr1;
if(l) {
var dt = o.getDate();
dt=(!dt)? '':(dt.getMonth()+1)+'/'+dt.getDate()+'/'+dt.getFullYear();
o.parent.lyr1.setHTML('<font face="arial" size="2">Date is '+dt+'</font>');
}
}
});
//DynLayer
tp.addChild(new DynLayer(null,0,0,200,20),'lyr1');
dynapi.document.addChild(tp);
</script></head>
<body>
<script>
dynapi.document.insertAllChildren();
</script>
</body>
</html>
dynapi.zip( 791 k)Related examples in the same category