डिजिटल प्रिंटेबल कैलेंडर बनाएं HTML CSS और JavaScript के मदद से

अगर आपको कोडिंग का नॉलेज जरा भी नहीं है और आप HTML CSS और JavaScript से एक प्रिंटेबल डिजिटल कैलेंडर बनाना चाहते हैं जिसे कोई भी व्यक्ति अपने मोबाइल में या कंप्यूटर में डाउनलोड करके इस्तेमाल कर पाए तो यह पोस्ट आप ही के लिए है इस पोस्ट में हम आपको स्टेप बाय स्टेप बता रहे हैं कि कैसे आप एचटीएमएल सीएसएस और जावास्क्रिप्ट से एक अच्छा प्रिंटेबल कैलेंडर बना सकते हैं और अपने वेबसाइट पर पब्लिश कर सकते हैं।

यह पोस्ट निम्नलिखित विषयों को कवर करेगी: दिखाएं

प्रिंटेबल कैलेंडर क्या है?

प्रिंटेबल कैलेंडर एक ऐसा कैलेंडर होता है जिसे आप कंप्यूटर या मोबाइल डिवाइस पर बना सकते हैं और उसे प्रिंट करके इस्तेमाल कर सकते हैं। यह कैलेंडर HTML, CSS और JavaScript जैसी वेब टेक्नोलॉजी का उपयोग करके बनाया जाता है। इसे बनाने के लिए आपको किसी विशेष सॉफ्टवेयर की आवश्यकता नहीं होती है, बल्कि एक साधारण टेक्स्ट एडिटर और वेब ब्राउज़र की मदद से इसे तैयार किया जा सकता है। प्रिंटेबल कैलेंडर को आप अपनी आवश्यकतानुसार कस्टमाइज़ कर सकते हैं, जैसे कि इसमें छुट्टियों को मार्क करना, विशेष दिनों को हाइलाइट करना, या अपने नोट्स जोड़ना।

प्रिंटेबल कैलेंडर के फायदे

कस्टमाइज़ेशन: आप अपने हिसाब से कैलेंडर को डिज़ाइन कर सकते हैं। इसमें आप अपने जरूरत के अनुसार दिन, महीने, और साल को एडिट कर सकते हैं।
प्रिंट करने की सुविधा: इसे प्रिंट करके आप इसे अपने ऑफिस, घर, या किसी भी जगह पर इस्तेमाल कर सकते हैं। यह एक पेपर कैलेंडर की तरह काम करता है।
डिजिटल और फिजिकल दोनों तरह से इस्तेमाल: आप इसे डिजिटल रूप में भी इस्तेमाल कर सकते हैं और जरूरत पड़ने पर प्रिंट करके फिजिकल रूप में भी इस्तेमाल कर सकते हैं।
ऑफलाइन एक्सेस: एक बार डाउनलोड करने के बाद आप इसे बिना इंटरनेट के भी इस्तेमाल कर सकते हैं।
पर्यावरण के अनुकूल: डिजिटल कैलेंडर का उपयोग करके आप पेपर की बचत कर सकते हैं, लेकिन जरूरत पड़ने पर प्रिंट करके भी इस्तेमाल कर सकते हैं।

HTML, CSS और JavaScript का उपयोग करके प्रिंटेबल कैलेंडर बनाना

HTML, CSS और JavaScript का उपयोग करके आप एक इंटरैक्टिव और प्रिंटेबल कैलेंडर बना सकते हैं। HTML का उपयोग कैलेंडर की संरचना को बनाने के लिए किया जाता है, CSS का उपयोग कैलेंडर को स्टाइल करने के लिए किया जाता है, और JavaScript का उपयोग कैलेंडर को डायनामिक बनाने के लिए किया जाता है। JavaScript की मदद से आप कैलेंडर में दिन, महीने और साल को डायनामिक रूप से बदल सकते हैं।

HTML कोड

HTML कोड कैलेंडर की बुनियादी संरचना को बनाता है। इसमें हम एक टेबल का उपयोग करते हैं जिसमें दिनों को व्यवस्थित किया जाता है।

<!DOCTYPE html>
<html lang="hi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>प्रिंटेबल कैलेंडर</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="calendar">
        <h1 id="month-year"></h1>
        <table id="calendar-table">
            <thead>
                <tr>
                    <th>रवि</th>
                    <th>सोम</th>
                    <th>मंगल</th>
                    <th>बुध</th>
                    <th>गुरु</th>
                    <th>शुक्र</th>
                    <th>शनि</th>
                </tr>
            </thead>
            <tbody id="calendar-body">
            </tbody>
        </table>
        <button onclick="printCalendar()">प्रिंट करें</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS कोड

CSS कोड कैलेंडर को स्टाइल करता है। इसमें हम कैलेंडर की लेआउट, रंग, फ़ॉन्ट आदि को डिज़ाइन करते हैं।

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
}

.calendar {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

#month-year {
    font-size: 24px;
    margin-bottom: 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: center;
}

th {
    background-color: #f4f4f4;
}

button {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

JavaScript कोड

JavaScript कोड कैलेंडर को डायनामिक बनाता है। इसमें हम वर्तमान महीने और साल को प्रदर्शित करते हैं और कैलेंडर के दिनों को भरते हैं।

document.addEventListener("DOMContentLoaded", function() {
    const monthYear = document.getElementById("month-year");
    const calendarBody = document.getElementById("calendar-body");

    const date = new Date();
    const month = date.getMonth();
    const year = date.getFullYear();

    const monthNames = ["जनवरी", "फरवरी", "मार्च", "अप्रैल", "मई", "जून", "जुलाई", "अगस्त", "सितंबर", "अक्टूबर", "नवंबर", "दिसंबर"];
    monthYear.textContent = `${monthNames[month]} ${year}`;

    const firstDay = new Date(year, month, 1);
    const lastDay = new Date(year, month + 1, 0);
    const startDay = firstDay.getDay();
    const totalDays = lastDay.getDate();

    let day = 1;
    for (let i = 0; i < 6; i++) {
        const row = document.createElement("tr");
        for (let j = 0; j < 7; j++) {
            const cell = document.createElement("td");
            if (i === 0 && j < startDay) {
                cell.textContent = "";
            } else if (day > totalDays) {
                cell.textContent = "";
            } else {
                cell.textContent = day;
                day++;
            }
            row.appendChild(cell);
        }
        calendarBody.appendChild(row);
    }
});

function printCalendar() {
    window.print();
}

ये भी पढ़ें:- व्हाट्सएप इमोजी Smiley और People जानें इसके बारे में सभी जानकारी

अंतिम शब्द

इस पोस्ट में हमने सीखा कि कैसे HTML, CSS और JavaScript का उपयोग करके एक प्रिंटेबल कैलेंडर बनाया जा सकता है। यह कैलेंडर न केवल डिजिटल रूप में उपयोगी है बल्कि इसे प्रिंट करके भी इस्तेमाल किया जा सकता है। इस तरह के कैलेंडर को बनाने से आप अपने दैनिक जीवन को और भी अधिक व्यवस्थित कर सकते हैं।

Tech Vihaar

नमस्ते
मेरा नाम सुशील कुमार है और ये है Techvihaar.com इस Blog पर आपको ऑनलाइन पैसे कमाने का लगभग सभी तरह का जरिया बताया गया है जिसे आप अपने मोबाइल या कंप्यूटर के द्वारा कर सकते हैं। इस ब्लॉग से जुड़े रहने के लिए इसे सब्सक्राइब जरूर करें! धन्यवाद।