dynamic calendar in javascript with example

Solutions on MaxInterview for dynamic calendar in javascript with example by the best coders in the world

Search
showing results for - "dynamic calendar in javascript with example"
Alberto
12 Jun 2016
1<!DOCTYPE html>
2<html>
3<head>
4<style type="text/css">
5.calendarMonth{
6border-collapse:collapse;
7background-color:#eef;
8}
9.calendarMonth th{
10}
11.calendarMonth .calendarTitle{
12background-color:#ddf;
13}
14.calendarMonth .calendarPrevious{
15background-color:#ddf;
16}
17.calendarMonth .calendarNext{
18background-color:#ddf;
19}
20.calendarEmpty{
21}
22.calendarDay{
23background:#fff;
24border:1px solid black;
25text-align:center;
26width:2em;
27}
28</style>
29
30<script type="text/javascript">
31var  daysInMonth=[31,28,31,30,31,30,31,31,30,31,30,31];
32var  monthNames=['January','February','March','April','May','June','July','August','September','October','November','December'];
33
34// Returns the number of days in the month in a given year (January=0)
35function getDaysInMonth(month,year){
36if ((month==1)&&(year%4==0)&&((year%100!=0)||(year%400==0))){
37return 29;
38}else{
39return daysInMonth[month];
40}
41}
42
43// Performs an action when a date is clicked
44function dateClicked(day,month,year){
45document.forms.calendar.date.value = day+'/'+month+'/'+year;  
46
47}
48
49// Sets the displayed month
50function setDisplayedMonth(month){
51if (month<0){
52alert('You have reached the beginning of this calendar');
53}else if (month>=months){
54alert('You have reached the end of this calendar');
55}else{
56for (var i=0;i<months;i++){
57document.getElementById('calendarMonth'+i).style.display='none';
58}
59document.getElementById('calendarMonth'+month).style.display='block';
60}
61}
62</script>
63</head> 
64
65<body>
66<form id="calendar">
67<table>
68<tr>
69<td><label for="date">Date:</label></td>
70<td><input type="text" id="date" name="date" value="28/05/2015"></td>
71</tr>
72<tr><td></td><td>
73<script type="text/javascript">
74var month=0;
75var year=2015;
76var months=12;
77for (var i=0;i<months;i++){
78document.writeln('<table class="calendarMonth" '+'id="calendarMonth'+i+'" cellspacing="0">');
79 document.writeln('<tr>'
80          +'<th class="calendarPrevious" onClick="setDisplayedMonth('+(i-1)+')"><</th>'+'<th class="calendarTitle" colspan="5">'            +monthNames[month]+' '+year+'</th>'+'<th class="calendarNext" onClick="setDisplayedMonth('+(i+1)+')">></th>'+'</tr>');
81
82document.writeln('<tr><th>Sun</th><th>Mon</th><th>Tue</th>'+'<th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr>');
83var firstDayDate=new Date(year,month,1);
84var firstDay=firstDayDate.getDay();
85for (j=0;j<42;j++){
86if (j%7==0) document.write('<tr>')
87if ((j=firstDay+getDaysInMonth(month,year))){
88document.write('<td class="calendarEmpty"></td>');
89}else{
90document.write('<td class="calendarDay" '+'onClick="dateClicked('+(j-firstDay+1)+','+(month+1)+','+year+')">'+(j-firstDay+1)+'');
91}
92if (j%7==6) document.write('</tr>');
93}
94document.writeln('</table>');
95month++;
96if (month>=12){
97month=0;
98year++;
99}
100}
101setDisplayedMonth(5);
102</script>
103</td></tr>
104</table>
105</form>
106</body>
107</html>
source
similar questions
how to create a dynamic function in javascripthow to create dynamic onclick event in javascriptpass dynamic javascript value to htmlcall a javascript function at a specific time of dayhow to add date in java scriptcreate dynamic element in javascriptjavascript event calendar source codehow to create an event calendar in javascriptdynamically load js inside jsdisable few dates from calendar javascriptjavascript 2c dynamic variable 2c and function to add data to odynamic time javascript
queries leading to this page
how to make a dynamic calendar in javascriptdynamic calendar javascripthow to dynamically add a calendar javascriptdynamic calendar in javascript dynamic calendar features jsdynamic html week calendarhow to make add to calendar link javascripthow to create dynamic calendar in htmlcreate a calendar dynamically using javascriptjavascript dynamic calendarhow to create dynamic calendar in html using javascriptjavascript for dynamic calendardynamic calendar in javascript with examplehow do i create a dynamic calendar in html 3fdynamic calendar htmlhow to create dynamic calendar in jquerydynamic calendar in javascript with example