calender.component.html

<app-page-header
  [title]="'Calender'"
  [title1]="'Calender'" 
  [activeitem]="'Advanced UI'"
></app-page-header>
<!-- Start::row-1 -->
<div class="grid grid-cols-12 gap-x-6">   
  <div class="col-span-12 xl:col-span-3">
    <div class="box">  
      <div class="box-header">
        <button type="button" class="ti-btn ti-btn-soft-primary m-0 w-full"> 
          <i class="ri-add-line"></i>Create New Event
        </button>
      </div>
      <div class="box-body p-0">
        <div class="p-4" id="external-events">  
          <div
            mwlDroppable
            (drop)="externalDrop($event.dropData.event)"
            dragOverClass="drag-over"
          >
            <div>
              <p *ngIf="events.length === 0"><em>No events added</em></p>
              <ul>
                <li
                  *ngFor="let event of events"  
                  mwlDraggable
                  [dropData]="{ event: event }" 
                  [touchStartLongPress]="{ delay: 300, delta: 30 }"
                  dragActiveClass="drag-active"
                  class="fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event !bg-secondary !border-secondary text-black"
                  data-class="bg-secondary"
                >
                  <a href="javascript:;">
                    {{ event.title }}
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div
          class="border-y border-dashed border-gray-200 dark:border-white/10"
        >
          <div class="p-4 flex items-center justify-between">
            <h6 class="font-semibold my-auto text-xl">Activity :</h6>
            <button
              type="button"
              class="ti-btn ti-btn-soft-primary m-0 px-2 py-1"
            >
              View All
            </button>
          </div>
          <div class="p-4" id="full-calendar-activity">
            <ul class="fullcalendar-events-activity">
              <li>
                <div class="flex items-center justify-between">
                  <p class="mb-1 text-sm font-semibold">Monday, Jan 1,2023</p>
                  <span
                    class="badge rounded-sm bg-gray-100 text-gray-800 mb-1 p-1"
                    >12:00PM-1:00PM</span
                  >
                </div>
                <p class="mb-0 text-gray-500 dark:text-white/70 text-xs">
                  Meeting with a client about new project requirement.
                </p>
              </li>
              <li>
                <div class="flex items-center justify-between">
                  <p class="mb-1 text-sm font-semibold">
                    Thursday, Dec 29,2022
                  </p>
                  <span class="badge rounded-sm bg-success text-white mb-1 p-1"
                    >Completed</span
                  >
                </div>
                <p class="mb-0 text-gray-500 dark:text-white/70 text-xs">
                  Birthday party of niha suka
                </p>
              </li>
              <li>
                <div class="flex items-center justify-between">
                  <p class="mb-1 text-sm font-semibold">
                    Wednesday, Jan 3,2023
                  </p>
                  <span
                    class="badge rounded-sm bg-warning/10 text-warning mb-1 p-1"
                    >Reminder</span
                  >
                </div>
                <p class="mb-0 text-gray-500 dark:text-white/70 text-xs">
                  WOrk taget for new project is completing
                </p>
              </li>
              <li>
                <div class="flex items-center justify-between">
                  <p class="mb-1 text-sm font-semibold">Friday, Jan 20,2023</p>
                  <span
                    class="badge rounded-sm bg-gray-100 text-gray-800 mb-1 p-1"
                    >06:00PM - 09:00PM</span
                  >
                </div>
                <p class="mb-0 text-gray-500 dark:text-white/70 text-xs">
                  Watch new movie with family
                </p>
              </li>
              <li>
                <div class="flex items-center justify-between">
                  <p class="mb-1 text-sm font-semibold">
                    Saturday, Jan 07,2023
                  </p>
                  <span
                    class="badge rounded-sm bg-danger/10 text-danger mb-1 p-1"
                    >Due Date</span
                  >
                </div>
                <p class="mb-0 text-gray-500 dark:text-white/70 text-xs">
                  Last day to pay the electricity bill and water bill.need to
                  check the bank details.
                </p>
              </li>
            </ul>
          </div>
        </div>
        <div class="p-4 pb-0">
          <img src="./assets/img/png-images/12.png" alt="" class="mx-auto" />
        </div>
      </div>
    </div>
  </div>
  <div class="col-span-12 xl:col-span-9">
    <div class="box">
      <div class="box-body">
        <div id="calendar2">
          <div class="col-xl-10" id="external-events-1">
            <div class="row text-center block sm:flex sm:justify-between">
              <div class="col-md-4 text-left">
                <div class="btn-group">
                  <div
                    class="btn btn-primary pl-3 pr-3"
                    mwlCalendarPreviousView
                    [view]="view"
                    [(viewDate)]="viewDate"
                    (viewDateChange)="closeOpenMonthViewDay()"
                  >
                    <i class="ri-arrow-left-s-line" aria-hidden="true"></i>
                  </div>
                  <div
                    class="btn btn-primary pl-3 pr-3"
                    mwlCalendarNextView
                    [view]="view"
                    [(viewDate)]="viewDate"
                    (viewDateChange)="closeOpenMonthViewDay()"
                  >
                    <i class="ri-arrow-right-s-line" aria-hidden="true"></i>
                  </div>
                  <div
                    class="btn btn-primary ml-2"
                    mwlCalendarToday
                    [(viewDate)]="viewDate"
                  >
                    Today
                  </div>
                </div>
              </div>
              <div class="col-md-4">
                <h3 class="text-base">
                  {{ viewDate | calendarDate : view + "ViewTitle" : "en" }}
                </h3>
              </div>
              <div class="col-md-4 text-right">
                <div class="btn-group">
                  <div
                    class="btn btn-primary"
                    (click)="setView(CalendarView.Month)"
                    [class.active]="view === CalendarView.Month"
                  >
                    Month
                  </div>
                  <div
                    class="btn btn-primary"
                    (click)="setView(CalendarView.Week)"
                    [class.active]="view === CalendarView.Week"
                  >
                    Week
                  </div>
                  <div
                    class="btn btn-primary"
                    (click)="setView(CalendarView.Day)"
                    [class.active]="view === CalendarView.Day"
                  >
                    Day
                  </div>
                  <button
                    class="btn btn-raised btn-primary float-right"
                    (click)="addEvent()"
                  >
                    Add Event
                  </button>
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-12"></div>
            </div>
            <br />

            <div [ngSwitch]="view">
              <mwl-calendar-month-view
                *ngSwitchCase="CalendarView.Month"
                [viewDate]="viewDate"
                [events]="events"
                [activeDayIsOpen]="activeDayIsOpen"
                [refresh]="refresh"
                (dayClicked)="dayClicked($event.day)"
                (eventClicked)="handleEvent('Clicked', $event.event)"
                (eventTimesChanged)="eventTimesChanged($event)"
              >
              </mwl-calendar-month-view>
              <mwl-calendar-week-view
                *ngSwitchCase="CalendarView.Week"
                [viewDate]="viewDate"
                [events]="events"
                [refresh]="refresh"
                [snapDraggedEvents]="false"
                (eventClicked)="handleEvent('Clicked', $event.event)"
                (eventTimesChanged)="eventDropped($event)"
              >
              </mwl-calendar-week-view>
              <mwl-calendar-day-view
                *ngSwitchCase="CalendarView.Day"
                [viewDate]="viewDate"
                [events]="events"
                [refresh]="refresh"
                [snapDraggedEvents]="false"
                (eventClicked)="handleEvent('Clicked', $event.event)"
                (eventTimesChanged)="eventDropped($event)"
              >
              </mwl-calendar-day-view>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- End::row-1 -->