Angular Fullcalendar

Pro Component

Our Angular Fullcalendar is a full-sized drag & drop event calendar.
Keep reading our Angular Fullcalendar examples and learn how to use this plugin.

Usage

CSS

In order to use this plugin on your page you will need to include the following styles in the “Page plugins” area from the page’s head section:

<link rel="stylesheet" href="assets/vendor/fullcalendar/dist/fullcalendar.min.css">
<link rel="stylesheet" href="assets/vendor/sweetalert2/dist/sweetalert2.min.css">

JS

In order to use this plugin on your page you will need to include the following script in the “Optional JS” area from the page’s footer:

<script src="assets/vendor/moment/min/moment.min.js"></script>
<script src="assets/vendor/fullcalendar/dist/fullcalendar.min.js"></script>
<script src="assets/vendor/sweetalert2/dist/sweetalert2.min.js"></script>

Init

In the JS components folder located in assets/js/components you will find the fullcalendar.js file with the init script you need to use in order to make Fullcalendar work.

Use the events variable to store the events you want to display in the calendar:

Example

Calendar

<div class="card card-calendar">
   <!-- Card header -->
   <div class="card-header">
      <!-- Title -->
      <h5 class="h3 mb-0">Calendar</h5>
   </div>
   <!-- Card body -->
   <div class="card-body p-0">
      <div class="calendar" data-toggle="calendar" id="calendar"></div>
   </div>
</div>

<!-- Typescript -->

import {
  Component,
  OnInit,
  TemplateRef,
  ElementRef,
  ViewChild
} from "@angular/core";
import { BsModalService, BsModalRef } from "ngx-bootstrap/modal";
import swal from "sweetalert2";

import { Calendar } from "@fullcalendar/core";
import dayGridPlugin from "@fullcalendar/daygrid";
import interaction from "@fullcalendar/interaction";

@Component({
  selector: "app-calendar",
  templateUrl: "calendar.component.html"
})
export class CalendarComponent implements OnInit {
  addModal: BsModalRef;
  editModal: BsModalRef;
  @ViewChild("modalAdd") modalAdd: ElementRef;
  @ViewChild("modalEdit") modalEdit: ElementRef;
  default = {
    keyboard: true,
    class: "modal-dialog-centered modal-secondary"
  };
  radios = "bg-danger";
  eventTitle = undefined;
  eventDescription;
  eventId;
  event;
  startDate;
  endDate;
  calendar;
  today = new Date();
  y = this.today.getFullYear();
  m = this.today.getMonth();
  d = this.today.getDate();
  events = [
    {
      id: 0,
      title: "Lunch meeting",
      start: "2018-11-21",
      end: "2018-11-22",
      className: "bg-orange"
    },
    {
      id: 1,
      title: "Call with Dave",
      start: new Date(this.y, this.m, 1),
      allDay: true,
      className: "bg-red",
      description:
        "Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."
    },

    {
      id: 2,
      title: "Lunch meeting",
      start: new Date(this.y, this.m, this.d - 1, 10, 30),
      allDay: true,
      className: "bg-orange",
      description:
        "Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."
    },

    {
      id: 3,
      title: "All day conference",
      start: new Date(this.y, this.m, this.d + 7, 12, 0),
      allDay: true,
      className: "bg-green",
      description:
        "Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."
    },

    {
      id: 4,
      title: "Meeting with Mary",
      start: new Date(this.y, this.m, this.d - 2),
      allDay: true,
      className: "bg-blue",
      description:
        "Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."
    },

    {
      id: 5,
      title: "Winter Hackaton",
      start: new Date(this.y, this.m, this.d + 1, 19, 0),
      allDay: true,
      className: "bg-red",
      description:
        "Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."
    },

    {
      id: 6,
      title: "Digital event",
      start: new Date(this.y, this.m, 21),
      allDay: true,
      className: "bg-warning",
      description:
        "Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."
    },

    {
      id: 7,
      title: "Marketing event",
      start: new Date(this.y, this.m, 21),
      allDay: true,
      className: "bg-purple",
      description:
        "Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."
    },

    {
      id: 8,
      title: "Dinner with Family",
      start: new Date(this.y, this.m, 19),
      allDay: true,
      className: "bg-red",
      description:
        "Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."
    },

    {
      id: 9,
      title: "Black Friday",
      start: new Date(this.y, this.m, 23),
      allDay: true,
      className: "bg-blue",
      description:
        "Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."
    },

    {
      id: 10,
      title: "Cyber Week",
      start: new Date(this.y, this.m, 2),
      allDay: true,
      className: "bg-yellow",
      description:
        "Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."
    }
  ];
  constructor(private modalService: BsModalService) {}
  changeView(newView) {
    this.calendar.changeView(newView);

    currentDate: this.calendar.view.title;
  }

