Skip to content

Commit 74ec5f3

Browse files
khumnathkhumnath
committed
calendar fix + tithi fix
1 parent 709b7f9 commit 74ec5f3

File tree

4 files changed

+225
-48
lines changed

4 files changed

+225
-48
lines changed

‎docs/amawasya.png‎

1.88 MB
Loading

‎docs/calendar.html‎

Lines changed: 220 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<title>Bikram Calendar</title>
77
<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>
9+
<script type="text/javascript" src="tithi.js"></script>
910
<style>
1011
body {
1112
font-family: 'Laila', serif;
@@ -77,6 +78,7 @@
7778
border: 1px solid #ddd;
7879
padding: 10px;
7980
text-align: center;
81+
font-weight: bold;
8082
}
8183

8284
th {
@@ -137,6 +139,7 @@
137139
th, td {
138140
padding: 5px;
139141
font-size: 14px;
142+
font-weight: bold;
140143
}
141144

142145
td {
@@ -159,6 +162,7 @@
159162
th, td {
160163
padding: 3px;
161164
font-size: 12px;
165+
font-weight: bold;
162166
}
163167

164168
td {
@@ -191,6 +195,57 @@
191195
padding: 15px;
192196
}
193197
}
198+
.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+
}
211+
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+
}
222+
223+
.close {
224+
color: #aaa;
225+
float: right;
226+
font-size: 28px;
227+
font-weight: bold;
228+
}
229+
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);
242+
font-size: x-small;
243+
position: relative;
244+
bottom: -10px;
245+
left: -32px;
246+
margin: 2px;
247+
}
248+
194249
</style>
195250
</head>
196251
<body>
@@ -218,6 +273,12 @@ <h1>विक्रम सम्बत क्यालेण्डर</h1>
218273
</div>
219274
<div id="calendar"></div>
220275
</div>
276+
<div id="tithiModal" class="modal">
277+
<div class="modal-content">
278+
<span class="close" onclick="closeModal()">&times;</span>
279+
<p id="tithiInfo"></p>
280+
</div>
281+
</div>
221282
<footer>
222283
<p>© 2024 <a href="https://khumnath.com.np/">khumnath</a>. This project is licensed under the <a href="https://www.gnu.org/licenses/gpl-3.0.html" target="_blank">GNU General Public License v3.0 or later</a>.</p>
223284
<p>For more details, see the <a href="https://www.gnu.org/licenses/gpl-3.0.html" target="_blank">GPL v3 license</a>.</p>
@@ -250,63 +311,177 @@ <h1>विक्रम सम्बत क्यालेण्डर</h1>
250311
return weekdayIndex;
251312
}
252313

