calendario fullcalendar

calendario-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CalendarioComponent } from './calendario/calendario.component';

const routes: Routes = [
   // Calendarios
   { path: '', component: CalendarioComponent, data: { titulo: 'Calendarios' }},

];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class CalendarioRoutingModule { }

calendario.component.html

<div id="wrapper">

<!-- ============================================================== -->
<!-- Start Page Content here -->
<!-- ============================================================== -->

<div class="content-page">
    <div class="content">

        <!-- Start Content-->
        <div class="container-fluid">

            <div class="row">
                <div class="col-lg-12">

                    <div class="row">
                        <full-calendar [options]="calendarOptions"></full-calendar>
                        
                        <div class="external-events">
                            <p><strong>Drag and drop events</strong></p>
                            <div class="fc-event" style="background-color:blue;" draggable="true">New Theme Release</div>
                            <div class="fc-event" style="background-color:green;" draggable="true">My Event</div>
                            <div class="fc-event" style="background-color:yellow;" draggable="true">Meet manager</div>
                            <div class="fc-event" style="background-color:purple;" draggable="true">Create New theme</div>
                          </div>
                          
                    </div>  <!-- end row -->
                </div>
                <!-- end col-12 -->
            </div> <!-- end row -->
            
        </div> <!-- container-fluid -->

    </div> <!-- content -->

</div>
</div>

<!-- ============================================================== -->
<!-- End Page content -->
<!-- ============================================================== -->

calendario.component.ts

import { Component, OnInit } from '@angular/core';
import { FullCalendarModule } from '@fullcalendar/angular'; // el módulo de FullCalendar
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction'; // para el arrastrar y soltar
import { CalendarOptions } from '@fullcalendar/core'; // useful for typechecking
// import Swal from 'sweetalert2';

@Component({
  selector: 'app-calendario',
  templateUrl: './calendario.component.html',
  styles: []
})
export class CalendarioComponent implements OnInit {
  
  calendarOptions: CalendarOptions = {
    initialView: 'dayGridMonth',
    plugins: [dayGridPlugin]
  };

  constructor(
  ) {
   }

  ngOnInit() {
   
  }

}

calendario.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { RouterModule } from '@angular/router';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CalendarioRoutingModule } from './calendario-routing.module';
import { CalendarioComponent } from './calendario/calendario.component';
import { FullCalendarModule } from '@fullcalendar/angular';

// import { AutocompleteLibModule } from 'angular-ng-autocomplete';

@NgModule({
  imports: [
    FormsModule,
    CommonModule,
    CalendarioRoutingModule,
    RouterModule,
    // AutocompleteLibModule,
    ReactiveFormsModule,
    ReactiveFormsModule,
    FullCalendarModule 
  ],
  declarations: [
    CalendarioComponent
  ]
})
export class CalendarioModule { }