MediDash uses FullCalendar to display data in a clear and organized manner. This guide will walk you through the process of creating a basic FullCalendar, including the necessary HTML structure and component-side code.

To get started, you need to install the FullCalendar package using npm:

npm install --save @fullcalendar/angular @fullcalendar/core @fullcalendar/daygrid

Now, you need to import the FullCalendarModule into your application module's imports:

import { FullCalendarModule } from '@fullcalendar/angular';

@NgModule({
    imports: [
        FullCalendarModule,
        // ...
    ],
    // ...
})

The following HTML code demonstrates how to create a basic FullCalendar:

<full-calendar
    defaultView="dayGridMonth"
    [plugins]="calendarPlugins"
    [weekends]="calendarWeekends"
    [events]="calendarEvents"
    (dateClick)="handleDateClick($event)">
</full-calendar>

The following code demonstrates how to create the calendar options in your component file:

import { Component } from '@angular/core';
import dayGridPlugin from '@fullcalendar/daygrid';

@Component({
    selector: 'app-my-calendar',
    templateUrl: './my-calendar.component.html',
})
export class MyCalendarComponent {
    calendarPlugins = [dayGridPlugin];
    calendarWeekends = true;
    calendarEvents = [
        { title: 'Event Now', start: new Date() },
    ];

    handleDateClick(arg) {
        if (confirm('Would you like to add an event to ' + arg.dateStr + ' ?')) {
            this.calendarEvents = this.calendarEvents.concat({ // add new event data.
                title: 'New Event',
                start: arg.date,
                allDay: arg.allDay
            })
        }
    }
}

For more information on using FullCalendar, please refer to the official documentation: