angular-dashboard-calendar/fesm2020/angular-dashboard-calendar.mjs

The only ever calendar module in npm

import * as i0 from '@angular/core';
import { Injectable, Component, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';

class CalendarLibraryService {
    constructor() { }
}
CalendarLibraryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarLibraryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
CalendarLibraryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarLibraryService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarLibraryService, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root'
                }]
        }], ctorParameters: function () { return []; } });

class CalendarLibraryComponent {
}
CalendarLibraryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarLibraryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
CalendarLibraryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CalendarLibraryComponent, selector: "lib-calendar-library", ngImport: i0, template: `
    <p>
      calendar-library works!
    </p>
  `, isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarLibraryComponent, decorators: [{
            type: Component,
            args: [{ selector: 'lib-calendar-library', template: `
    <p>
      calendar-library works!
    </p>
  ` }]
        }] });

class DashboardCalendarComponent {
    constructor() {
        this.calendarDays = document.querySelector(".calendar-days");
        this.today = new Date();
        this.date = new Date();
        this.days = [];
        this.currentMonth = this.date.toLocaleDateString("en-US", { month: 'long', year: 'numeric' });
        console.log(this.today.getDate());
        this.currentDate = this.today.getDate();
        this.today.setHours(0, 0, 0, 0);
        this.renderCalendar();
    }
    ngOnInit() {
    }
    renderCalendar() {
        const prevLastDay = new Date(this.date.getFullYear(), this.date.getMonth(), 0).getDate();
        const totalMonthDay = new Date(this.date.getFullYear(), this.date.getMonth() + 1, 0).getDate();
        const startWeekDay = new Date(this.date.getFullYear(), this.date.getMonth(), 0).getDay();
        console.log(prevLastDay, totalMonthDay, startWeekDay);
        // if (!this.calendarDays) return;
        // this.calendarDays.innerHTML = "";
        let totalCalendarDay = 6 * 7;
        // console.log(totalCalendarDay);
        for (let i = 0; i < totalCalendarDay; i++) {
            let day = i - startWeekDay;
            //  console.log(day);
            if (i <= startWeekDay) {
                // adding previous month days
                //this.calendarDays.innerHTML += `${prevLastDay - i}`;
                console.log(prevLastDay - i);
                this.days.push('');
            }
            else if (i <= startWeekDay + totalMonthDay) {
                // adding this month days
                this.date.setDate(day);
                this.date.setHours(0, 0, 0, 0);
                let dayClass = this.date.getTime() === this.today.getTime() ? 'current-day' : 'month-day';
                //  this.calendarDays.innerHTML += `${day}`;
                console.log(day);
                this.days.push(day);
            }
            else {
                // adding next month days
                //  this.calendarDays.innerHTML += `${day - totalMonthDay}`;
            }
        }
    }
    nextMonth() {
        const monthMap = {
            "January": 0,
            "February": 1,
            "March": 2,
            "April": 3,
            "May": 4,
            "June": 5,
            "July": 6,
            "August": 7,
            "September": 8,
            "October": 9,
            "November": 10,
            "December": 11
        };
        //  const currentDate = new Date();
        // const currentMonth = currentDate.getMonth();
        // console.log(currentMonth);
        const currentDate = new Date();
        const currentShownMonth = document.querySelector(".current-month")?.textContent;
        if (currentShownMonth) {
            const monthNamea = currentShownMonth.trim();
            const parts = monthNamea.split(" ");
            // The first part should be the month name
            const monthName = parts[0];
            const monthNumber = monthMap[monthName];
            const nextMonth = (monthNumber === 11) ? 0 : monthNumber + 1;
            const nextMonthDate = new Date(currentDate.getFullYear(), nextMonth);
            const nextMonthName = nextMonthDate.toLocaleString('default', { month: 'long', year: 'numeric' });
            console.log(nextMonthName);
            this.currentMonth = nextMonthName;
        }
        // Get the month number from the mapping object
        //  console.log("Month number:", monthNumber);
        //  console.log(currentShownMonth);
    }
}
DashboardCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
DashboardCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DashboardCalendarComponent, selector: "angular-dashboard-calendar", ngImport: i0, template: "\r\n    <div class=\"card\">\r\n      <div class=\"calendar-toolbar\">\r\n        <!-- <button class=\"prev month-btn\">\r\n          <i class=\"fas fa-chevron-left\"></i>\r\n        </button> -->\r\n        <div class=\"current-month\">{{currentMonth}}</div>\r\n        <button (click)=\"nextMonth()\" class=\"next month-btn\">\r\n          <img src=\"../../assets/right-arrow.png\">\r\n          <!-- <i class=\"fas fa-chevron-right\"></i> -->\r\n        </button>\r\n      </div>\r\n      <div class=\"calendar\">\r\n        <div class=\"weekdays\">\r\n          <div class=\"weekday-name\" style=\"color:red\">Su</div>\r\n          <div class=\"weekday-name\">Mo</div>\r\n          <div class=\"weekday-name\">Tu</div>\r\n          <div class=\"weekday-name\">We</div>\r\n          <div class=\"weekday-name\">Th</div>\r\n          <div class=\"weekday-name\">Fr</div>\r\n          <div class=\"weekday-name\">Sa</div>\r\n        </div>\r\n        <div class=\"weekdays\">\r\n          <div [ngClass]=\"{ 'current-day': day=== currentDate}\" *ngFor=\"let day of days\" class=\"day-list\">{{day}}</div>\r\n        </div>\r\n\r\n      </div>\r\n      <!-- <div class=\"goto-buttons\">\r\n        <button type=\"button\" class=\"btn prev-year\">Prev Year</button>\r\n        <button type=\"button\" class=\"btn today\">Today</button>\r\n        <button type=\"button\" class=\"btn next-year\">Next Year</button>\r\n      </div> -->\r\n    </div>\r\n", styles: ["*{margin:0;padding:0}body{height:100vh;background:rgb(238,174,202);background:radial-gradient(circle,rgba(238,174,202,1) 0%,rgba(148,187,233,1) 100%);display:flex;justify-content:center;align-items:center;font-family:Quicksand,sans-serif;-webkit-user-select:none;user-select:none}.card{width:316px;height:-moz-fit-content;height:fit-content;background-color:#fff;border-radius:15px;box-shadow:0 0 10px #efefef}.calendar-toolbar{display:flex;justify-content:space-between;align-items:center;padding:20px 20px 15px;border-bottom:1px solid #efefef}.calendar-toolbar>.current-month{font-size:20px;font-weight:700;color:#19181a}.calendar-toolbar>[class$=month-btn]{width:40px;aspect-ratio:1;text-align:center;line-height:40px;font-size:14px;color:#19181a;background:#f8f7fa;border:none;border-radius:15px}.weekdays,.calendar-days{display:flex;flex-wrap:wrap;padding-inline:18px}.weekdays{padding-top:12px}.calendar-days{padding-bottom:12px}.weekday-name,[class$=-day]{width:40px;height:40px;color:#19181a;text-align:center;line-height:40px;font-weight:500;font-size:1rem}.weekday-name,.day-list{color:#19181a;font-weight:700}.day-list,[class$=-day]{width:40px;height:40px;color:#19181a;text-align:center;line-height:40px;font-weight:500;font-size:1rem}.current-day{background-color:#7047eb;color:#f8f7fa;border-radius:15px;font-weight:700;transition:.5s;cursor:pointer}.padding-day{color:#a5a5a5;-webkit-user-select:none;user-select:none}.calendar-toolbar>[class$=month-btn]:hover,.month-day:hover,.btn:hover{border-radius:15px;background-color:#f8f7fa;color:#7047eb;transition:.1s;cursor:pointer;box-shadow:inset 0 0 0 1.5px #7047eb}.calendar-toolbar>[class$=month-btn]:focus,.month-day:focus,.btn:focus{border-radius:15px;background-color:#7047eb;color:#f8f7fa}.goto-buttons{border-top:1px solid #efefef;padding-block:18px;display:flex;justify-content:space-evenly}.btn{background:#f8f7fa;border:none;border-radius:15px;padding:11px 13px;color:#19181a;font-family:Quicksand,sans-serif;font-weight:600;font-size:.9rem;margin-right:1px;box-shadow:0 0 #efefef}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardCalendarComponent, decorators: [{
            type: Component,
            args: [{ selector: 'angular-dashboard-calendar', template: "\r\n    <div class=\"card\">\r\n      <div class=\"calendar-toolbar\">\r\n        <!-- <button class=\"prev month-btn\">\r\n          <i class=\"fas fa-chevron-left\"></i>\r\n        </button> -->\r\n        <div class=\"current-month\">{{currentMonth}}</div>\r\n        <button (click)=\"nextMonth()\" class=\"next month-btn\">\r\n          <img src=\"../../assets/right-arrow.png\">\r\n          <!-- <i class=\"fas fa-chevron-right\"></i> -->\r\n        </button>\r\n      </div>\r\n      <div class=\"calendar\">\r\n        <div class=\"weekdays\">\r\n          <div class=\"weekday-name\" style=\"color:red\">Su</div>\r\n          <div class=\"weekday-name\">Mo</div>\r\n          <div class=\"weekday-name\">Tu</div>\r\n          <div class=\"weekday-name\">We</div>\r\n          <div class=\"weekday-name\">Th</div>\r\n          <div class=\"weekday-name\">Fr</div>\r\n          <div class=\"weekday-name\">Sa</div>\r\n        </div>\r\n        <div class=\"weekdays\">\r\n          <div [ngClass]=\"{ 'current-day': day=== currentDate}\" *ngFor=\"let day of days\" class=\"day-list\">{{day}}</div>\r\n        </div>\r\n\r\n      </div>\r\n      <!-- <div class=\"goto-buttons\">\r\n        <button type=\"button\" class=\"btn prev-year\">Prev Year</button>\r\n        <button type=\"button\" class=\"btn today\">Today</button>\r\n        <button type=\"button\" class=\"btn next-year\">Next Year</button>\r\n      </div> -->\r\n    </div>\r\n", styles: ["*{margin:0;padding:0}body{height:100vh;background:rgb(238,174,202);background:radial-gradient(circle,rgba(238,174,202,1) 0%,rgba(148,187,233,1) 100%);display:flex;justify-content:center;align-items:center;font-family:Quicksand,sans-serif;-webkit-user-select:none;user-select:none}.card{width:316px;height:-moz-fit-content;height:fit-content;background-color:#fff;border-radius:15px;box-shadow:0 0 10px #efefef}.calendar-toolbar{display:flex;justify-content:space-between;align-items:center;padding:20px 20px 15px;border-bottom:1px solid #efefef}.calendar-toolbar>.current-month{font-size:20px;font-weight:700;color:#19181a}.calendar-toolbar>[class$=month-btn]{width:40px;aspect-ratio:1;text-align:center;line-height:40px;font-size:14px;color:#19181a;background:#f8f7fa;border:none;border-radius:15px}.weekdays,.calendar-days{display:flex;flex-wrap:wrap;padding-inline:18px}.weekdays{padding-top:12px}.calendar-days{padding-bottom:12px}.weekday-name,[class$=-day]{width:40px;height:40px;color:#19181a;text-align:center;line-height:40px;font-weight:500;font-size:1rem}.weekday-name,.day-list{color:#19181a;font-weight:700}.day-list,[class$=-day]{width:40px;height:40px;color:#19181a;text-align:center;line-height:40px;font-weight:500;font-size:1rem}.current-day{background-color:#7047eb;color:#f8f7fa;border-radius:15px;font-weight:700;transition:.5s;cursor:pointer}.padding-day{color:#a5a5a5;-webkit-user-select:none;user-select:none}.calendar-toolbar>[class$=month-btn]:hover,.month-day:hover,.btn:hover{border-radius:15px;background-color:#f8f7fa;color:#7047eb;transition:.1s;cursor:pointer;box-shadow:inset 0 0 0 1.5px #7047eb}.calendar-toolbar>[class$=month-btn]:focus,.month-day:focus,.btn:focus{border-radius:15px;background-color:#7047eb;color:#f8f7fa}.goto-buttons{border-top:1px solid #efefef;padding-block:18px;display:flex;justify-content:space-evenly}.btn{background:#f8f7fa;border:none;border-radius:15px;padding:11px 13px;color:#19181a;font-family:Quicksand,sans-serif;font-weight:600;font-size:.9rem;margin-right:1px;box-shadow:0 0 #efefef}\n"] }]
        }], ctorParameters: function () { return []; } });

class AgniCalendarModule {
}
AgniCalendarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AgniCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
AgniCalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: AgniCalendarModule, declarations: [CalendarLibraryComponent,
        DashboardCalendarComponent], imports: [CommonModule], exports: [CalendarLibraryComponent, DashboardCalendarComponent] });
AgniCalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AgniCalendarModule, imports: [CommonModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AgniCalendarModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [
                        CalendarLibraryComponent,
                        DashboardCalendarComponent
                    ],
                    imports: [
                        CommonModule
                    ],
                    exports: [
                        CalendarLibraryComponent, DashboardCalendarComponent
                    ]
                }]
        }] });

/*
 * Public API Surface of calendar-library
 */

/**
 * Generated bundle index. Do not edit.
 */

export { AgniCalendarModule, CalendarLibraryComponent, CalendarLibraryService, DashboardCalendarComponent };
//# sourceMappingURL=angular-dashboard-calendar.mjs.map