calendar ui change. responsive css updated

khumnath · Nov 26, 2024 · e4921cd · e4921cd
1 parent 74ec5f3
commit e4921cd
Showing 1 changed file with 101 additions and 48 deletions.
diff --git a/docs/calendar.html b/docs/calendar.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Bikram Calendar</title>
-    <link href="https://fonts.googleapis.com/css2?family=laila:wght@400;500&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Laila:wght@400;500&display=swap" rel="stylesheet">
     <script type="text/javascript" src="bikram.js"></script>
     <script type="text/javascript" src="tithi.js"></script>
     <style>
@@ -46,7 +46,6 @@
             border: 1px solid #ddd;
             border-radius: 4px;
             background-color: #f1f1f1;
-            font-size: 16px;
             flex: 1 1 auto;
         }
 
@@ -69,7 +68,6 @@
 
         table {
             width: 100%;
-
             margin-top: 20px;
             table-layout: fixed;
         }
@@ -79,6 +77,8 @@
             padding: 10px;
             text-align: center;
             font-weight: bold;
+            position: relative; 
+            cursor: pointer;
         }
 
         th {
@@ -89,6 +89,7 @@
         td {
             height: 60px;
             vertical-align: top;
+            position: relative; 
         }
 
         tr:first-child td:first-child {
@@ -196,56 +197,69 @@
             }
         }
         .modal {
-        display: none;
-        position: fixed;
-        z-index: 1;
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: 100%;
-        overflow: auto;
-        background-color: rgb(0,0,0);
-        background-color: rgba(0,0,0,0.4);
-        padding-top: 60px;
-    }
+            display: none;
+            position: fixed;
+            z-index: 1;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            overflow: auto;
+            background-color: rgb(0,0,0);
+            background-color: rgba(0,0,0,0.4);
+            padding-top: 60px;
+        }
 
-    .modal-content {
-        background-color: #fefefe;
-        margin: 5% auto;
-        padding: 20px;
-        border: 1px solid #888;
-        width: 80%;
-        max-width: 500px;
-        border-radius: 8px;
-        text-align: center;
-    }
+        .modal-content {
+            background-color: #fefefe;
+            margin: 5% auto;
+            padding: 20px;
+            border: 1px solid #888;
+            width: 80%;
+            max-width: 500px;
+            border-radius: 8px;
+            text-align: center;
+        }
 
-    .close {
-        color: #aaa;
-        float: right;
-        font-size: 28px;
-        font-weight: bold;
-    }
+        .close {
+            color: #aaa;
+            float: right;
+            font-size: 28px;
+            font-weight: bold;
+        }
 
-    .close:hover,
-    .close:focus {
-        color: black;
-        text-decoration: none;
-        cursor: pointer;
-    }
-    .tithi {
-    color: #106bdb; 
-    font-size: 10px; 
-}
-.gregorian {
-    color: rgb(152, 191, 25);
+        .close:hover,
+        .close:focus {
+            color: black;
+            text-decoration: none;
+            cursor: pointer;
+        }
+
+        .tithi {
+            color: #106bdb; 
+            font-size: xx-small; 
+        }
+
+        .gregorian {
+            color: rgb(231 175 68);
+            font-size: 65%;
+            position: absolute; 
+            bottom: 2px; 
+            left: 2px; 
+            margin: 2px;
+        }
+
+        .gregorian-month-display {
+    /* margin-right: 38px; */
     font-size: x-small;
-    position: relative;
-    bottom: -10px;
-    left: -32px;
-    margin: 2px;
+    color: #827a7a;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: flex-end;
 }
 
+
     </style>
 </head>
 <body>
@@ -332,8 +346,13 @@ <h1>विक्रम सम्बत क्यालेण्डर</h1>
 
     const defaultLanguage = "nepali";
     const monthName = getMonthNameWithDefaultLanguage(month, defaultLanguage);
+    const gregorianStart = getGregorianDate(year, month, 1);
+    const gregorianEnd = getLastDayOfGregorian(year, month);
+
+    const gregorianMonthDisplay = formatGregorianMonthDisplay(gregorianStart, gregorianEnd);
+
 
-    let calendarHTML = `<h2>${monthName} ${convertToDevanagari(year)}</h2><table><tr>`;
+    let calendarHTML = `<h2>${monthName} ${convertToDevanagari(year)} <span class="gregorian-month-display">${gregorianMonthDisplay}</span></h2><table><tr>`;
 
     const weekdays = ['आइतवार', 'सोमवार', 'मङ्गलवार', 'बुधवार', 'बिहीवार', 'शुक्रवार', 'शनिवार'];  // Nepali weekdays
 
@@ -529,6 +548,40 @@ <h1>विक्रम सम्बत क्यालेण्डर</h1>
             generateCalendar(currentYear, currentMonth);
         }
 
+        function getGregorianDate(year, month, day) {
+    const bikram = new Bikram();
+    return bikram.toGregorian(year, month, day);
+}
+
+function getLastDayOfGregorian(year, month) {
+    const bikram = new Bikram();
+    const nextMonthFirstDay = bikram.toGregorian(year, month + 1, 1);
+    const lastDayOfMonth = new Date(nextMonthFirstDay.year, nextMonthFirstDay.month - 1, nextMonthFirstDay.day - 1);
+    return {
+        day: lastDayOfMonth.getDate(),
+        month: lastDayOfMonth.getMonth() + 1, // months are 0-indexed in JavaScript Date
+        year: lastDayOfMonth.getFullYear()
+    };
+}
+
+function getGregorianMonthName(month) {
+    const gregorianMonths = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+    return gregorianMonths[month - 1];
+}
+
+function formatGregorianMonthDisplay(gregorianStart, gregorianEnd) {
+    if (gregorianStart.year === gregorianEnd.year) {
+        if (gregorianStart.month === gregorianEnd.month) {
+            return `${gregorianStart.year} ${getGregorianMonthName(gregorianStart.month)}`;
+        } else {
+            return `${gregorianStart.year} ${getGregorianMonthName(gregorianStart.month)}/${getGregorianMonthName(gregorianEnd.month)}`;
+        }
+    } else {
+        return `${gregorianStart.year}/${gregorianEnd.year} ${getGregorianMonthName(gregorianStart.month)}/${getGregorianMonthName(gregorianEnd.month)}`;
+    }
+}
+
+
         window.onload = showCurrentMonth;
     </script>
 </body>