wts-calendar v0.0.8

Angular Calendar v-17+

The Angular Event Calendar Library is a powerful and customizable component designed to seamlessly integrate into Angular applications, providing a feature-rich solution for displaying and managing events. This library offers a visually appealing and interactive calendar that can be easily configured to suit various use cases.

Example

Stackblitz Demo

Install

npm install --save wts-calendar

Next import calendar component

import { Component, ViewChild, afterNextRender } from '@angular/core'; import { CalendarOption, CalendarEvent, WtsCalendarComponent } from 'wts-calendar'; import { DatePipe } from '@angular/common'; ....

@Component({
  selector: '<COMPONENT-SELECTOR>',
    templateUrl: '<COMPONENT>.html',
    styleUrls: ['<COMPONENT>.scss'],
    standalone: true,
    imports: [DatePipe,  WtsCalendarComponent],
    providers: [DatePipe]
})
export class CalenderComponent {
    @ViewChild('calendar', { static: true }) calendarComponent!: WtsCalendarComponent;
        option: CalendarOption = {}
        events: Array<CalendarEvent> = []
        <!--Accsess Event-->
        method(): void {
            // this.calendarComponent.nextMonth();
            // this.calendarComponent.previousMonth();
            // this.calendarComponent.nextDay()
            // this.calendarComponent.previousDay()
            //this.calendarComponent.setViewMode()
        }

        _onDayClick(e): void {}
        _onEventClick(e): void {}
        _onEventRemove(e): void {}
        _onEventEdit(e): void {}
}

HTML

    <wts-calendar [options]="option" [events]="events" #calendar (onDayClick)="_onDayClick($event)" (onEventClick)="_onEventClick($event)" (onEventRemove)="_onEventRemove($event)" (onEventEdit)="_onEventEdit($event)"></wts-calendar>

Custom Template

You can implement full-support custom template as per your requirement

<wts-calendar [options]="option" [events]="events" #calendar (onDayClick)="_onDayClick($event)" (onEventClick)="_onEventClick($event)" (onEventRemove)="_onEventRemove($event)" (onEventEdit)="_onEventEdit($event)">

    <ng-template #calenderHeaderTemplate let-data>
        ...
    </ng-template>

     <ng-template #weekHeaderTemplate let-data>
        ....
     </ng-template>

     <ng-template #weekHeaderTemplate let-data>
      ....
    </ng-template>

     <ng-template #dayCellTemplate let-data>
      ....
     </ng-template>

     <ng-template #dayCellBoxTemplate let-data>
      ....
     </ng-template>

     <ng-template #eventBoxTemplate let-data>
      ....
     </ng-template>

    <ng-template #fullHourSegmentTemplate let-data>
        ....
    </ng-template>

    <ng-template #HourSegmentAllDayEventTemplate let-data>
        ....
    </ng-template>

    <ng-template #HourSegmentLabelTemplate let-data>
        ....
    </ng-template>

    <ng-template #HourSegmentEventsTemplate let-data>
        ....
    </ng-template>

    <ng-template #HourSegmentEventTemplate let-data>
        ....
    </ng-template>

</wts-calendar>

Properties

Methods

Theme

There have multiple :host variable for customize default theme..

.___WTS__CALENDER__ {
  --wtsTodayBackgroundColor: #cc2129;
  --wtsTodayTextColor: #fff;
  --wtsMonthViewEventBackgroundColor: #ffdbdb;
  --wtsMonthViewEventColor: #5d4949;
  --wtsMonthViewDayFontSize: 11px;
  --wtsMonthViewDayTextColor: #494949;
  --wtsMonthViewDayFontFamily: "Roboto", sans-serif;
  --wtsMonthViewDayPastDateTextColor: #a7a7a7;
  --wtsMonthViewDayFutureDateTextColor: #a7a7a7;
  --wtsMonthViewDayCellHeight: 80px;
  --wtsMonthViewDayCellBorderWidth: 1px;
  --wtsMonthViewDayCellBorderColor: #e3e3e3;
  --wtsDayViewDayHourSegmentBorderColor: #e3e3e3;
  --wtsDayViewDayHourSegmentBorderWidth: 1px;
  --wtsDayViewDayHourSegmentLabelWidth: 80px;
  --wtsDayViewDayHourSegmentLabelColor: #303030;
  --wtsDayViewDayHourSegmentLabelBackgroundColor: #fff;
  --wtsDayViewDayHourSegmentEventLabelFontSize: 12px;
  --wtsDayViewDayHourSegmentEventLabelFontWeight: 600;
  --wtsDayViewDayHourSegmentEventLabelFontFamily: "Roboto", sans-serif;
  --wtsDayViewDayHourSegmentAllDayLabelColor: #303030;
  --wtsDayViewDayHourSegmentAllDayLabelBackgroundColor: #fff;
  --wtsDayViewDayHourSegmentEventAllDayLabelFontSize: 12px;
  --wtsDayViewDayHourSegmentEventAllDayLabelFontWeight: 600;
  --wtsDayViewDayHourSegmentEventAllDayLabelFontFamily: "Roboto", sans-serif;
  --wtsDayViewDayPastSlotBackgroundColor: #fff3ed;
  --wtsDayViewDaySlotBackgroundColor: #ffffff;
  --wtsDayViewDayPastEventBackgroundColor: #fccbb2;
  --wtsDayViewDayPastEventFontColor: #7c5c4d;
  --wtsDayViewDayPastEventBorderColor: #d9a58a;
  --wtsDayViewDayEventBackgroundColor: #51e3b6;
  --wtsDayViewDayEventBorderColor: #fff;
  --wtsDayViewDayEventTextColor: #1c5544;
  --wtsDayViewDayEventBorderRadius: 5px;
  --wtsDayViewDayEventBorderWidth: 1px;
  --wtsDayViewDayEventFontFamily: "Roboto", sans-serif;
  --wtsDayViewDayEventFontSize: 13px;
  --wtsDayViewDayEventFontWeight: normal;
  --wtsDayViewDayAllDayEventBackgroundColor: #ecfcb2;
  --wtsDayViewDayAllDayEventBorderColor: #bac88c;
  --wtsDayViewDayAllDayEventTextColor: #1d1d1d;
  --wtsDayViewDayAllDayEventBorderRadius: 5px;
  --wtsDayViewDayAllDayEventBorderWidth: 1px;
  --wtsDayViewDayAllDayEventFontFamily: "Roboto", sans-serif;
  --wtsDayViewDayAllDayEventFontSize: 13px;
  --wtsDayViewDayAllDayEventFontWeight: normal;
  --wtsMonthViewEventEditIconBackgroundColor: #cc2129;
  --wtsMonthViewEventEditIconHoverBackgroundColor: #e1323a;
}