इस पोस्ट में हम जानेंगे कि एचटीएमएल सीएसएस और जावास्क्रिप्ट के मदद से एक ऑनलाइन प्रिंटेबल कैलेंडर कैसे बनाएं। इस कैलेंडर को आपका यूजर अपने मोबाइल या कंप्यूटर में डाउनलोड करके इस्तेमाल कर पाएंगे या इसे प्रिंट करा कर भी अपने टेबल पर रख पाएंगे और पूरा महीने का कैलेंडर देख पाएंगे, अगर आप भी प्रिंटेबल कैलेंडर बनाना चाहते हैं तो इस पोस्ट को पढ़े और बनाना सीखें।
प्रिंटेबल कैलेंडर क्या होता है?
प्रिंटेबल कैलेंडर एक ऐसा कैलेंडर होता है जिसे आप डिजिटल रूप में देख सकते हैं और जरूरत पड़ने पर प्रिंट करके अपने ऑफिस, घर या स्कूल में इस्तेमाल कर सकते हैं। इस प्रकार के कैलेंडर का सबसे बड़ा फायदा यह है कि इसे आप अपनी आवश्यकताओं के अनुसार कस्टमाइज़ कर सकते हैं और किसी भी समय प्रिंट करके ऑफलाइन उपयोग में ले सकते हैं।
प्रिंटेबल कैलेंडर के फायदे
- व्यक्तिगत अनुकूलन: आप अपनी पसंद के रंग, डिज़ाइन और फॉन्ट के अनुसार कैलेंडर तैयार कर सकते हैं।
- ऑफलाइन एक्सेस: एक बार प्रिंट करने के बाद आपको इंटरनेट की जरूरत नहीं होती।
- व्यवस्थितता: आप अपने दैनिक, साप्ताहिक या मासिक शेड्यूल को प्रिंटेड कैलेंडर पर आसानी से ट्रैक कर सकते हैं।
- गिफ्ट के रूप में: अपने दोस्तों और परिवार वालों को एक खूबसूरत कस्टम कैलेंडर गिफ्ट करना एक बेहतरीन आइडिया हो सकता है।
प्रिंटेबल कैलेंडर कैसे डाउनलोड और उपयोग करें
- आप इस HTML, CSS और JavaScript से बनाए गए कैलेंडर को अपने कंप्यूटर या मोबाइल में सेव कर सकते हैं।
- इसे PDF के रूप में सेव करके आप कभी भी प्रिंट कर सकते हैं।
- कैलेंडर को दीवार पर लगाने या ऑफिस डेस्क पर रखने के लिए यह एक उपयोगी विकल्प है।
HTML कोड (ढांचा तैयार करना)
HTML (हाइपरटेक्स्ट मार्कअप लैंग्वेज) का उपयोग वेब पेज की संरचना बनाने के लिए किया जाता है। नीचे दिए गए HTML कोड में हम एक <div> कंटेनर बनाएंगे, जिसमें कैलेंडर का महीना, दिन और एक प्रिंट बटन होगा।
<!DOCTYPE html>
<html>
<head>
<title>प्रिंटेबल कैलेंडर</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="calendar">
<div class="month" id="month-name"></div>
<div class="days" id="calendar-days"></div>
<button onclick="window.print()">कैलेंडर प्रिंट करें</button>
</div>
<script src="script.js"></script>
</body>
</html>
CSS कोड (डिज़ाइन और लेआउट तैयार करना)
CSS (कैस्केडिंग स्टाइल शीट्स) का उपयोग वेब पेज को आकर्षक बनाने के लिए किया जाता है। नीचे दिए गए CSS कोड में कैलेंडर को एक सुंदर डिज़ाइन दिया गया है ताकि यह साफ और पेशेवर दिखे।
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f5f5f5;
}
.calendar {
width: 90%;
max-width: 600px;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 10px;
overflow: hidden;
}
.month {
padding: 20px;
background-color: #4CAF50;
color: white;
text-align: center;
}
.days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 1px;
background-color: #ddd;
}
.day {
padding: 15px;
text-align: center;
background-color: #fff;
}
.day.header {
font-weight: bold;
background-color: #eee;
}
button {
margin: 10px;
padding: 10px 20px;
border: none;
background-color: #4CAF50;
color: white;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
JavaScript कोड (डायनामिक फंक्शनलिटी जोड़ना)
JavaScript एक प्रोग्रामिंग भाषा है जो वेब पेज को इंटरैक्टिव बनाती है। नीचे दिए गए JavaScript कोड से कैलेंडर ऑटोमैटिकली करंट महीने और साल के अनुसार अपडेट होगा।
document.addEventListener("DOMContentLoaded", function () {
const monthName = document.getElementById('month-name');
const calendarDays = document.getElementById('calendar-days');
const date = new Date();
const month = date.getMonth();
const year = date.getFullYear();
const months = [
'जनवरी', 'फरवरी', 'मार्च', 'अप्रैल', 'मई', 'जून',
'जुलाई', 'अगस्त', 'सितंबर', 'अक्टूबर', 'नवंबर', 'दिसंबर'
];
monthName.textContent = `${months[month]} ${year}`;
const firstDay = new Date(year, month, 1).getDay();
const lastDate = new Date(year, month + 1, 0).getDate();
const dayHeaders = ['रवि', 'सोम', 'मंगल', 'बुध', 'गुरु', 'शुक्र', 'शनि'];
// सप्ताह के दिन दिखाना
dayHeaders.forEach(day => {
const dayDiv = document.createElement('div');
dayDiv.classList.add('day', 'header');
dayDiv.textContent = day;
calendarDays.appendChild(dayDiv);
});
// पहले दिन से पहले खाली स्थान
for (let i = 0; i < firstDay; i++) {
const blankDay = document.createElement('div');
blankDay.classList.add('day');
calendarDays.appendChild(blankDay);
}
// महीने के दिन जोड़ना
for (let i = 1; i <= lastDate; i++) {
const dayDiv = document.createElement('div');
dayDiv.classList.add('day');
dayDiv.textContent = i;
calendarDays.appendChild(dayDiv);
}
});
Also Read:- BMI calculator kg क्या है, इसका क्या उपयोग है और बीएमआई कैलकुलेटर कैसे बनाएं
निष्कर्ष
इस प्रकार, HTML, CSS और JavaScript की मदद से एक सुंदर और उपयोगी प्रिंटेबल कैलेंडर बनाना बहुत आसान है। इसे प्रिंट करके ऑफलाइन उपयोग कर सकते हैं या डिजिटल रूप में भी रख सकते हैं।
अगर आपको यह लेख पसंद आया तो इसे शेयर जरूर करें और अपने विचार हमें कमेंट में बताएं।
