@daypilot/daypilot-lite-angular 3.8.0 → 3.9.0

package/README.md

@@ -1,21 +1,138 @@
-DayPilot Lite for Angular
-===================================
+# DayPilot Lite for Angular
 
-Angular event calendar components that can display day/week/month calendar views.
+[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. This is the Angular version of DayPilot Lite.
 
-Features
---------
+## What's New
 
-* CSS themes (use theme builder to create your own theme)
-* Event customization (text, HTML, colors...)
-* Drag and drop event moving and resizing
+[Release History](https://javascript.daypilot.org/daypilot-lite-history/)
+
+## Online Demo
+
+[![JavaScript Event Calendar Demo](https://static.daypilot.org/npm/202207/javascript-html5-event-calendar-scheduler-drag-drop.png)](https://javascript.daypilot.org/demo/lite/)
+
+[Online Demo](https://javascript.daypilot.org/demo/lite/)
+
+## Features
+
+* Calendar/scheduler views: day, week, work week, month, resource calendar
 * 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 Appointment Calendar Tutorial
+
+![Angular Appointment Calendar](https://static.daypilot.org/npm/202207/angular-appointment-calendar.png)
+
+[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
+
+![Angular Calendar: Day/Week/Month Views](https://static.daypilot.org/npm/202207/angular-calendar-day-week-month.png)
+
+[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
+
+![Angular Resource Calendar](https://static.daypilot.org/npm/202207/angular-resource-calendar-tutorial.png)
+
+[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
+
+![Angular Date Picker with Drag & Drop Range Selection](https://static.daypilot.org/npm/202207/angular-calendar-date-picker-drag-drop.png)
+
+[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
+
+![Angular Calendar Date Switching](https://static.daypilot.org/npm/202207/angular-calendar-date-switching-tutorial.png)
+
+[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.
+
+## 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 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
 
-License
--------
 Apache License 2.0
 
-Product information
--------------------
-https://javascript.daypilot.org/
+
+