@daypilot/daypilot-lite-angular
Version:
DayPilot Lite for Angular
170 lines (111 loc) • 7.31 kB
Markdown
# DayPilot Lite for Angular
[DayPilot Lite for JavaScript](https://javascript.daypilot.org/open-source/) is a library of JavaScript/HTML5 event calendar/scheduler components that can display day/week/month calendar views, and a horizontal or vertical timeline for multiple resources. This is the Angular version of DayPilot Lite.
## What's New
[Release History](https://javascript.daypilot.org/daypilot-lite-history/)
## UI Builder
Customize the scheduling components using an online [UI Builder](https://builder.daypilot.org/) application and **download** a ready-to-run Angular project.
## Online Demo
[](https://javascript.daypilot.org/demo/lite/scheduler/)
[](https://javascript.daypilot.org/demo/lite/calendar/)
[Online Demo](https://javascript.daypilot.org/demo/lite/)
## Features
* Calendar/scheduler views: day, week, work week, month, resource calendar
* Horizontal timeline view
* Event creation using drag and drop
* Drag and drop event moving and resizing
* Integrated delete icon
* Event duration bar with customizable color
* Date picker with free/busy days highlighting, free-hand range selection, day cell customization
* CSS themes (use theme builder to create your own theme)
* Event customization (text, HTML, colors...)
* Built-in XSS protection
* Localization support
* TypeScript definitions
## Tutorials
### Angular Scheduler with Horizontal Timeline
[](https://code.daypilot.org/85069/angular-scheduler-with-horizontal-timeline-open-source)
[Angular Scheduler with Horizontal Timeline (Open-Source)](https://code.daypilot.org/85069/angular-scheduler-with-horizontal-timeline-open-source)
Plan and visualize your resources in Angular with this lightweight, Apache‑licensed Scheduler - with a horizontal timeline, multi‑row time headers, CSS themes, dynamic event content and large‑dataset performance.
***
### Angular Appointment Calendar Tutorial
[](https://code.daypilot.org/50175/angular-appointment-calendar-component-typescript)
[Open-Source Angular Appointment Calendar Component (TypeScript + PHP/MySQL)](https://code.daypilot.org/50175/angular-appointment-calendar-component-typescript)
Simple appointment scheduling application built using Angular. The calendar view is created using DayPilot Pro Angular Calendar component. The server-side backend is created using PHP and stores events in a MySQL or SQLite database.
***
### Angular Day/Week/Month Views
[](https://code.daypilot.org/30451/angular-calendar-day-week-month-views)
[Angular Calendar: Day/Week/Month Views (Open-Source)](https://code.daypilot.org/30451/angular-calendar-day-week-month-views)
Angular project that displays an event calendar component with day, week and month views that share the same data and can be easily switched. A date picker component is used to switch the current date and highlight busy days.
***
### Angular Resource Calendar Tutorial
[](https://code.daypilot.org/42642/angular-resource-calendar-tutorial)
[Angular Resource Calendar (Open-Source)](https://code.daypilot.org/42642/angular-resource-calendar-tutorial)
Angular application that shows how to create a resource calendar Angular component that displays event data in multiple columns. The resource calendar supports drag and drop out of the box.
***
### Angular Date Picker Tutorial
[](https://code.daypilot.org/16244/angular-date-picker-with-drag-drop-range-selection)
[Angular Date Picker with Drag & Drop Range Selection (Open-Source)](https://code.daypilot.org/16244/angular-date-picker-with-drag-drop-range-selection)
How to activate the free-hand date range selection mode in the Angular date picker component (Navigator).
***
### Angular Calendar Date Switching Tutorial
[](https://code.daypilot.org/78004/angular-calendar-date-switching)
[Angular Calendar: Date Switching](https://code.daypilot.org/78004/angular-calendar-date-switching)
How to integrate Angular event calendar component with a date picker and navigation buttons for changing the visible week.
***
### Angular Calendar Undo/Redo
[](https://code.daypilot.org/14933/angular-calendar-with-undo-redo-open-source)
[Angular Calendar with Undo/Redo (Open-Source)](https://code.daypilot.org/14933/angular-calendar-with-undo-redo-open-source)
How to implement undo/redo functionality the for the open-source Angular Calendar component.
## Example
```typescript
import {Component, ViewChild, AfterViewInit} from "@angular/core";
import {DayPilot, DayPilotCalendarComponent} from "@daypilot/daypilot-lite-angular";
import {DataService} from "./data.service";
@Component({
selector: 'calendar-component',
template: `
<daypilot-calendar [config]="configCalendar" [events]="events" #calendar></daypilot-calendar>
`,
styles: [``]
})
export class CalendarComponent implements AfterViewInit {
@ViewChild("calendar") calendar!: DayPilotCalendarComponent;
events: DayPilot.EventData[] = [];
configCalendar: DayPilot.CalendarConfig = {
viewType: "Week",
onTimeRangeSelected: async (args) => {
const modal = await DayPilot.Modal.prompt("Create a new event:", "Event 1");
const dp = args.control;
dp.clearSelection();
if (!modal.result) { return; }
dp.events.add(new DayPilot.Event({
start: args.start,
end: args.end,
id: DayPilot.guid(),
text: modal.result
}));
}
};
constructor(private ds: DataService) {
}
ngAfterViewInit(): void {
this.loadEvents();
}
loadEvents(): void {
const from = this.nav.control.visibleStart();
const to = this.nav.control.visibleEnd();
this.ds.getEvents(from, to).subscribe(result => {
this.events = result;
});
}
}
```
## Documentation
* [Angular Scheduler](https://doc.daypilot.org/scheduler/angular/)
* [Angular Weekly Calendar](https://doc.daypilot.org/calendar/angular/)
* [Angular Monthly Calendar](https://doc.daypilot.org/month/angular/)
* [Angular Date Picker](https://doc.daypilot.org/navigator/angular/)
## CSS Themes
The [Theme Designer](https://themes.daypilot.org/) lets you create and download your own CSS theme using an online visual tool.
## License
Apache License 2.0