Skip to content

Commit e4921cd

Browse files
khumnathkhumnath
committed
calendar ui change. responsive css updated
1 parent 74ec5f3 commit e4921cd

File tree

1 file changed

+101
-48
lines changed

1 file changed

+101
-48
lines changed

‎docs/calendar.html‎

Lines changed: 101 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Bikram Calendar</title>
7-
<link href="https://fonts.googleapis.com/css2?family=laila:wght@400;500&display=swap" rel="stylesheet">
7+
<link href="https://fonts.googleapis.com/css2?family=Laila:wght@400;500&display=swap" rel="stylesheet">
88
<script type="text/javascript" src="bikram.js"></script>
99
<script type="text/javascript" src="tithi.js"></script>
1010
<style>
@@ -46,7 +46,6 @@
4646
border: 1px solid #ddd;
4747
border-radius: 4px;
4848
background-color: #f1f1f1;
49-
font-size: 16px;
5049
flex: 1 1 auto;
5150
}
5251

@@ -69,7 +68,6 @@
6968

7069
table {
7170
width: 100%;
72-
7371
margin-top: 20px;
7472
table-layout: fixed;
7573
}
@@ -79,6 +77,8 @@
7977
padding: 10px;
8078
text-align: center;
8179
font-weight: bold;
80+
position: relative;
81+
cursor: pointer;
8282
}
8383

8484
th {
@@ -89,6 +89,7 @@
8989
td {
9090
height: 60px;
9191
vertical-align: top;
92+
position: relative;
9293
}
9394

9495
tr:first-child td:first-child {
@@ -196,56 +197,69 @@
196197
}
197198
}
198199
.modal {
199-
display: none;
200-
position: fixed;
201-
z-index: 1;
202-
left: 0;
203-
top: 0;
204-
width: 100%;
205-
height: 100%;
206-
overflow: auto;
207-
background-color: rgb(0,0,0);
208-
background-color: rgba(0,0,0,0.4);
209-
padding-top: 60px;
210-
}
200+
display: none;
201+
position: fixed;
202+
z-index: 1;
203+
left: 0;
204+
top: 0;
205+
width: 100%;
206+
height: 100%;
207+
overflow: auto;
208+
background-color: rgb(0,0,0);
209+
background-color: rgba(0,0,0,0.4);
210+
padding-top: 60px;
211+
}
211212

212-
.modal-content {
213-
background-color: #fefefe;
214-
margin: 5% auto;
215-
padding: 20px;
216-
border: 1px solid #888;
217-
width: 80%;
218-
max-width: 500px;
219-
border-radius: 8px;
220-
text-align: center;
221-
}
213+
.modal-content {
214+
background-color: #fefefe;
215+
margin: 5% auto;
216+
padding: 20px;
217+
border: 1px solid #888;
218+
width: 80%;
219+
max-width: 500px;
220+
border-radius: 8px;
221+
text-align: center;
222+
}
222223

223-
.close {
224-
color: #aaa;
225-
float: right;
226-
font-size: 28px;
227-
font-weight: bold;
228-
}
224+
.close {
225+
color: #aaa;
226+
float: right;
227+
font-size: 28px;
228+
font-weight: bold;
229+
}
229230

230-
.close:hover,
231-
.close:focus {
232-
color: black;
233-
text-decoration: none;
234-
cursor: pointer;
235-
}
236-
.tithi {
237-
color: #106bdb;
238-
font-size: 10px;
239-
}
240-
.gregorian {
241-
color: rgb(152, 191, 25);
231+
.close:hover,
232+
.close:focus {
233+
color: black;
234+
text-decoration: none;
235+
cursor: pointer;
236+
}
237+
238+
.tithi {
239+
color: #106bdb;
240+
font-size: xx-small;
241+
}
242+
243+
.gregorian {
244+
color: rgb(231 175 68);
245+
font-size: 65%;
246+
position: absolute;
247+
bottom: 2px;
248+
left: 2px;
249+
margin: 2px;
250+
}
251+
252+
.gregorian-month-display {
253+
/* margin-right: 38px; */
242254
font-size: x-small;
243-
position: relative;
244-
bottom: -10px;
245-
left: -32px;
246-
margin: 2px;
255+
color: #827a7a;
256+
display: flex;
257+
flex-direction: column;
258+
flex-wrap: wrap;
259+
justify-content: flex-end;
247260
}
248261

262+
249263
</style>
250264
</head>
251265
<body>
@@ -332,8 +346,13 @@ <h1>विक्रम सम्बत क्यालेण्डर</h1>
332346

333347
const defaultLanguage = "nepali";
334348
const monthName = getMonthNameWithDefaultLanguage(month, defaultLanguage);
349+
const gregorianStart = getGregorianDate(year, month, 1);
350+
const gregorianEnd = getLastDayOfGregorian(year, month);
351+
352+
const gregorianMonthDisplay = formatGregorianMonthDisplay(gregorianStart, gregorianEnd);
353+
335354

336-
let calendarHTML = `<h2>${monthName} ${convertToDevanagari(year)}</h2><table><tr>`;
355+
let calendarHTML = `<h2>${monthName} ${convertToDevanagari(year)} <span class="gregorian-month-display">${gregorianMonthDisplay}</span></h2><table><tr>`;
337356

338357
const weekdays = ['आइतवार', 'सोमवार', 'मङ्गलवार', 'बुधवार', 'बिहीवार', 'शुक्रवार', 'शनिवार']; // Nepali weekdays
339358

@@ -529,6 +548,40 @@ <h1>विक्रम सम्बत क्यालेण्डर</h1>
529548
generateCalendar(currentYear, currentMonth);
530549
}
531550

551+
function getGregorianDate(year, month, day) {
552+
const bikram = new Bikram();
553+
return bikram.toGregorian(year, month, day);
554+
}
555+
556+
function getLastDayOfGregorian(year, month) {
557+
const bikram = new Bikram();
558+
const nextMonthFirstDay = bikram.toGregorian(year, month + 1, 1);
559+
const lastDayOfMonth = new Date(nextMonthFirstDay.year, nextMonthFirstDay.month - 1, nextMonthFirstDay.day - 1);
560+
return {
561+
day: lastDayOfMonth.getDate(),
562+
month: lastDayOfMonth.getMonth() + 1, // months are 0-indexed in JavaScript Date
563+
year: lastDayOfMonth.getFullYear()
564+
};
565+
}
566+
567+
function getGregorianMonthName(month) {
568+
const gregorianMonths = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
569+
return gregorianMonths[month - 1];
570+
}
571+
572+
function formatGregorianMonthDisplay(gregorianStart, gregorianEnd) {
573+
if (gregorianStart.year === gregorianEnd.year) {
574+
if (gregorianStart.month === gregorianEnd.month) {
575+
return `${gregorianStart.year} ${getGregorianMonthName(gregorianStart.month)}`;
576+
} else {
577+
return `${gregorianStart.year} ${getGregorianMonthName(gregorianStart.month)}/${getGregorianMonthName(gregorianEnd.month)}`;
578+
}
579+
} else {
580+
return `${gregorianStart.year}/${gregorianEnd.year} ${getGregorianMonthName(gregorianStart.month)}/${getGregorianMonthName(gregorianEnd.month)}`;
581+
}
582+
}
583+
584+
532585
window.onload = showCurrentMonth;
533586
</script>
534587
</body>

0 commit comments

Comments
 (0)