wts-calendar
v18.0.1
Published
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 inte
Downloads
15
Maintainers
Readme
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
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
| Name | Description |
| -------------------------------------------- | ----------------------------- |
| (Optional) options: CalendarOption
| Default: {} |
| (Optional) currentDate: Date
| Default: new Date() |
| (Optional) events: Array<CalendarEvent>
| Default: [] |
Methods
| Name | Description |
| -------------------------------------------- | ----------------------------- |
| onDayClick: Function
| Trigger on a day cell click |
| onEventClick: Function
| Trigger on a event box click |
| onEventRemove: Function
| Trigger on a event's remove button click |
| onEventEdit: Function
| Trigger on a event's edit button click|
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;
}