You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.
You should upgrade or use an alternative browser.
How to create calendar using jquery?
Creating a calendar using jQuery is a popular use case for the library. Here's a step-by-step guide on how to create a simple calendar using jQuery:
1. Include jQuery in your HTML file:
2. Create a div element where the calendar will be displayed:
3. Create a JavaScript function to generate the calendar:
4. Call the function with the desired year and month:
This will generate a calendar for August 2021 and insert it into the element with id "calendar". You can modify the CSS to style the calendar as desired.
1. Include jQuery in your HTML file:
HTML:
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>2. Create a div element where the calendar will be displayed:
HTML:
<div id="calendar"></div>3. Create a JavaScript function to generate the calendar:
JavaScript:
function generateCalendar(year, month) {
var calendar = '<table>';
var date = new Date(year, month, 1);
var daysInMonth = new Date(year, month + 1, 0).getDate();
var weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
// Create header row with weekdays
calendar += '<tr>';
for (var i = 0; i < weekdays.length; i++) {
calendar += '<th>' + weekdays[i] + '</th>';
}
calendar += '</tr>';
// Fill in days of the month
var day = 1;
var dayOfWeek = date.getDay();
calendar += '<tr>';
for (var i = 0; i < 7; i++) {
if (i < dayOfWeek) {
calendar += '<td></td>';
} else if (day <= daysInMonth) {
calendar += '<td>' + day + '</td>';
day++;
} else {
calendar += '<td></td>';
}
}
calendar += '</tr>';
// Add remaining rows of the calendar
while (day <= daysInMonth) {
calendar += '<tr>';
for (var i = 0; i < 7; i++) {
if (day <= daysInMonth) {
calendar += '<td>' + day + '</td>';
day++;
} else {
calendar += '<td></td>';
}
}
calendar += '</tr>';
}
calendar += '</table>';
return calendar;
}4. Call the function with the desired year and month:
JavaScript:
var calendarHtml = generateCalendar(2021, 8);
$('#calendar').html(calendarHtml);This will generate a calendar for August 2021 and insert it into the element with id "calendar". You can modify the CSS to style the calendar as desired.
Full source code
<div>
<input type="text" id="num1" placeholder="Enter number 1">
<input type="text" id="num2" placeholder="Enter number 2">
</div>
<div>
<button id="add">+</button>
<button id="subtract">-</button>
<button id="multiply">*</button>
<button id="divide">/</button>
</div>
<div>
<input type="text" id="result" placeholder="Result" readonly>
</div>
<script src="You do not have permission to view the full content of this post. Log in or register now."></script>
<script>
$(document).ready(function() {
$('#add').click(function() {
var num1 = parseFloat($('#num1').val());
var num2 = parseFloat($('#num2').val());
var result = num1 + num2;
$('#result').val(result);
});
$('#subtract').click(function() {
var num1 = parseFloat($('#num1').val());
var num2 = parseFloat($('#num2').val());
var result = num1 - num2;
$('#result').val(result);
});
$('#multiply').click(function() {
var num1 = parseFloat($('#num1').val());
var num2 = parseFloat($('#num2').val());
var result = num1 * num2;
$('#result').val(result);
});
$('#divide').click(function() {
var num1 = parseFloat($('#num1').val());
var num2 = parseFloat($('#num2').val());
var result = num1 / num2;
$('#result').val(result);
});
});
</script>
<div>
<input type="text" id="num1" placeholder="Enter number 1">
<input type="text" id="num2" placeholder="Enter number 2">
</div>
<div>
<button id="add">+</button>
<button id="subtract">-</button>
<button id="multiply">*</button>
<button id="divide">/</button>
</div>
<div>
<input type="text" id="result" placeholder="Result" readonly>
</div>
<script src="You do not have permission to view the full content of this post. Log in or register now."></script>
<script>
$(document).ready(function() {
$('#add').click(function() {
var num1 = parseFloat($('#num1').val());
var num2 = parseFloat($('#num2').val());
var result = num1 + num2;
$('#result').val(result);
});
$('#subtract').click(function() {
var num1 = parseFloat($('#num1').val());
var num2 = parseFloat($('#num2').val());
var result = num1 - num2;
$('#result').val(result);
});
$('#multiply').click(function() {
var num1 = parseFloat($('#num1').val());
var num2 = parseFloat($('#num2').val());
var result = num1 * num2;
$('#result').val(result);
});
$('#divide').click(function() {
var num1 = parseFloat($('#num1').val());
var num2 = parseFloat($('#num2').val());
var result = num1 / num2;
$('#result').val(result);
});
});
</script>
Similar threads
-
Non-Fiction O_REILLY - Learning PHP, MySQL & JavaScript With jQuery, CSS & HTML5
- Started by deadsheep
- Replies: 0
-
-
-
Course Free Udemy Course: Complete jQuery Course: Learn From Beginner To Advanced
- Started by Fletcheru
- Replies: 5
-
Popular Tags
android
api
app
arduino
bot
c
c++
capstone
capstone project
code
coding
coding and programming
css
database
developer
development
help
how
how to
html
in
java
javascript
language
laravel
mag
mysql
need
patulong
php
program
programmer
programming
programming language
project
python
question
react
script
sql
system
thesis
tutorial
udemy
vb.net
visual basic
web
web development
website
with
About this Thread
-
3Replies
-
329Views
-
3Participants
Last reply from:
maeorn
maeorn
Online statistics
- Members online
- 1,136
- Guests online
- 4,593
- Total visitors
- 5,729