253-
function generateCalendar(year, month) {
254-
const calendarDiv = document.getElementById('calendar');
255-
calendarDiv.innerHTML = '';
314+
function convertToDevanagari(number) {
315+
const devanagariDigits = ['०', '१', '२', '३', '४', '५', '६', '७', '८', '९'];
316+
return number.toString().split('').map(digit => devanagariDigits[parseInt(digit, 10)]).join('');
317+
}
318+
319+
function generateCalendar(year, month) {
320+
const calendarDiv = document.getElementById('calendar');
321+
calendarDiv.innerHTML = '';
322+
323+
const daysInMonth = new Bikram().daysInMonth(year, month);
324+
const bikram = new Bikram();
325+
326+
const today = new Date();
327+
const todayBikram = new Bikram();
328+
todayBikram.fromGregorian(today.getFullYear(), today.getMonth() + 1, today.getDate());
329+
const todayBikramYear = todayBikram.getYear();
330+
const todayBikramMonth = todayBikram.getMonth();
331+
const todayBikramDay = todayBikram.getDay();
332+
333+
const defaultLanguage = "nepali";
334+
const monthName = getMonthNameWithDefaultLanguage(month, defaultLanguage);
335+
336+
let calendarHTML = `<h2>${monthName} ${convertToDevanagari(year)}</h2><table><tr>`;
337+
338+
const weekdays = ['आइतवार', 'सोमवार', 'मङ्गलवार', 'बुधवार', 'बिहीवार', 'शुक्रवार', 'शनिवार']; // Nepali weekdays
339+
340+
weekdays.forEach(day => {
341+
calendarHTML += `<th>${day}</th>`;
342+
});
343+
calendarHTML += '</tr><tr>';
344+
345+
const firstDayOfMonth = getfirstWeekday(year, month);
346+
347+
for (let i = 0; i < firstDayOfMonth; i++) {
348+
calendarHTML += '<td class="empty"></td>';
349+
}
256350

257-
const daysInMonth = new Bikram().daysInMonth(year, month);
258-
const bikram = new Bikram();
351+
for (let day = 1; day <= daysInMonth; day++) {
352+
const isToday = (day === todayBikramDay && month === todayBikramMonth && year === todayBikramYear);
353+
const className = isToday ? 'today' : '';
259354

260-
const today = new Date();
261-
const todayBikram = new Bikram();
262-
todayBikram.fromGregorian(today.getFullYear(), today.getMonth() + 1, today.getDate());
263-
const todayBikramYear = todayBikram.getYear();
264-
const todayBikramMonth = todayBikram.getMonth();
265-
const todayBikramDay = todayBikram.getDay();
266-
267-
const defaultLanguage = "nepali";
268-
const monthName = getMonthNameWithDefaultLanguage(month, defaultLanguage);
355+
// Highlight Saturdays (index 6)
356+
const saturdayClass = (firstDayOfMonth + day - 1) % 7 === 6 ? 'saturday' : '';
357+
const finalClass = className ? ` ${className}` : '';
269358

270-
let calendarHTML = `<h2>${monthName} ${year}</h2><table><tr>`;
359+
// Calculate Tithi
360+
const gregorianDate = bikram.toGregorian(year, month, day);
361+
const tithi = calculateTithi(gregorianDate.year, gregorianDate.month, gregorianDate.day);
271362

272-
const weekdays = ['आइतवार', 'सोमवार', 'मङ्गलवार', 'बुधवार', 'बिहीवार', 'शुक्रवार', 'शनिवार']; // Nepali weekdays
363+
let tithiImage = '';
364+
if (tithi.tithi === 'पूर्णिमा') {
365+
tithiImage = '<img src="purnima.png" alt="Purnima" style="width:20px;height:20px;">';
366+
} else if (tithi.tithi === 'अमावास्या') {
367+
tithiImage = '<img src="amawasya.png" alt="Amawasya" style="width:20px;height:20px;">';
368+
}
369+
370+
calendarHTML += `<td class="${finalClass} ${saturdayClass}" onclick="showTithiInfo(${gregorianDate.year}, ${gregorianDate.month}, ${gregorianDate.day}, ${day}, '${tithi.tithi}', '${tithi.paksha}')">
371+
<div class="day-content">
372+
<div>${convertToDevanagari(day)}</div>
373+
<div class="tithi">${tithi.tithi} ${tithiImage}</div>
374+
<div class="gregorian">${gregorianDate.day}</div>
375+
</div>
376+
</td>`;
273377

274-
weekdays.forEach(day => {
275-
calendarHTML += `<th>${day}</th>`;
276-
});
277-
calendarHTML += '</tr><tr>';
278-
279-
const firstDayOfMonth = getfirstWeekday(year, month);
378+
if ((firstDayOfMonth + day) % 7 === 0 && day !== daysInMonth) {
379+
calendarHTML += '</tr><tr>';
380+
}
381+
}
280382

281-
for (let i = 0; i < firstDayOfMonth; i++) {
383+
const remainingCells = (firstDayOfMonth + daysInMonth) % 7;
384+
if (remainingCells !== 0) {
385+
for (let i = 0; i < 7 - remainingCells; i++) {
282386
calendarHTML += '<td class="empty"></td>';
283387
}
388+
}
284389

285-
for (let day = 1; day <= daysInMonth; day++) {
286-
const isToday = (day === todayBikramDay && month === todayBikramMonth && year === todayBikramYear);
287-
const className = isToday ? 'today' : '';
288-
289-
// Highlight Saturdays (index 6)
290-
const saturdayClass = (firstDayOfMonth + day - 1) % 7 === 6 ? 'saturday' : '';
291-
const finalClass = className ? ` ${className}` : '';
292-
293-
calendarHTML += `<td class="${finalClass} ${saturdayClass}">${day}</td>`;
294-
295-
if ((firstDayOfMonth + day) % 7 === 0 && day !== daysInMonth) {
296-
calendarHTML += '</tr><tr>';
297-
}
298-
}
390+
calendarHTML += '</tr></table>';
391+
calendarDiv.innerHTML = calendarHTML;
392+
}
299393

300-
const remainingCells = (firstDayOfMonth + daysInMonth) % 7;
301-
if (remainingCells !== 0) {
302-
for (let i = 0; i < 7 - remainingCells; i++) {
303-
calendarHTML += '<td class="empty"></td>';
304-
}
305-
}
306394

307-
calendarHTML += '</tr></table>';
308-
calendarDiv.innerHTML = calendarHTML;
395+
function showTithiInfo(year, month, day, bikramDay, tithi, paksha) {
396+
const tithiInfo = `तिथि: ${tithi}<br>पक्ष: ${paksha}<br>इस्वि सम्बत् तारीख: ${convertToDevanagari(year)}-${convertToDevanagari(month)}-${convertToDevanagari(day)}<br>विक्रम दिन: ${convertToDevanagari(bikramDay)}`;
397+
document.getElementById('tithiInfo').innerHTML = tithiInfo;
398+
document.getElementById('tithiModal').style.display = 'block';
399+
}
400+
401+
function closeModal() {
402+
document.getElementById('tithiModal').style.display = 'none';
403+
}
404+
405+
window.onclick = function(event) {
406+
const modal = document.getElementById('tithiModal');
407+
if (event.target == modal) {
408+
modal.style.display = 'none';
409+
}
410+
}
411+
412+
413+
function showTithiInfo(year, month, day, bikramDay, tithi, paksha) {
414+
const tithiInfo = `तिथि: ${tithi}<br>पक्ष: ${paksha}<br>तारीख: ${year}-${month}-${day}<br>विक्रम दिन: ${bikramDay}`;
415+
document.getElementById('tithiInfo').innerHTML = tithiInfo;
416+
document.getElementById('tithiModal').style.display = 'block';
417+
}
418+
419+
function closeModal() {
420+
document.getElementById('tithiModal').style.display = 'none';
421+
}
422+
423+
window.onclick = function(event) {
424+
const modal = document.getElementById('tithiModal');
425+
if (event.target == modal) {
426+
modal.style.display = 'none';
427+
}
428+
}
429+
430+
431+
function showTithiInfo(year, month, day, bikramDay, tithi, paksha) {
432+
const tithiInfo = `तिथि: ${tithi}<br>पक्ष: ${paksha}<br>तारीख: ${year}-${month}-${day}<br>विक्रम दिन: ${bikramDay}`;
433+
document.getElementById('tithiInfo').innerHTML = tithiInfo;
434+
document.getElementById('tithiModal').style.display = 'block';
435+
}
436+
437+
function closeModal() {
438+
document.getElementById('tithiModal').style.display = 'none';
439+
}
440+
441+
window.onclick = function(event) {
442+
const modal = document.getElementById('tithiModal');
443+
if (event.target == modal) {
444+
modal.style.display = 'none';
309445
}
446+
}
447+
448+
449+
function showTithiInfo(year, month, day, bikramDay, tithi, paksha) {
450+
const tithiInfo = `तिथि: ${tithi}<br>पक्ष: ${paksha}<br>मिति: ${year}-${month}-${day}<br>विक्रम दिन: ${bikramDay}`;
451+
document.getElementById('tithiInfo').innerHTML = tithiInfo;
452+
document.getElementById('tithiModal').style.display = 'block';
453+
}
454+
455+
function closeModal() {
456+
document.getElementById('tithiModal').style.display = 'none';
457+
}
458+
459+
window.onclick = function(event) {
460+
const modal = document.getElementById('tithiModal');
461+
if (event.target == modal) {
462+
modal.style.display = 'none';
463+
}
464+
}
465+
466+
467+
function showTithiInfo(year, month, day) {
468+
const tithi = calculateTithi(year, month, day);
469+
const tithiInfo = `तिथि: ${tithi.tithi}<br>पक्ष: ${tithi.paksha}<br>तारीख: ${year}-${month}-${day}`;
470+
document.getElementById('tithiInfo').innerHTML = tithiInfo;
471+
document.getElementById('tithiModal').style.display = 'block';
472+
}
473+
474+
function closeModal() {
475+
document.getElementById('tithiModal').style.display = 'none';
476+
}
477+
478+
window.onclick = function(event) {
479+
const modal = document.getElementById('tithiModal');
480+
if (event.target == modal) {
481+
modal.style.display = 'none';
482+
}
483+
}
484+
310485

311486
function getMonthNameWithDefaultLanguage(month, language) {
312487
const bikram = new Bikram();

‎docs/purnima.png‎

3.93 MB
Loading

‎docs/tithi.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ function calculateTithi(year, month, day) {
22
const tdays = calculateDaysSinceJ2000(year, month, day);
33
const tithiIndex = calculateTithiIndex(tdays);
44
return {
5-
tithi: getTithiName(tithiIndex + 1),
5+
tithi: getTithiName(tithiIndex),
66
paksha: getPaksha(tithiIndex)
77
};
88
}
@@ -43,9 +43,11 @@ function getSunLongitude(tdays) {
4343
function getTithiName(tithiIndex) {
4444
const tithiNames = [
4545
"प्रतिपदा", "द्वितीया", "तृतीया", "चतुर्थी", "पंचमी", "षष्ठी", "सप्तमी", "अष्टमी",
46-
"नवमी", "दशमी", "एकादशी", "द्वादशी", "त्रयोदशी", "चतुर्दशी", "पूर्णिमा", "अमावास्या"
46+
"नवमी", "दशमी", "एकादशी", "द्वादशी", "त्रयोदशी", "चतुर्दशी", "पूर्णिमा", "प्रतिपदा",
47+
"द्वितीया", "तृतीया", "चतुर्थी", "पंचमी", "षष्ठी", "सप्तमी", "अष्टमी", "नवमी", "दशमी",
48+
"एकादशी", "द्वादशी", "त्रयोदशी", "चतुर्दशी", "अमावास्या"
4749
];
48-
return tithiNames[tithiIndex % 15];
50+
return tithiNames[(tithiIndex +1)% 30];
4951
}
5052

5153
function getPaksha(tithiIndex) {

0 commit comments

Comments
 (0)