|
Título: Calendario Publicado por: Esprinter en 1 Marzo 2011, 15:26 pm Hola
Mi problema es que quiero poner un calendario en una web pero no sé cómo insertar el código del calendario en el código de la web. Codigo Web <f!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <TITLE></TITLE> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <LINK HREF="style.css" TYPE="text/css" REL="stylesheet"> </HEAD> <BODY> <table cellspacing="0" cellpadding="0" align="center"> <tr> <td style="width:766px; height:780px"> <table cellspacing="0" cellpadding="0"> <tr> <td style="width:42px; height:780px"></td> <td style="width:676px; height:780px"> <table cellspacing="0" cellpadding="0"> <tr> <td style="width:676px; height:119px; background-image: url(images/grey_bg.gif); background-repeat:no-repeat"> <table cellspacing="0" cellpadding="0"> <tr> <td style="width:560px; height:119px"> <br style="line-height:48px"> <img src="images/c_name.gif" alt="" hspace="3"> </td> <td style="width:116px; height:119px"> <br style="line-height:66px"> <a href="index-1.html"><img src="images/link.gif" alt="" style="margin-right:18px" border="0"></a><a href="#"><img src="images/link1.gif" alt="" style="margin-right:21px" border="0"></a><a href="#"><img src="images/link2.gif" alt="" border="0"></a> </td> </tr> </table> </td> </tr> <tr> <td style="width:676px; height:563px"> <table cellspacing="0" cellpadding="0"> <tr> <td style="width:226px; height:563px"> <a href="index.html"><img src="images/back.gif" alt="" border="0"></a><img src="images/pic1_1.gif" alt=""><br> <img src="images/pic1_2.gif" alt=""><br> <a href="index-2.html"><img src="images/comp.gif" alt="" border="0"></a><a href="index-3.html"><img src="images/srv.gif" alt="" border="0"></a><br> <a href="index-4.html"><img src="images/sol.gif" alt="" border="0"></a><a href="index-5.html"><img src="images/cont.gif" alt="" border="0"></a><br> </td> <td style="width:450px; height:563px; background-color:#F8F8F8; background-image:url(images/top.gif); background-repeat:no-repeat"> <table cellspacing="0" cellpadding="0"> <tr> <td style="width:450px; height:563px; background-image:url(images/bottom.gif); background-repeat:no-repeat; background-position: left bottom"> <br style="line-height:31px"> <img src="images/title7.gif" alt="" style="margin-left:29px"><br> <div style="margin-left:30px"> <br style="line-height:8px"> Lorem ipsum dolor sit amet, consec tetuer adipiscing elit. Praesent vestibulum<br> molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta. Fusce sus- <br> cipit varius mi. Cum sociis natoque penatibus et.<br> <br> </div></td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td style="width:676px; height:98px" class="policy"> <br style="line-height:45px"> YourCompany.Com © 2006 <img src="images/img.gif" alt=""> <a href="index-6.html">Privacy Policy</a> </td> </tr> </table> </td> <td style="width:48px; height:780px"></td> </tr> </table> </td> </tr> </table> </BODY> </HTML> Codigo del calendario <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jsDatePick javascript example</title> <!-- Copyright 2010 Itamar Arjuan jsDatePick is distributed under the terms of the GNU General Public License. **************************************************************************************** Copy paste these 2 lines of code to every page you want the calendar to be available at --> <link rel="stylesheet" type="text/css" media="all" href="jsDatePick_ltr.min.css" /> <!-- OR if you want to use the calendar in a right-to-left website just use the other CSS file instead and don't forget to switch g_jsDatePickDirectionality variable to "rtl"! <link rel="stylesheet" type="text/css" media="all" href="jsDatePick_ltr.css" /> --> <script type="text/javascript" src="jsDatePick.min.1.3.js"></script> <!-- After you copied those 2 lines of code , make sure you take also the files into the same folder :-) Next step will be to set the appropriate statement to "start-up" the calendar on the needed HTML element. This example is of the direct HTML appending calendar version which can be used in two ways. with a stripped mode or without. BUT - in both cases , it simply attaches to an HTML element and stays there. When used in this way , you will have to make a javascript function that will be registered as an event handler of the clicking action on each day. This is done easily like shown in the example. --> <script type="text/javascript"> window.onload = function(){ g_globalObject = new JsDatePick({ useMode:1, isStripped:true, target:"div3_example" /*selectedDate:{ This is an example of what the full configuration offers. day:5, For full documentation about these settings please see the full version of the code. month:9, year:2006 }, yearsRange:[1978,2020], limitToToday:false, cellColorScheme:"beige", dateFormat:"%m-%d-%Y", imgPath:"img/", weekStartDay:1*/ }); g_globalObject.setOnSelectedDelegate(function(){ var obj = g_globalObject.getSelectedDay(); alert("a date was just selected and the date is : " + obj.day + "/" + obj.month + "/" + obj.year); document.getElementById("div3_example_result").innerHTML = obj.day + "/" + obj.month + "/" + obj.year; }); g_globalObject2 = new JsDatePick({ useMode:1, isStripped:false, target:"div4_example", cellColorScheme:"beige" /*selectedDate:{ This is an example of what the full configuration offers. day:5, For full documentation about these settings please see the full version of the code. month:9, year:2006 }, yearsRange:[1978,2020], limitToToday:false, dateFormat:"%m-%d-%Y", imgPath:"img/", weekStartDay:1*/ }); g_globalObject2.setOnSelectedDelegate(function(){ var obj = g_globalObject2.getSelectedDay(); alert("a date was just selected and the date is : " + obj.day + "/" + obj.month + "/" + obj.year); document.getElementById("div3_example_result").innerHTML = obj.day + "/" + obj.month + "/" + obj.year; }); }; </script> </head> <body> <h2><br /> </h2> <div id="div3_example" style="margin:10px 0 30px 0; border:dashed 1px red; width:205px; height:230px;"> </body> </html> |