Indian Time Now : 08-Oct-2025 23:02:44
ASHWIN 2082
SEP-OCT 2025
Bratabandha:
none
Marriage:
none
Pasni:
5,19,23,29
/* styles.css */
.calendar-container {
width: 90%; /* Adjust as needed */
max-width: 600px;
margin: 20px auto;
border: 1px solid #ccc;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
font-family: Arial, sans-serif;
}
/* — Header Styling — */
.calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background-color: #f7f7f7;
border-bottom: 1px solid #ddd;
font-weight: bold;
}
.current-month-year {
text-align: center;
}
#nepali-month-year {
font-size: 1.2em;
color: #A00; /* Example color from the image */
}
#ad-month-year {
font-size: 0.8em;
color: #555;
display: block;
}
.nav-btn {
background: none;
border: 1px solid #ccc;
padding: 5px 10px;
cursor: pointer;
font-size: 1.2em;
}
/* — Day Names & Dates Grid Styling — */
.day-names-grid, .dates-grid {
display: grid;
grid-template-columns: repeat(7, 1fr); /* 7 equal columns */
text-align: center;
border-left: 1px solid #ddd;
}
.day-names-grid > div {
padding: 8px 0;
font-weight: bold;
font-size: 0.9em;
border-top: 1px solid #ddd;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
background-color: #eee;
}
/* — Individual Date Cell Styling — */
.date-cell {
/* For aligning content inside the cell */
display: flex;
flex-direction: column;
height: 60px; /* Give cells a fixed height */
padding: 5px;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
overflow: hidden; /* Hide overflowing text */
}
/* Left border fix for the first column */
.date-cell:nth-child(7n+1) {
border-left: none; /* Already covered by parent’s left border */
}
/* Styling for the content inside a cell */
.nepali-date {
font-size: 1.2em;
font-weight: bold;
color: #444;
text-align: right;
}
.ad-date {
font-size: 0.7em;
color: orange; /* Example color for the AD date */
text-align: right;
}
.event {
font-size: 0.6em;
color: #A00;
text-align: left;
line-height: 1.2;
}
/* Styling for specific events (e.g., today’s date) */
.holiday {
background-color: #fee; /* Light red background */
}
.red-text {
color: red;
}
/* — Subha Sait Styling — */
.subha-sait {
background-color: #fcf8e3; /* Light yellow background */
padding: 10px;
border-top: 3px solid #ffcc00;
margin-top: -1px; /* Overlap border with grid for a clean look */
display: flex;
flex-wrap: wrap; /* Allows items to wrap on smaller screens */
align-items: center;
}
.sait-label {
font-weight: bold;
margin-right: 10px;
}
.sait-category {
margin-right: 15px;
}
.category-title {
font-weight: bold;
color: #666;
}
.category-dates {
color: #000;
}
// script.js
const datesGrid = document.getElementById(‘dates-grid’);
const nepaliMonthYear = document.getElementById(‘nepali-month-year’);
const adMonthYear = document.getElementById(‘ad-month-year’);
// Initial date – use the date from the image for display
let currentMonth = 8; // October (0-indexed: 0=Jan, 9=Oct)
let currentYear = 2025;
const adMonths = [“January”, “February”, “March”, “April”, “May”, “June”, “July”, “August”, “September”, “October”, “November”, “December”];
// Note: You would need a lookup array for Nepali months (e.g., Baisakh, Jestha, etc.)
function renderCalendar(month, year) {
// 1. Clear previous dates
datesGrid.innerHTML = ”;
// 2. Get the date of the first day of the month (to find the starting weekday)
const firstDay = new Date(year, month, 1);
const startingDayOfWeek = firstDay.getDay(); // 0 (Sunday) to 6 (Saturday)
// 3. Get the number of days in the month
const daysInMonth = new Date(year, month + 1, 0).getDate();
// 4. Update the header display
// For a real Nepali calendar, this is where you’d use the library to convert and display
adMonthYear.textContent = `${adMonths[month]} ${year}`;
// Simplified static display from image:
nepaliMonthYear.textContent = `ASHWIN 2082`;
// 5. Add empty cells for days before the first day of the month
for (let i = 0; i < startingDayOfWeek; i++) {
const emptyCell = document.createElement('div');
emptyCell.classList.add('date-cell', 'empty');
datesGrid.appendChild(emptyCell);
}
// 6. Add date cells
for (let day = 1; day <= daysInMonth; day++) {
const cell = document.createElement('div');
cell.classList.add('date-cell');
// Check for special days (e.g., Saturday is red in the image)
const currentDate = new Date(year, month, day);
if (currentDate.getDay() === 6) { // 6 is Saturday
cell.classList.add('holiday'); // Background color
}
// Add the content structure
cell.innerHTML = `
${day + 5} ${day}
`;
// **In a real app, you would fetch and insert events here based on the date**
datesGrid.appendChild(cell);
}
}
// Event Listeners for navigation buttons
document.getElementById(‘prevMonth’).addEventListener(‘click’, () => {
currentMonth–;
if (currentMonth {
currentMonth++;
if (currentMonth > 11) {
currentMonth = 0;
currentYear++;
}
renderCalendar(currentMonth, currentYear);
});
// Initial load
renderCalendar(currentMonth, currentYear);