Skip to content

Commit 9aa2a52

Browse files
Durgesh4993Durgesh4993
committed
Calander
1 parent 0b5b6b0 commit 9aa2a52

File tree

2 files changed

+203
-0
lines changed

2 files changed

+203
-0
lines changed

‎Calander/index.html‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Calendar</title>
6+
7+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8+
<!-- Bootstrap CSS -->
9+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
10+
integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
11+
12+
</head>
13+
<body>
14+
<div class="container col-sm-4 col-md-7 col-lg-4 mt-5">
15+
<div class="card">
16+
<h3 class="card-header" id="monthAndYear"></h3>
17+
<table class="table table-bordered table-responsive-sm" id="calendar">
18+
<thead>
19+
<tr>
20+
<th>Sun</th>
21+
<th>Mon</th>
22+
<th>Tue</th>
23+
<th>Wed</th>
24+
<th>Thu</th>
25+
<th>Fri</th>
26+
<th>Sat</th>
27+
</tr>
28+
</thead>
29+
30+
<tbody id="calendar-body">
31+
32+
</tbody>
33+
</table>
34+
35+
<div class="form-inline">
36+
37+
<button class="btn btn-outline-primary col-sm-6" id="previous" onclick="previous()">Previous</button>
38+
39+
<button class="btn btn-outline-primary col-sm-6" id="next" onclick="next()">Next</button>
40+
</div>
41+
<br/>
42+
<form class="form-inline">
43+
<label class="lead mr-2 ml-2" for="month">Jump To: </label>
44+
<select class="form-control col-sm-4" name="month" id="month" onchange="jump()">
45+
<option value=0>Jan</option>
46+
<option value=1>Feb</option>
47+
<option value=2>Mar</option>
48+
<option value=3>Apr</option>
49+
<option value=4>May</option>
50+
<option value=5>Jun</option>
51+
<option value=6>Jul</option>
52+
<option value=7>Aug</option>
53+
<option value=8>Sep</option>
54+
<option value=9>Oct</option>
55+
<option value=10>Nov</option>
56+
<option value=11>Dec</option>
57+
</select>
58+
59+
60+
<label for="year"></label><select class="form-control col-sm-4" name="year" id="year" onchange="jump()">
61+
<option value=1990>1990</option>
62+
<option value=1991>1991</option>
63+
<option value=1992>1992</option>
64+
<option value=1993>1993</option>
65+
<option value=1994>1994</option>
66+
<option value=1995>1995</option>
67+
<option value=1996>1996</option>
68+
<option value=1997>1997</option>
69+
<option value=1998>1998</option>
70+
<option value=1999>1999</option>
71+
<option value=2000>2000</option>
72+
<option value=2001>2001</option>
73+
<option value=2002>2002</option>
74+
<option value=2003>2003</option>
75+
<option value=2004>2004</option>
76+
<option value=2005>2005</option>
77+
<option value=2006>2006</option>
78+
<option value=2007>2007</option>
79+
<option value=2008>2008</option>
80+
<option value=2009>2009</option>
81+
<option value=2010>2010</option>
82+
<option value=2011>2011</option>
83+
<option value=2012>2012</option>
84+
<option value=2013>2013</option>
85+
<option value=2014>2014</option>
86+
<option value=2015>2015</option>
87+
<option value=2016>2016</option>
88+
<option value=2017>2017</option>
89+
<option value=2018>2018</option>
90+
<option value=2019>2019</option>
91+
<option value=2020>2020</option>
92+
<option value=2021>2021</option>
93+
<option value=2022>2022</option>
94+
<option value=2023>2023</option>
95+
<option value=2024>2024</option>
96+
<option value=2025>2025</option>
97+
<option value=2026>2026</option>
98+
<option value=2027>2027</option>
99+
<option value=2028>2028</option>
100+
<option value=2029>2029</option>
101+
<option value=2030>2030</option>
102+
</select></form>
103+
</div>
104+
</div>
105+
<!--<button name="jump" onclick="jump()">Go</button>-->
106+
<script src="scripts.js"></script>
107+
108+
<!-- Optional JavaScript for bootstrap -->
109+
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
110+
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
111+
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
112+
crossorigin="anonymous"></script>
113+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
114+
integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
115+
crossorigin="anonymous"></script>
116+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
117+
integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
118+
crossorigin="anonymous"></script>
119+
120+
121+
</body>
122+
</html>

‎Calander/scripts.js‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
let today = new Date();
2+
let currentMonth = today.getMonth();
3+
let currentYear = today.getFullYear();
4+
let selectYear = document.getElementById("year");
5+
let selectMonth = document.getElementById("month");
6+
7+
let months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
8+
9+
let monthAndYear = document.getElementById("monthAndYear");
10+
showCalendar(currentMonth, currentYear);
11+
12+
13+
function next() {
14+
currentYear = (currentMonth === 11) ? currentYear + 1 : currentYear;
15+
currentMonth = (currentMonth + 1) % 12;
16+
showCalendar(currentMonth, currentYear);
17+
}
18+
19+
function previous() {
20+
currentYear = (currentMonth === 0) ? currentYear - 1 : currentYear;
21+
currentMonth = (currentMonth === 0) ? 11 : currentMonth - 1;
22+
showCalendar(currentMonth, currentYear);
23+
}
24+
25+
function jump() {
26+
currentYear = parseInt(selectYear.value);
27+
currentMonth = parseInt(selectMonth.value);
28+
showCalendar(currentMonth, currentYear);
29+
}
30+
31+
function showCalendar(month, year) {
32+
33+
let firstDay = (new Date(year, month)).getDay();
34+
let daysInMonth = 32 - new Date(year, month, 32).getDate();
35+
36+
let tbl = document.getElementById("calendar-body"); // body of the calendar
37+
38+
// clearing all previous cells
39+
tbl.innerHTML = "";
40+
41+
// filing data about month and in the page via DOM.
42+
monthAndYear.innerHTML = months[month] + " " + year;
43+
selectYear.value = year;
44+
selectMonth.value = month;
45+
46+
// creating all cells
47+
let date = 1;
48+
for (let i = 0; i < 6; i++) {
49+
// creates a table row
50+
let row = document.createElement("tr");
51+
52+
//creating individual cells, filing them up with data.
53+
for (let j = 0; j < 7; j++) {
54+
if (i === 0 && j < firstDay) {
55+
let cell = document.createElement("td");
56+
let cellText = document.createTextNode("");
57+
cell.appendChild(cellText);
58+
row.appendChild(cell);
59+
}
60+
else if (date > daysInMonth) {
61+
break;
62+
}
63+
64+
else {
65+
let cell = document.createElement("td");
66+
let cellText = document.createTextNode(date);
67+
if (date === today.getDate() && year === today.getFullYear() && month === today.getMonth()) {
68+
cell.classList.add("bg-info");
69+
} // color today's date
70+
cell.appendChild(cellText);
71+
row.appendChild(cell);
72+
date++;
73+
}
74+
75+
76+
}
77+
78+
tbl.appendChild(row); // appending each row into calendar body.
79+
}
80+
81+
}

0 commit comments

Comments
 (0)