set current day highlight and click to open popup detail

.vscode/launch.json

@@ -2,9 +2,17 @@
   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
   "version": "0.2.0",
   "configurations": [
+
+
+    {
+      "name": "Launch Chrome",
+      "request": "launch",
+      "type": "chrome",
+      "url": "http://localhost:4200"
+    },
     {
       "name": "ng serve",
-      "type": "pwa-chrome",
+      "type": "chrome",
       "request": "launch",
       "preLaunchTask": "npm: start",
       "url": "http://localhost:4200/"
@@ -15,6 +23,20 @@
       "request": "launch",
       "preLaunchTask": "npm: test",
       "url": "http://localhost:9876/debug.html"
-    }
+    },
+    {
+      "name": "Launch Edge",
+      "request": "launch",
+      "type": "msedge",
+      "url": "http://localhost:4200"
+    },
+    {
+      "name": "ng serve edge",
+      "type": "msedge",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+
   ]
-}
+}

app/src/app.component.css

@@ -0,0 +1,117 @@
+
+::ng-deep .fc-day-today {
+    --fc-today-bg-color:#10569c; /* Semi-transparent light gray */}
+
+
+
+.fc-day-today {
+    --fc-today-bg-color:#000102; /* Semi-transparent light gray */
+}
+
+/* Center the month label in the toolbar */
+/* ::ng-deep.fc .fc-toolbar-title {
+    text-align: center;
+} */
+
+/* If you also want to center the text within each day cell */
+/* ::ng-deep.fc .fc-daygrid-day-frame {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+} */
+
+/* If you want to center the header cells, which display the days of the week (e.g., Sun, Mon, etc.) */
+/* ::ng-deep.fc .fc-col-header-cell {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+} */
+::ng-deep.fc-toolbar{
+    background-color: blue;
+    align-items: center;
+
+}
+
+
+/* Sunday */
+::ng-deep .fc-col-header-cell.fc-day-sun {
+    background-color: #FF9C9C;  /* Brighter Red */
+}
+
+/* Monday */
+::ng-deep .fc-col-header-cell.fc-day-mon {
+    background-color: #93C5FF;  /* Brighter Blue */
+}
+
+/* Tuesday */
+::ng-deep .fc-col-header-cell.fc-day-tue {
+    background-color: #93FFAB;  /* Brighter Green */
+}
+
+/* Wednesday */
+::ng-deep .fc-col-header-cell.fc-day-wed {
+    background-color: #FFFF9C;  /* Brighter Yellow */
+}
+
+/* Thursday */
+::ng-deep .fc-col-header-cell.fc-day-thu {
+    background-color: #D293FF;  /* Brighter Purple */
+}
+
+/* Friday */
+::ng-deep .fc-col-header-cell.fc-day-fri {
+    background-color: #FFC993;  /* Brighter Orange */
+}
+
+/* Saturday */
+::ng-deep .fc-col-header-cell.fc-day-sat {
+    background-color: #93E2FF;  /* Brighter Teal */
+}
+
+
+
+::ng-deep .fc-day-sun {
+    background-color: #ffcccc;  /* Color for Sunday */
+}
+
+::ng-deep .fc-day-mon {
+    background-color: #ffe0cc;  /* Color for Monday */
+}
+
+::ng-deep .fc-day-tue {
+    background-color: #ffffcc;  /* Color for Tuesday */
+}
+
+::ng-deep .fc-day-wed {
+    background-color: #e0ffcc;  /* Color for Wednesday */
+}
+
+::ng-deep .fc-day-thu {
+    background-color: #ccffcc;  /* Color for Thursday */
+}
+
+::ng-deep .fc-day-fri {
+    background-color: #ccffe0;  /* Color for Friday */
+}
+
+::ng-deep .fc-day-sat {
+    background-color: #ccffff;  /* Color for Saturday */
+}
+
+.popup {
+    position: absolute;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    padding: 10px;
+  }
+  .modal {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    padding: 20px;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    z-index: 1000;
+  }

app/src/app.component.html

@@ -1,11 +1,15 @@
 <button (click)="updateHeader()" id="updateHeader">Update header</button>
 <button (click)="updateEvents()" id="updateEvents">Update events</button>
-<full-calendar
-  *ngIf="calendarOptions"
-  #fullcalendar
-  [options]="calendarOptions"
->
+<button (click)="goToToday()">Today</button>
+<full-calendar *ngIf="calendarOptions" #fullcalendar [options]="calendarOptions">
   <ng-template #eventContent let-arg>
     <b>{{ arg.event.title }}</b> - {{ arg.event.start.getDate() }}
   </ng-template>
 </full-calendar>
+<!-- <div #popup class="popup" *ngIf="showPopup" [ngStyle]="{top: position.top + 'px', left: position.left + 'px'}">
+  <input type="text" [(ngModel)]="popupText">
+</div> -->
+<div *ngIf="showPopup" class="modal">
+  Selected Date: {{ selectedDate }}
+  <button (click)="closePopup()">Close</button>
+</div>

app/src/app.component.ts

@@ -3,6 +3,7 @@ import { CalendarOptions, Calendar, EventClickArg } from '@fullcalendar/core';
 import dayGridPlugin from '@fullcalendar/daygrid';
 import interactionPlugin, { DateClickArg, EventDragStopArg } from '@fullcalendar/interaction';
 import { FullCalendarComponent } from '@fullcalendar/angular';
+import { startOfDay, isSameDay } from 'date-fns';
 
 @Component({
   selector: 'app-root',
@@ -11,9 +12,20 @@ import { FullCalendarComponent } from '@fullcalendar/angular';
 })
 export class AppComponent implements OnInit {
 
-  calendarOptions?: CalendarOptions;
+  calendarOptions: CalendarOptions = {
+    // ... your other options
+    nowIndicator: true,
+    initialView: 'dayGridMonth',
+    dateClick: this.handleDateClick.bind(this), 
+
+  }
   eventsModel: any;
-  @ViewChild('fullcalendar') fullcalendar?: FullCalendarComponent;
+  showPopup: boolean = false;
+  selectedDate: string = '';
+  mouseDownTime: number = 0;
+  // @ViewChild('fullcalendar') fullcalendar?: FullCalendarComponent;
+  @ViewChild('fullcalendar', { static: false })
+  calendar!: FullCalendarComponent;
 
   ngOnInit() {
     // need for load calendar bundle first
@@ -31,20 +43,44 @@ export class AppComponent implements OnInit {
         }
       },
       headerToolbar: {
-        left: 'prev,next today myCustomButton',
+        left: 'prev',
         center: 'title',
-        right: 'dayGridMonth'
+        right: 'next'
       },
+
+
       dateClick: this.handleDateClick.bind(this),
       eventClick: this.handleEventClick.bind(this),
       eventDragStop: this.handleEventDragStop.bind(this)
     };
   }
 
