SVG – Learning by Coding

[ kalender.svg --> Grafik anzeigen ]

  1: <?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
  2: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
  3:   "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
  4:   <!ATTLIST svg xmlns:xlink CDATA #FIXED "http://www.w3.org/1999/xlink">
  5: ]>
  6: 
  7: <!-- SVG - Learning by Coding - http://www.datenverdrahten.de/svglbc/ -->
  8: <!--    Author: Dr. Thomas Meinike 10/04 - thomas@handmadecode.de     -->
  9: 
 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 11:   onload="Init(evt)">
 12: 
 13:   <title>SVG - Learning by Coding</title>
 14:   <desc>SVG-Spezifikation in Beispielen</desc>
 15: 
 16:   <defs>
 17: 
 18:     <style type="text/css">
 19:       <![CDATA[
 20: 
 21:       tspan, text
 22:       {
 23:         fill: #00C;
 24:         font-size: 16px;
 25:         font-weight: bold;
 26:         font-family: "Courier New", Courier, monospace;
 27:       }
 28: 
 29:       tspan > tspan
 30:       {
 31:         fill: #F00;
 32:       }
 33: 
 34:       ]]>
 35:     </style>
 36: 
 37:     <script type="text/javascript">
 38:       <![CDATA[
 39:       
 40:       var svgdoc,datum,monat,jahr; // globale Variablen
 41: 
 42: 
 43:       function Init(load_evt)
 44:       {
 45:         svgdoc=load_evt.target.ownerDocument;
 46: 
 47:         // Kalender des aktuellen Monats
 48:         datum=new Date();
 49:         jahr=datum.getFullYear();
 50:         monat=datum.getMonth()+1;      
 51:         Ausgabe(Kalender(monat,jahr));
 52:       }
 53: 
 54: 
 55:       function PrevNextMonth(pn)
 56:       {
 57:         // Kalender des vorherigen bzw. folgenden Monats
 58:         monat+=pn;
 59:         datum=new Date(jahr,monat-1,1);
 60:         jahr=datum.getFullYear();
 61:         monat=datum.getMonth()+1;
 62:         Ausgabe(Kalender(monat,jahr));
 63:       }
 64: 
 65: 
 66:       function Kalender(monat,jahr)
 67:       {
 68:         /* Ergebnis: zweidimensionales Array kalarr[0...5][0...6]
 69: 
 70:              Beispiel - 01/2005
 71: 
 72:             Mo Di Mi Do Fr Sa So
 73:             --------------------
 74:                             1  2  -->  2 = kalarr[0][6]
 75:              3  4  5  6  7  8  9   |
 76:             10 11 12 13 14 15 16   |    alle 6 Reihen
 77:             17 18 19 20 21 22 23   |     sind belegt
 78:             24 25 26 27 28 29 30   |
 79:             31                    --> 31 = kalarr[5][0]
 80:         */
 81: 
 82:         var tim,etim,tag,leer=String.fromCharCode(160),
 83:             tmparr=new Array(42),kalarr=new Array(6);
 84: 
 85:         tim=new Date(jahr,monat,0).getDate();   // Tage im Monat (28, 29, 30, 31)
 86:         etim=new Date(jahr,monat-1,1).getDay(); // ersten (Wochen-)Tag im Monat 
 87:         if(etim==0)etim=7;                      // bestimmen: Mo = 1 ... So = 7
 88: 
 89:         for(i=0;i<42;i++)
 90:         {
 91:           // temporaeres Array mit Werten (ggf. mit Leerraum) belegen
 92:           if(i<etim-1 || i>tim+etim-2)tmparr[i]=leer+leer;
 93:           else
 94:           {
 95:             tag=(i-etim+2).toString();
 96:             tag=(tag.length<2) ? leer+tag : tag;
 97:             tmparr[i]=tag;
 98:           }
 99:         }
100: 
101:         // Ergebnis-Array kalarr[][] aufbauen und zurueck geben
102:         for(i=0,j=6;i<42;i+=7,j+=7)kalarr[i/7]=tmparr.slice(i,j+1);
103:         return kalarr;
104:       }
105: 
106: 
107:       function Ausgabe(kalarr)
108:       {
109:         var monatjahr,mj,ausgabe,tspans,leer=String.fromCharCode(160);
110: 
111:         monatjahr=svgdoc.getElementById("monatjahr");
112:         ausgabe=svgdoc.getElementById("ausgabe");
113:         tspans=ausgabe.getElementsByTagName("tspan");
114: 
115:         for(i=0;i<6;i++)
116:         {
117:           tspans.item(2*i).firstChild.nodeValue=
118:           kalarr[i].slice(0,6).join(",").replace(/,/g,leer);
119:           tspans.item(2*i+1).firstChild.nodeValue=leer+kalarr[i][6];
120:         }
121: 
122:         mj=(monat<10) ? "0"+monat+"/"+jahr : monat+"/"+jahr;
123:         monatjahr.firstChild.nodeValue=mj;
124:       }
125: 
126:       ]]>
127:     </script>
128: 
129:   </defs>
130: 
131:   <text x="20" y="30" style="fill: #000; font-size: 24px; font-weight: normal;
132:     font-family: sans-serif">SVG-Kalender</text>
133: 
134:   <a xlink:href="" cursor="pointer" onclick="return false">
135:     <text x="30" y="70" onclick="PrevNextMonth(-1)">&lt;&lt;
136:       <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
137:       <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/>
138:     </text>
139:   </a>
140: 
141:   <text id="monatjahr" x="90" y="70"> </text>
142: 
143:   <a xlink:href="" cursor="pointer" onclick="return false">
144:     <text x="200" y="70" onclick="PrevNextMonth(1)">&gt;&gt;
145:       <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
146:       <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/>
147:     </text>
148:   </a>
149: 
150:   <text x="30" y="90"><tspan>Mo Di Mi Do Fr Sa <tspan>So</tspan></tspan></text>
151:   <text x="30" y="105">--------------------</text>
152:   <text id="ausgabe" x="30" y="100">
153:     <tspan x="30" dy="18"> <tspan> </tspan></tspan>
154:     <tspan x="30" dy="18"> <tspan> </tspan></tspan>
155:     <tspan x="30" dy="18"> <tspan> </tspan></tspan>
156:     <tspan x="30" dy="18"> <tspan> </tspan></tspan>
157:     <tspan x="30" dy="18"> <tspan> </tspan></tspan>
158:     <tspan x="30" dy="18"> <tspan> </tspan></tspan>
159:   </text>
160: 
161: </svg>

[zum Anfang]