Calendario

Iniciado por Esprinter, 1 Marzo 2011, 15:26 PM

0 Miembros y 1 Visitante están viendo este tema.

Imprimir
Ir Abajo Páginas1
Acciones del Usuario

Esprinter

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 &copy; 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>
Imprimir
Ir Arriba Páginas1
Acciones del Usuario