हर साल में किए गए नए नए Printable Calendar Download किए जाते है, लेकिन आप ने इसे गोर नही किया कि ये कैसे बनाए जाते है। मैने आप के लिए Demo Free Printable Calendar Tool बनाया है। इसे आप चैक कर सकते हो।
Printable Calendar क्या होते, इसे Download कैसे करें
Printable Calendar वो बने बनाए Calendar होते है, जो बाजार में आसानी से सिर्फ Internet / Website Tool Download करके उसे अपने Printer पर Print करके Sell किया जाता है। इसके लिए मैने एक Tool के साथ website Source Code नीचे दिया है। वो भी Free में Printable Calendar Generate कर सकते हो। इससे पहले About Us Page Generator Tool
Printable Calendar के फायदे
यदि आप एक साधारण लेकिन प्रभावी प्रिंटेबल कैलेंडर टूल (Printable Calendar Tool) की तलाश में हैं, तो यह विकल्प आपके लिए सबसे अच्छा है। इसके Source Code को Download करके आप इसे अपने हिसाब से Customize कर सकते हैं। इसे आज़माएं और अपने समय को बेहतर तरीके से प्रबंधित करें।
क्यों चुनें मुफ्त प्रिंटेबल कैलेंडर टूल?
- यह आपके समय प्रबंधन को सरल और प्रभावी बनाता है।
- बिना किसी अतिरिक्त खर्च के उपलब्ध है।
- टेक्नोलॉजी में रुचि रखने वालों के लिए सोर्स कोड एक बेहतरीन अवसर प्रदान करता है।
इसके लिए आपके पास Hosting और Domain होना चाहिए जो Code Download / Copy करोगे उसे Hosting पर Public Folder के अंदर Upload कर दो, जिसका नाम index.html होना चाहिए।
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Printable Calendar with Holidays</title>
<link href=”https://fonts.googleapis.com/css2?family=Lexend:wght@300&display=swap” rel=”stylesheet”>
<style>
body {
font-family: ‘Lexend’, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
.container {
max-width: 900px;
margin: 20px auto;
padding: 20px;
background: white;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
h1, h2 {
text-align: center;
}
.year-selector {
text-align: center;
margin-bottom: 20px;
}
.calendar {
width: 100%;
border-collapse: collapse;
}
.calendar th, .calendar td {
border: 1px solid #ccc;
text-align: center;
padding: 10px;
width: 14.2857%;
position: relative;
}
.calendar th {
background-color: #007BFF;
color: white;
}
.holiday {
background-color: #FFD700;
cursor: pointer;
position: relative;
}
.holiday::after {
content: ”;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 2px solid red;
box-sizing: border-box;
animation: blink 1s infinite;
}
@keyframes blink {
0%, 50% {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
.holiday:hover::after {
animation: none;
}
.holiday-tooltip {
display: none;
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background-color: #333;
color: #fff;
padding: 5px 10px;
border-radius: 4px;
font-size: 12px;
white-space: nowrap;
z-index: 10;
}
.holiday:hover .holiday-tooltip {
display: block;
}
.month-holidays {
margin-top: 20px;
}
.print-btn {
display: block;
text-align: center;
margin-top: 20px;
}
@media print {
.year-selector, .print-btn, .month-holidays {
display: none;
}
.calendar th {
background-color: #007BFF !important;
-webkit-print-color-adjust: exact;
}
.holiday {
background-color: #FFD700 !important;
-webkit-print-color-adjust: exact;
}
}
</style>
</head>
<body>
<div class=”container”>
<h1>Printable Calendar with Holidays</h1>
<div class=”year-selector”>
<label for=”year”>Select Year: </label>
<select id=”year” onchange=”generateCalendar()”>
<script>
for (let year = 2022; year <= new Date().getFullYear() + 10; year++) {
document.write(`<option value=”${year}”>${year}</option>`);
}
</script>
</select>
</div>
<div id=”calendar-container”></div>
<div class=”month-holidays” id=”month-holidays”>
<h2>Month Holidays</h2>
<ul id=”holiday-list”></ul>
</div>
<div class=”print-btn”>
<button onclick=”window.print()”>Print Calendar</button>
</div>
</div>
<script>
const holidays = {
’01-14′: { name: ‘Makar Sankranti (Hindu)’ },
’03-08′: { name: ‘Holi (Hindu)’ },
’04-22′: { name: ‘Eid al-Fitr (Muslim)’ },
’08-15′: { name: ‘Independence Day’ },
’10-02′: { name: ‘Gandhi Jayanti’ },
’11-12′: { name: ‘Diwali (Hindu)’ },
’12-25′: { name: ‘Christmas’ },
// Add more holidays as needed
};
function generateCalendar() {
const year = document.getElementById(‘year’).value;
const calendarContainer = document.getElementById(‘calendar-container’);
const monthHolidays = document.getElementById(‘holiday-list’);
calendarContainer.innerHTML = ”;
monthHolidays.innerHTML = ”;
for (let month = 0; month < 12; month++) {
const date = new Date(year, month, 1);
const daysInMonth = new Date(year, month + 1, 0).getDate();
let calendarHTML = `<h2>${date.toLocaleString(‘default’, { month: ‘long’ })}</h2>`;
calendarHTML += `<table class=”calendar”>
<thead>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
</thead>
<tbody>
<tr>`;
for (let i = 0; i < date.getDay(); i++) {
calendarHTML += `<td></td>`;
}
for (let day = 1; day <= daysInMonth; day++) {
const dayKey = `${String(month + 1).padStart(2, ‘0’)}-${String(day).padStart(2, ‘0’)}`;
const holiday = holidays[dayKey];
if ((date.getDay() + day – 1) % 7 === 0) {
calendarHTML += `</tr><tr>`;
}
calendarHTML += `<td class=”${holiday ? ‘holiday’ : ”}”>
${day}
${holiday ? `<div class=”holiday-tooltip”>${holiday.name}</div>` : ”}
</td>`;
}
calendarHTML += `</tr>
</tbody>
</table>`;
calendarContainer.innerHTML += calendarHTML;
}
Object.entries(holidays).forEach(([key, { name }]) => {
const [month, day] = key.split(‘-‘);
const holidayDate = new Date(year, parseInt(month) – 1, parseInt(day));
if (holidayDate.getFullYear() === parseInt(year)) {
const listItem = document.createElement(‘li’);
listItem.textContent = `${holidayDate.toLocaleDateString(‘default’, { month: ‘long’, day: ‘numeric’ })}: ${name}`;
monthHolidays.appendChild(listItem);
}
});
}
document.addEventListener(‘DOMContentLoaded’, generateCalendar);
</script>
</body>
</html>
Tags –
#FreeCalendarTool #PrintableCalendar #OpenSource #TimeManagement #DownloadSourceCode
1 thought on “Free Printable Calendar Tool Source Code Download”