• Breaking News

    Wednesday, 28 October 2015

    Home html javascript HOW CREATE CALENDAR IN JAVASCRIPT

    HOW CREATE CALENDAR IN JAVASCRIPT

    09:59 ,
    Welcome to the JavaScript tutorial. In this tutorial will see how to develop a calendar in JavaScript.
    1. This calendar show years up to 5000
    2. Choose any year segment from the given drop-down list
    3. Then choose year to  know the months and days of that particular year.
    4. And here is also a feature that you can arrange the dates according to your starting week.
    so that's all about the functionality.
    Below is code of Calendar in JavaScript.

      1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
    <html>

<head>
  <script language="javascript">
  m = 0
  y = 0
  ym = "y"

  function fun_y_fill() {
    val = document.getElementById("drp_ys").value
    ym = "y"
    for (r = 1; r <= 3; r++) {
      for (c = 1; c <= 4; c++) {
        document.getElementById("ym" + r + c).innerHTML = val
        val++
      }
    }
  }
  var pp = new Array(12)
  pp[0] = "Jan"
  pp[1] = "Feb"
  pp[2] = "Mar"
  pp[3] = "Apr"
  pp[4] = "May"
  pp[5] = "Jun"
  pp[6] = "Jul"
  pp[7] = "Aug"
  pp[8] = "Sep"
  pp[9] = "Oct"
  pp[10] = "Nov"
  pp[11] = "Dec"
  var wd = new Array(7)
  wd[0] = "SUN"
  wd[1] = "MON"
  wd[2] = "TUE"
  wd[3] = "WED"
  wd[4] = "THU"
  wd[5] = "FRI"
  wd[6] = "SAT"

  function fun_fillNchk(td_id) {
    if (ym == "y") {
      ym = "m"
      y = document.getElementById(td_id).innerHTML
      k = 0
      for (r = 1; r <= 3; r++) {
        for (c = 1; c <= 4; c++) {
          document.getElementById("ym" + r + c).innerHTML = pp[k]
          k++
        }
      }
    } else {
      if (ym == "m") {
        m = document.getElementById(td_id).innerHTML
        for (jj = 0; jj <= 11; jj++) {
          if (pp[jj] == m) {
            m = jj
            jj = 12
          }
        }
        document.getElementById("t_y").innerHTML = y
        document.getElementById("t_m").innerHTML = pp[m]
        fun1(0)
      }
    }
  }

  function fun1(r) {
    var aa = new Date(y, m, 1);
    dow = aa.getDay()
    nod = noofdays(m, y)
    if (r == 1) {
      kk = document.getElementById("drp_wd").value
      op = kk
      for (i = 0; i <= 6; i++) {
        document.getElementById("wd" + i).innerHTML = wd[kk]
        kk++
        if (kk == 7) {
          kk = 0
        }
      }
      if (kk <= dow) {
        dow = dow - kk
      } else {}
    }
    for (i = 0; i <= 41; i++) {
      document.getElementById("tt" + i).innerHTML = "&nbsp;"
    }
    for (i = 1; i <= nod; i++) {
      document.getElementById("tt" + dow).innerHTML = i
      dow++
    }
  }

  function noofdays(M, yr) {
    v = 0
    if (M == 3 || M == 5 || M == 8 || M == 10) {
      v = 30
    } else {
      if (M == 0 || M == 2 || M == 4 || M == 6 || M == 7 || M == 9 || M == 11) {
        v = 31
      } else {
        if ((yr % 400 == 0) || (yr % 4 == 0 && yr % 100 != 0)) {
          v = 29
        } else {
          v = 28
        }
      }
    }
    return v;
  }
  </script>
</head>

<body>
  <!-- drp year -->
  <script>
  document.write("<select id='drp_ys' onchange='fun_y_fill()'>")
  for (i = 1001; i <= 5000;) {
    v = i
    i = i + 11
    document.write("<option value='" + v + "'>" + v + "-" + i + "</option>")
    i++
  }
  document.write("</select>")
  </script>
  <br>
  <table align="left" width="500" height="300">
    <tr>
      <td width="250">
        <!-- table year -->
        <script>
        document.write("<table border='1'  height='100%' width='100%'>")
        for (r = 1; r <= 3; r++) {
          document.write("<tr>")
          for (c = 1; c <= 4; c++) {
            document.write("<td align='center' id='ym" + r + c + "' onclick='fun_fillNchk(this.id)'>&nbsp;</td>")
          }
          document.write("</tr>")
        }
        document.write("</table>")
        </script>
      </td>
      <td height="250" width="250">
        <!-- table cal -->1st Day Of Week
        <select onchange="fun1(1)" id="drp_wd">
          <option value="0">Sun</option>
          <option value="1">Mon</option>
          <option value="2">Tue</option>
          <option value="3">Wed</option>
          <option value="4">Thu</option>
          <option value="5">Fri</option>
          <option value="6">Sat</option>
        </select>
        <table border='1' height='100%' width='100%'>
          <tr>
            <td id="t_y" colspan="4"></td>
            <td id="t_m" colspan="3"></td>
          </tr>
          <tr>
            <td id="wd0">SUN</td>
            <td id="wd1">MON</td>
            <td id="wd2">TUE</td>
            <td id="wd3">WED</td>
            <td id="wd4">THU</td>
            <td id="wd5">FRI</td>
            <td id="wd6">SAT</td>
          </tr>
          <script>
          m = 0
          for (r = 1; r <= 6; r++) {
            document.write("<tr>")
            for (c = 1; c <= 7; c++) {
              document.write("<td align='center' id='tt" + m + "'>&nbsp;</td>")
              m++
            }
            document.write("</tr>")
          }
          </script>
        </table>
      </td>
    </tr>
  </table>
</body>

</html>

    OUTPUT:-
    Read more
    Posted by at
    Labels: ,

    No comments:

    Post a Comment