  ngOnInit() {
    this.initCalendar();
  }
  initCalendar() {
    this.calendar = new Calendar(document.getElementById("calendar"), {
      plugins: [interaction, dayGridPlugin],
      defaultView: "dayGridMonth",
      selectable: true,
      editable: true,
      events: this.events,
      views: {
        month: {
          titleFormat: { month: "long", year: "numeric" }
        },
        agendaWeek: {
          titleFormat: { month: "long", year: "numeric", day: "numeric" }
        },
        agendaDay: {
          titleFormat: { month: "short", year: "numeric", day: "numeric" }
        }
      },
      // Add new event
      select: info => {
        this.addModal = this.modalService.show(this.modalAdd, this.default);
        this.startDate = info.startStr;
        this.endDate = info.endStr;
      },
      // Edit calendar event action
      eventClick: ({ event }) => {
        this.eventId = event.id;
        this.eventTitle = event.title;
        this.eventDescription = event.extendedProps.description;
        this.radios = "bg-danger";
        this.event = event;
        this.editModal = this.modalService.show(this.modalEdit, this.default);
      }
    });
    this.calendar.render();
  }
  getNewEventTitle(e) {
    this.eventTitle = e.target.value;
  }
  getNewEventDescription(e) {
    this.eventDescription = e.target.value;
  }
  addNewEvent() {
    this.events.push({
      title: this.eventTitle,
      start: this.startDate,
      end: this.endDate,
      className: this.radios,
      id: this.events.length
    });
    this.calendar.addEvent({
      title: this.eventTitle,
      start: this.startDate,
      end: this.endDate,
      className: this.radios,
      id: this.events.length
    });
    this.addModal.hide();
    this.radios = "bg-danger";
    (this.eventTitle = undefined),
      (this.eventDescription = undefined),
      (this.eventId = undefined),
      (this.event = undefined);
  }
  deleteEventSweetAlert() {
    this.editModal.hide();
    swal
      .fire({
        title: "Are you sure?",
        text: "You won't be able to revert this!",
        type: "warning",
        showCancelButton: true,
        confirmButtonClass: "btn btn-danger",
        cancelButtonClass: "btn btn-secondary",
        confirmButtonText: "Yes, delete it!",
        buttonsStyling: false
      })
      .then(result => {
        if (result.value) {
          this.events = this.events.filter(
            prop => prop.id + "" !== this.eventId
          );
          this.initCalendar();
          swal.fire({
            title: "Deleted!",
            text: "Your file has been deleted.",
            type: "success",
            confirmButtonClass: "btn btn-primary",
            buttonsStyling: false
          });
        }
      });
    this.radios = "bg-danger";
    (this.eventTitle = undefined),
      (this.eventDescription = undefined),
      (this.eventId = undefined),
      (this.event = undefined);
  }
  updateEvent() {
    this.events = this.events.map((prop, key) => {
      if (prop.id + "" === this.eventId + "") {
        return {
          ...prop,
          title: this.eventTitle,
          className: this.radios,
          description: this.eventDescription
        };
      } else {
        return prop;
      }
    });
    this.radios = "bg-danger";
    (this.eventTitle = undefined),
      (this.eventDescription = undefined),
      (this.eventId = undefined),
      (this.event = undefined);
    this.initCalendar();
    this.editModal.hide();
  }
}

Options

Title

Use the fullcalendar-title class on the element you want to inject the calendar current date.

Fullcalendar

<h6 class="fullcalendar-title h2 mb-0">Fullcalendar</h6>

Controls

Use the following controls and add them next to your calendar to switch between Month, week and day and also navigate through different periods of time with the Next/Prev buttons.

Month Week Day

