Blogger script to generate and download printable calendar

 

Script to Generate and download printable calendar

A tool can be created in blogger to generate the calendar for specific month and year. The calendar file can be generated in any file format like PDF or an image, for example, PNG. Once generated, the tool can allow to download it at specified path. Below mentioned script is an attempt to try this sample tool.

In this script example, which contains HTML, CSS and JavaScript, it allows to select Month (through Month names dropdown), Year (through year value dropdown). File Name path was just tried to specify any known path. In the sample script, it manual editable free form text box. But, it can be enhanced or completely, removed if not required. While downloading the file, browser setting might take precedence, and saves the file at default path.

Considering, calendar for the specific month and year, can have different event for different country. That functionality need to be built on top of current code. Design and layout of calendar can also be enhanced suitable to user's need and taste. However, those need more customization and code along with the basic code provided here. 

Try the below code and see if it is helpful for your task. This can also be used in layout custom script widget of Blogger. To use it at other purpose, the code can be modified to align with required application. Best of luck for your downloadable monthly calendar tool. 😊👍

<!-- Combined HTML, CSS, and JavaScript for Blogger with Dynamic Events and Improved Styling --> <style>     .calendar-container {         font-family: Arial, sans-serif;         background: white;         padding: 20px;         border-radius: 8px;         box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);         text-align: center;         width: 700px;  /* Increased width for better spacing */         margin: 0 auto;     }     .calendar-container h1 {         margin-bottom: 20px;     }     .calendar-container form {         display: flex;         flex-direction: column;         margin-bottom: 20px;     }     .calendar-container label {         margin: 10px 0 5px;         text-align: left;     }     .calendar-container select,     .calendar-container input {         padding: 10px;         margin-bottom: 10px;         border-radius: 4px;         border: 1px solid #ccc;         font-size: 16px;     }     .calendar-container button {         padding: 10px 15px;         background-color: #007BFF;         color: white;         border: none;         border-radius: 4px;         cursor: pointer;         margin-top: 10px;         font-size: 16px;     }     .calendar-container button:hover {         background-color: #0056b3;     }     .calendar-container #calendarPreview {         margin-top: 20px;     }     .calendar-container table {         width: 100%;         border-collapse: collapse;         font-size: 16px;     }     .calendar-container th,     .calendar-container td {         border: 1px solid #ccc;         padding: 10px;         text-align: center;         vertical-align: top;     }     .calendar-container th {         background-color: #f8f8f8;     }     .event {         font-size: 0.75em;         color: #007BFF;         margin-top: 5px;     } </style> <div class="calendar-container">     <h1>Custom Calendar Generator</h1>     <form id="calendarForm">         <label for="month">Month:</label>         <select id="month" name="month">             <option value="0">January</option>             <option value="1">February</option>             <option value="2">March</option>             <option value="3">April</option>             <option value="4">May</option>             <option value="5">June</option>             <option value="6">July</option>             <option value="7">August</option>             <option value="8">September</option>             <option value="9">October</option>             <option value="10">November</option>             <option value="11">December</option>         </select>         <label for="year">Year:</label>         <input type="number" id="year" name="year" min="1900" max="2100">         <label for="country">Country:</label>         <select id="country" name="country">             <option value="USA">United States</option>             <option value="Canada">Canada</option>             <option value="UK">United Kingdom</option>             <option value="Australia">Australia</option>             <option value="India">India</option>             <option value="China">China</option>             <option value="Japan">Japan</option>             <option value="Germany">Germany</option>             <option value="France">France</option>             <option value="Brazil">Brazil</option>             <!-- Add more countries as needed -->         </select>         <label for="filename">Filename:</label>         <input type="text" id="filename" name="filename" placeholder="Enter filename">         <button type="button" onclick="generateCalendar()">Generate Calendar</button>     </form>     <div id="calendarPreview"></div>     <button id="downloadBtn" onclick="downloadImage()">Download as Image</button> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script> <script>     // Set the default year dynamically     document.getElementById('year').value = new Date().getFullYear();     function fetchEvents(year, month, country) {         // Simulating an API call to fetch events for the selected month, year, and country         return new Promise((resolve) => {             const simulatedData = {                 USA: {                     '2023-07-04': 'Independence Day',                     '2023-11-23': 'Thanksgiving Day',                     '2024-07-04': 'Independence Day',                     '2024-11-28': 'Thanksgiving Day'                 },                 Canada: {                     '2023-07-01': 'Canada Day',                     '2023-11-11': 'Remembrance Day',                     '2024-07-01': 'Canada Day',                     '2024-11-11': 'Remembrance Day'                 },                 UK: {                     '2023-12-25': 'Christmas Day',                     '2023-12-26': 'Boxing Day',                     '2024-12-25': 'Christmas Day',                     '2024-12-26': 'Boxing Day'                 },                 // Add more simulated data for other countries and years             };             resolve(simulatedData[country] || {});         });     }     function generateCalendar() {         const month = document.getElementById('month').value;         const year = document.getElementById('year').value;         const country = document.getElementById('country').value;         const calendarPreview = document.getElementById('calendarPreview');         calendarPreview.innerHTML = '';         fetchEvents(year, month, country).then(events => {             const daysInMonth = new Date(year, parseInt(month) + 1, 0).getDate();             const firstDay = new Date(year, month, 1).getDay();             const table = document.createElement('table');             const headerRow = table.insertRow();             const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];             days.forEach(day => {                 const cell = document.createElement('th');                 cell.style.width = '14.28%';  // Ensure equal column width                 cell.textContent = day;                 headerRow.appendChild(cell);             });             let date = 1;             for (let i = 0; i < 6; i++) {                 const row = table.insertRow();                 for (let j = 0; j < 7; j++) {                     const cell = row.insertCell();                     cell.style.height = '80px';  // Ensure equal row height                     if (i === 0 && j < firstDay) {                         cell.textContent = '';                     } else if (date > daysInMonth) {                         break;                     } else {                         const fullDate = `${year}-${String(parseInt(month) + 1).padStart(2, '0')}-${String(date).padStart(2, '0')}`;                         cell.innerHTML = `<div>${date}</div>`;                         if (events[fullDate]) {                             const eventDiv = document.createElement('div');                             eventDiv.className = 'event';                             eventDiv.textContent = events[fullDate];                             cell.appendChild(eventDiv);                         }                         date++;                     }                 }             }             const title = document.createElement('h2');             title.textContent = `Calendar for ${new Date(year, month).toLocaleString('default', { month: 'long' })} ${year}, ${country}`;             calendarPreview.appendChild(title);             calendarPreview.appendChild(table);         });     }     function downloadImage() {         const calendarPreview = document.getElementById('calendarPreview');         const filename = document.getElementById('filename').value || 'calendar';         html2canvas(calendarPreview, { scale: 2 }).then(canvas => {  // Increased scale for higher resolution             const link = document.createElement('a');             link.href = canvas.toDataURL('image/png');             link.download = `${filename}.png`;             link.click();         });     } </script>