\r\n calendar-library works!\r\n
\r\n `,\r\n styles: [\r\n ]\r\n})\r\nexport class CalendarLibraryComponent {\r\n\r\n}\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'angular-dashboard-calendar',\r\n templateUrl: './dashboard-calendar.component.html',\r\n styleUrls: ['./dashboard-calendar.component.css']\r\n})\r\nexport class DashboardCalendarComponent {\r\n currentMonth: any;\r\n currentDate: any;\r\n calendarDays: HTMLElement | null = document.querySelector(\".calendar-days\");\r\n today: Date = new Date();\r\n date: Date = new Date();\r\n days: any = []\r\n constructor() {\r\n this.currentMonth = this.date.toLocaleDateString(\"en-US\", { month: 'long', year: 'numeric' });\r\n console.log(this.today.getDate());\r\nthis.currentDate = this.today.getDate();\r\n this.today.setHours(0, 0, 0, 0);\r\n this.renderCalendar();\r\n }\r\n\r\n ngOnInit(): void {\r\n }\r\n\r\n\r\n renderCalendar(): void {\r\n const prevLastDay = new Date(this.date.getFullYear(), this.date.getMonth(), 0).getDate();\r\n const totalMonthDay = new Date(this.date.getFullYear(), this.date.getMonth() + 1, 0).getDate();\r\n const startWeekDay = new Date(this.date.getFullYear(), this.date.getMonth(), 0).getDay();\r\nconsole.log(prevLastDay, totalMonthDay, startWeekDay);\r\n\r\n // if (!this.calendarDays) return;\r\n\r\n // this.calendarDays.innerHTML = \"\";\r\n\r\n let totalCalendarDay = 6 * 7;\r\n // console.log(totalCalendarDay);\r\n\r\n for (let i = 0; i < totalCalendarDay; i++) {\r\n let day = i - startWeekDay;\r\n // console.log(day);\r\n\r\n if (i <= startWeekDay) {\r\n\r\n\r\n // adding previous month days\r\n //this.calendarDays.innerHTML += `${prevLastDay - i}`;\r\n console.log(prevLastDay - i);\r\n this.days.push('')\r\n } else if (i <= startWeekDay + totalMonthDay) {\r\n // adding this month days\r\n this.date.setDate(day);\r\n this.date.setHours(0, 0, 0, 0);\r\n\r\n let dayClass = this.date.getTime() === this.today.getTime() ? 'current-day' : 'month-day';\r\n // this.calendarDays.innerHTML += `${day}`;\r\n console.log(day);\r\n\r\n this.days.push(day);\r\n } else {\r\n // adding next month days\r\n // this.calendarDays.innerHTML += `${day - totalMonthDay}`;\r\n }\r\n }\r\n }\r\n\r\nnextMonth(){\r\n const monthMap: any = {\r\n \"January\": 0,\r\n \"February\": 1,\r\n \"March\": 2,\r\n \"April\": 3,\r\n \"May\": 4,\r\n \"June\": 5,\r\n \"July\": 6,\r\n \"August\": 7,\r\n \"September\": 8,\r\n \"October\": 9,\r\n \"November\": 10,\r\n \"December\": 11\r\n };\r\n// const currentDate = new Date();\r\n// const currentMonth = currentDate.getMonth();\r\n// console.log(currentMonth);\r\nconst currentDate = new Date();\r\n const currentShownMonth = document.querySelector(\".current-month\")?.textContent;\r\n\r\n if(currentShownMonth){\r\n const monthNamea: any = currentShownMonth.trim();\r\nconst parts = monthNamea.split(\" \");\r\n\r\n// The first part should be the month name\r\nconst monthName = parts[0];\r\n\r\n const monthNumber = monthMap[monthName];\r\n\r\n const nextMonth = (monthNumber === 11) ? 0 : monthNumber + 1;\r\n const nextMonthDate = new Date(currentDate.getFullYear(), nextMonth);\r\n const nextMonthName = nextMonthDate.toLocaleString('default', { month: 'long', year: 'numeric'});\r\n console.log(nextMonthName);\r\nthis.currentMonth = nextMonthName;\r\n }\r\n\r\n // Get the month number from the mapping object\r\n\r\n\r\n// console.log(\"Month number:\", monthNumber);\r\n// console.log(currentShownMonth);\r\n\r\n}\r\n}\r\n","\r\n