angular-calendar
Version:
A calendar component for angular 15.0+ that can display events on a month, week or day view
154 lines (153 loc) • 6.12 kB
TypeScript
import { EventEmitter, TemplateRef } from '@angular/core';
import { CalendarEvent } from 'calendar-utils';
import { Subject } from 'rxjs';
import { CalendarEventTimesChangedEvent } from '../../common/calendar-event-times-changed-event/calendar-event-times-changed-event.interface';
import { PlacementArray } from 'positioning';
import { CalendarWeekViewBeforeRenderEvent } from '../../week/calendar-week.module';
import { ResizeCursors } from 'angular-resizable-element';
import * as i0 from "@angular/core";
export declare type CalendarDayViewBeforeRenderEvent = CalendarWeekViewBeforeRenderEvent;
/**
* Shows all events on a given day. Example usage:
*
* ```typescript
* <mwl-calendar-day-view
* [viewDate]="viewDate"
* [events]="events">
* </mwl-calendar-day-view>
* ```
*/
export declare class CalendarDayViewComponent {
/**
* The current view date
*/
viewDate: Date;
/**
* An array of events to display on view
* The schema is available here: https://github.com/mattlewis92/calendar-utils/blob/c51689985f59a271940e30bc4e2c4e1fee3fcb5c/src/calendarUtils.ts#L49-L63
*/
events: CalendarEvent[];
/**
* The number of segments in an hour. Must divide equally into 60.
*/
hourSegments: number;
/**
* The height in pixels of each hour segment
*/
hourSegmentHeight: number;
/**
* The duration of each segment group in minutes
*/
hourDuration: number;
/**
* The minimum height in pixels of each event
*/
minimumEventHeight: number;
/**
* The day start hours in 24 hour time. Must be 0-23
*/
dayStartHour: number;
/**
* The day start minutes. Must be 0-59
*/
dayStartMinute: number;
/**
* The day end hours in 24 hour time. Must be 0-23
*/
dayEndHour: number;
/**
* The day end minutes. Must be 0-59
*/
dayEndMinute: number;
/**
* An observable that when emitted on will re-render the current view
*/
refresh: Subject<any>;
/**
* The locale used to format dates
*/
locale: string;
/**
* The grid size to snap resizing and dragging of events to
*/
eventSnapSize: number;
/**
* The placement of the event tooltip
*/
tooltipPlacement: PlacementArray;
/**
* A custom template to use for the event tooltips
*/
tooltipTemplate: TemplateRef<any>;
/**
* Whether to append tooltips to the body or next to the trigger element
*/
tooltipAppendToBody: boolean;
/**
* The delay in milliseconds before the tooltip should be displayed. If not provided the tooltip
* will be displayed immediately.
*/
tooltipDelay: number | null;
/**
* A custom template to use to replace the hour segment
*/
hourSegmentTemplate: TemplateRef<any>;
/**
* A custom template to use for day view events
*/
eventTemplate: TemplateRef<any>;
/**
* A custom template to use for event titles
*/
eventTitleTemplate: TemplateRef<any>;
/**
* A custom template to use for event actions
*/
eventActionsTemplate: TemplateRef<any>;
/**
* Whether to snap events to a grid when dragging
*/
snapDraggedEvents: boolean;
/**
* A custom template to use for the all day events label text
*/
allDayEventsLabelTemplate: TemplateRef<any>;
/**
* A custom template to use for the current time marker
*/
currentTimeMarkerTemplate: TemplateRef<any>;
/**
* Allow you to customise where events can be dragged and resized to.
* Return true to allow dragging and resizing to the new location, or false to prevent it
*/
validateEventTimesChanged: (event: CalendarEventTimesChangedEvent) => boolean;
/**
* Customise the document cursor when dragging to resize an event
*/
resizeCursors: Partial<Pick<ResizeCursors, 'leftOrRight' | 'topOrBottom'>>;
/**
* Called when an event title is clicked
*/
eventClicked: EventEmitter<{
event: CalendarEvent;
sourceEvent: MouseEvent | KeyboardEvent;
}>;
/**
* Called when an hour segment is clicked
*/
hourSegmentClicked: EventEmitter<{
date: Date;
sourceEvent: MouseEvent;
}>;
/**
* Called when an event is resized or dragged and dropped
*/
eventTimesChanged: EventEmitter<CalendarEventTimesChangedEvent<any>>;
/**
* An output that will be called before the view is rendered for the current day.
* If you add the `cssClass` property to an hour grid segment it will add that class to the hour segment in the template
*/
beforeViewRender: EventEmitter<CalendarWeekViewBeforeRenderEvent>;
static ɵfac: i0.ɵɵFactoryDeclaration<CalendarDayViewComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<CalendarDayViewComponent, "mwl-calendar-day-view", never, { "viewDate": "viewDate"; "events": "events"; "hourSegments": "hourSegments"; "hourSegmentHeight": "hourSegmentHeight"; "hourDuration": "hourDuration"; "minimumEventHeight": "minimumEventHeight"; "dayStartHour": "dayStartHour"; "dayStartMinute": "dayStartMinute"; "dayEndHour": "dayEndHour"; "dayEndMinute": "dayEndMinute"; "refresh": "refresh"; "locale": "locale"; "eventSnapSize": "eventSnapSize"; "tooltipPlacement": "tooltipPlacement"; "tooltipTemplate": "tooltipTemplate"; "tooltipAppendToBody": "tooltipAppendToBody"; "tooltipDelay": "tooltipDelay"; "hourSegmentTemplate": "hourSegmentTemplate"; "eventTemplate": "eventTemplate"; "eventTitleTemplate": "eventTitleTemplate"; "eventActionsTemplate": "eventActionsTemplate"; "snapDraggedEvents": "snapDraggedEvents"; "allDayEventsLabelTemplate": "allDayEventsLabelTemplate"; "currentTimeMarkerTemplate": "currentTimeMarkerTemplate"; "validateEventTimesChanged": "validateEventTimesChanged"; "resizeCursors": "resizeCursors"; }, { "eventClicked": "eventClicked"; "hourSegmentClicked": "hourSegmentClicked"; "eventTimesChanged": "eventTimesChanged"; "beforeViewRender": "beforeViewRender"; }, never, never, false, never>;
}