+  goToToday() {
+    this.calendar.getApi().today();
+  }
+
   handleDateClick(arg: DateClickArg) {
-    console.log(arg);
+    if (Date.now() - this.mouseDownTime > 1000) { // 1 second for a hold action
+      this.selectedDate = arg.dateStr;
+      this.showPopup = true;
+    }
+  }
+
+  closePopup() {
+    this.showPopup = false;
+  }
+
+  onMouseDown() {
+    this.mouseDownTime = Date.now();
   }
 
+  onMouseUp(arg: DateClickArg) {
+    if (Date.now() - this.mouseDownTime > 1000) {
+      this.handleDateClick(arg);
+    }
+  }
+
+
   handleEventClick(arg: EventClickArg) {
     console.log(arg);
   }
@@ -72,4 +108,30 @@ export class AppComponent implements OnInit {
     }];
   }
 
+
+
+
+
+
+// ... inside your component
+today: Date = startOfDay(new Date());
+
+
+
+renderDayCell(arg: any) {
+  const cellDate = startOfDay(new Date(arg.date));
+  if (isSameDay(this.today, cellDate)) {
+    arg.el.style.backgroundColor = '#3A81C7'; // Apply a light gray background for today
+  }
+}
+
+highlightToday(arg: any) {
+  if (arg.date.getUTCDate() === new Date().getUTCDate() &&
+      arg.date.getUTCMonth() === new Date().getUTCMonth() &&
+      arg.date.getUTCFullYear() === new Date().getUTCFullYear()) {
+    arg.el.style.backgroundColor = 'rgba(224, 224, 224, 0.5)';  // Or any color you prefer
+  }
 }
+
+}
+

app/src/app.module.ts

@@ -2,14 +2,19 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { FullCalendarModule } from '@fullcalendar/angular';
 import { AppComponent } from './app.component';
+import { FormsModule } from '@angular/forms';
+
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
   ],
   imports: [
     BrowserModule,
-    FullCalendarModule
+    FullCalendarModule,
+    BrowserModule,
+    FormsModule,
+
   ],
   providers: [],
   bootstrap: [AppComponent]

app/src/styles.css

@@ -1 +0,0 @@
-/* You can add global styles to this file, and also import other style files */