I tried to get the single event from events and then update the values. Even if I can update the values like title and color the update only shows in the onclick modal but I wanted to use my actual event on the calender to get the value updated. And even after I close the modal I can see the updated value whenever I check in the console title.value. I know that this value isnt being able to assign to the event.title ..
And the reason its probably happening because
eventClicked({ event }: { event: CalendarEvent }): void {
console.log('Event clicked', event.title);
let title = event.title;
let color = event.color.secondary
this.profileForm.patchValue({
title: title,
color: color
})
this.openPopup()
}
but I am not getting any idea how can i update the values in events.
here's the modal block created using form
<form [formGroup]="profileForm">
<div
class="modal"
tabindex="-1"
role="dialog"
[ngStyle]="{'display':displayStyle}">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4>All Events</h4>
<div class="titleBlock">
<input
type="text"
id="title"
class="form-control"
formControlName="title"
[value]="input.value"
[(ngModel)]="input.value"
#input
/>
<input
type="color"
class="form-control"
formControlName="color"
/>
<!-- <span><i class="bi bi-check2 done" (click)="deleteEvent(event)" ></i></span> -->
</div>
</div>
<div class="modal-body">
<p>One Stop Solution for all CS problems</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger"
(click)="closePopup()">
Close
</button>
</div>
</div>
</div>
</div>
</form>
Heres the app componenet ts file
export class AppComponent {
profileForm = this.fb.group({
title: [''],
color: [''],
});
// @ViewChild('modalContent', { static: true })
// modalContent!: TemplateRef<any>;
@ViewChild('modalContent', { read: ViewContainerRef, static: true }) modalContent: ViewContainerRef;
modalData: {
action: string;
event: CalendarEvent;
};
@Output() eventDelete: EventEmitter<CalendarEvent> = new EventEmitter();
refresh = new Subject<void>();
viewDate: Date = new Date();
view: CalendarView = CalendarView.Month;
CalendarView = CalendarView;
getevent: string;
getcolor: string;
setView(view: CalendarView) {
this.view = view;
}
constructor(private fb: FormBuilder) { }
events: CalendarEvent[] = [
{
start: subDays(startOfDay(new Date()), 1),
end: addDays(new Date(), 1),
title: '111 An event with no end date',
color:colors.red
},
{
start: startOfDay(new Date()),
end: addDays(new Date(), 2),
title: '22 An event with 2',
color:colors.blue
},
{
start: subDays(startOfDay(new Date()), 3),
end: addDays(new Date(), 3),
title: '333 An event with no end date',
color:colors.yellow
},
]
eventTimesChanged({
event,
newStart,
newEnd,
}: CalendarEventTimesChangedEvent): void {
this.events = this.events.map((iEvent) => {
if (iEvent === event) {
return {
...event,
start: newStart,
end: newEnd,
};
}
return iEvent;
});
this.handleEvent('Dropped or resized', event);
}
handleEvent(action: string, event: CalendarEvent): void {
this.modalData = { event, action };
//this.modal.open(this.modalContent, { size: 'lg' });
this.openPopup()
}
dayClicked({ date, events }: { date: Date; events: CalendarEvent[] }): void {
console.log(date);
this.view = CalendarView.Day;
}
eventClicked({ event }: { event: CalendarEvent }): void {
console.log('Event clicked', event.title);
let title = event.title;
let color = event.color.primary
this.profileForm.patchValue({
title: title,
color: color
})
this.openPopup()
}
deleteEvent(eventToDelete: CalendarEvent) {
this.events = this.events.filter((event) => event !== eventToDelete);
console.log("Event deleted");
}
displayStyle = "none";
openPopup() {
this.displayStyle = "block";
}
closePopup() {
this.displayStyle = "none";
}
}
Another way I can get all the datas but it comes with all the events in a day. if i use ngmodal instead of forms hers the code.
<ng-container #modalContent >
<div
class="modal"
tabindex="-1"
role="dialog"
[ngStyle]="{'display':displayStyle}">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4>All Events</h4>
<div *ngFor="let event of events">
<div class="titleBlock">
<input
type="text"
class="form-control"
[(ngModel)]="event.title"
(keyup)="refresh.next()"
/>
<input
type="color"
[(ngModel)]="event.color.secondary"
(change)="refresh.next()"
/>
<span><i class="bi bi-check2 done" (click)="deleteEvent(event)" ></i></span>
</div>
</div>
</div>
<div class="modal-body">
<p>One Stop Solution for all CS problems</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger"
(click)="closePopup()">
Close
</button>
</div>
</div>
</div>
</div>
</ng-container>
it works perfectly but as you can see its using a for loop it. so when I click on it its going to show all the events. but I wanted a single event to come into pop up.