<a
  class=" fullcalendar-btn-prev btn btn-sm btn-neutral"
  href="javascript:void(0)"
  (click)="calendar.next()">
  <i class=" fas fa-angle-left"> </i>
</a>
<a
  class=" fullcalendar-btn-next btn btn-sm btn-neutral"
  href="javascript:void(0)"
  (click)="calendar.prev()">
  <i class=" fas fa-angle-right"> </i>
</a>
<a
  class=" btn btn-sm btn-neutral"
  data-calendar-view="month"
  href="javascript:void(0)"
  (click)="changeView('dayGridMonth')">
  Month
</a>
<a
  class=" btn btn-sm btn-neutral"
  data-calendar-view="basicWeek"
  href="javascript:void(0)"
  (click)="changeView('dayGridWeek')">
  Week
</a>
<a
  class=" btn btn-sm btn-neutral"
  data-calendar-view="basicDay"
  href="javascript:void(0)"
  (click)="changeView('dayGridDay')">
  Day
</a>

Actions

If you want to add create/edit functionality to your calendar you will need to include the modals corresponding to that action.

<div
  aria-hidden="true"
  aria-labelledby="new-event-label"
  class=" modal fade"
  id="new-event"
  role="dialog"
  tabindex="-1">
  <div
    class=" modal-dialog modal-dialog-centered modal-secondary"
    role="document">
    <ng-template #modalAdd>
      <div class=" modal-body">
        <form class=" new-event--form">
          <div class=" form-group">
            <label class=" form-control-label"> Event title </label>
            <input
              class=" form-control form-control-alternative new-event--title"
              id="new-event--title"
              placeholder="Event Title"
              type="text"
              (change)="getNewEventTitle($event)"
            />
          </div>
          <div class=" form-group mb-0">
            <label class=" form-control-label d-block mb-3">
              Status color
            </label>
            <div
              class=" btn-group btn-group-toggle btn-group-colors event-tag"
              data-toggle="buttons">
              <label
                class=" btn bg-info"
                [ngClass]="{ active: radios === 'bg-info' }">
                <input
                  autocomplete="off"
                  checked="checked"
                  name="event-tag"
                  type="radio"
                  value="bg-info"
                  (click)="radios = 'bg-info'"
                />
              </label>
              <label
                class=" btn bg-warning"
                [ngClass]="{ active: radios === 'bg-warning' }">
                <input
                  autocomplete="off"
                  name="event-tag"
                  type="radio"
                  value="bg-warning"
                  (click)="radios = 'bg-warning'"
                />
              </label>
              <label
                class=" btn bg-danger"
                [ngClass]="{ active: radios === 'bg-danger' }">
                <input
                  autocomplete="off"
                  name="event-tag"
                  type="radio"
                  value="bg-danger"
                  (click)="radios = 'bg-danger'"
                />
              </label>
              <label
                class=" btn bg-success"
                [ngClass]="{ active: radios === 'bg-success' }">
                <input
                  autocomplete="off"
                  name="event-tag"
                  type="radio"
                  value="bg-success"
                  (click)="radios = 'bg-success'"
                />
              </label>
              <label
                class=" btn bg-default"
                [ngClass]="{ active: radios === 'bg-default' }">
                <input
                  autocomplete="off"
                  name="event-tag"
                  type="radio"
                  value="bg-default"
                  (click)="radios = 'bg-default'"
                />
              </label>
              <label
                class=" btn bg-primary"
                [ngClass]="{ active: radios === 'bg-primary' }">
                <input
                  autocomplete="off"
                  name="event-tag"
                  type="radio"
                  value="bg-primary"
                  (click)="radios = 'bg-primary'"
                />
              </label>
            </div>
          </div>
          <input class=" new-event--start" type="hidden" />
          <input class=" new-event--end" type="hidden" />
        </form>
      </div>
      <div class=" modal-footer">
        <button
          class=" btn btn-primary new-event--add"
          type="submit"
          (click)="addNewEvent()">
          Add event
        </button>
        <button
          (click)="addModal.hide()"
          class=" btn btn-link ml-auto"
          data-dismiss="modal"
          type="button">
          Close
        </button>
      </div>
    </ng-template>
  </div>
</div>