https://github.com/vmanchev/toxic-schedule
Angular 6 module, rendering time slots for appointments.
https://github.com/vmanchev/toxic-schedule
angular angular6 appointments organizer schedule
Last synced: 6 days ago
JSON representation
Angular 6 module, rendering time slots for appointments.
- Host: GitHub
- URL: https://github.com/vmanchev/toxic-schedule
- Owner: vmanchev
- License: isc
- Created: 2018-09-19T14:44:54.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-10-08T16:15:06.000Z (over 7 years ago)
- Last Synced: 2026-04-04T04:55:11.495Z (6 days ago)
- Topics: angular, angular6, appointments, organizer, schedule
- Language: TypeScript
- Homepage:
- Size: 364 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Toxic Schedule component
Angular 6 module, rendering time slots for appointments.
Desktop layout | Mobile layout
:-------------------------:|:-------------------------:
 | 
## Install
```
npm install --save toxic-schedule
```
## Usage
1. Import **ToxicScheduleModule** in your project
```
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import { ToxicScheduleModule } from "toxic-schedule";
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
ToxicScheduleModule
],
bootstrap: [AppComponent]
})
export class AppModule {}
```
2. Use the following HTML
```
```
- **interval** - number, slot intervals in minutes
- **startTime** - Date object, representing the schedule start time
- **endTime** - Date object, representing the schedule end time
- **reservedSlots** - list of predefined time slots, which should be displayed in the schedule
- **sectors** - list of sector names (vertical columns). Must match the values from TimeSlot's *sector* property.
- **slotSelected** - event, which will be emittted when a slot is selected. TimeSlot model
will be passed, eigther empty or one of the preselected.
## TimeSlot model
```
const timeSlot = new TimeSlot(startTime, endTime, sector, [description, [params, [id]]]);
```
- **startTime** - Slot start date/time. Date, string or milliseconds.
- **endTime** - Slot start date/time. Date, string or milliseconds.
- **sector** - Sector name, string.
- **description** - Optional, plain text description for this time slot.
- **params** - Optional, any params you might need to pass over.
- **id** - Optional, slot id, if you have assigned one.
## Demo
1. Clone the project and install its dependencies
```
git clone https://github.com/vmanchev/toxic-schedule.git
cd toxic-schedule
npm install
```
2. Run the application
```
ng serve
```
3. Open your browser and navigate to `http://localhost:3000`
4. Play with it - change the data from src/app/app.component.ts file.
Screenshots can be found in the github repo.
## Features
- multiple sectors (e.g. all doctors in the clinic);
- customizable slot intervals;
- customizable start and end date/time;
- display reserved slots
## How it works
You'll get a nice schedule with sectors (columns) and time slots (rows). When the user
clicks on any slot, *slotSelected* event will be dispatched. Use your own handler
function to capture the selected [TimeSlot](src/app/models/time-slot.model.ts) object.
The minimum required setup data would be:
- slots interval in minites
- at least one sector
- start date/time
- end date/time
In addition, you can provide a list of TimeSlot objects, which will be used as reserved
slots. These will be displayed over the main grid of time slots, with different background,
and the value from TimeSlot's *description* property will be displayed.
## Responsive layout
For small screens (below 576px in width), only one sector at a time will be displayed. All
sectors are accessible via a dropdown. When the user selects a new sector, the related
TimeSlot grid will be displayed along with the reserved slots, if any.
For bigger screens (576px and above), all sectors will be displayed.
## Sample data
The following sample data was used to build the above screenshots:
```
this.interval = 15;
this.startTime = new Date('2018-09-20T10:00:00.000');
this.endTime = new Date('2018-09-20T13:00:00.000');
this.sectors = [
'Anakin Skywalker',
'Chewbacca',
'Han Solo',
'Leia Organa'
];
this.reservedSlots = [
new TimeSlot(
'2018-09-20T10:30:00',
'2018-09-20T10:45:00',
'Anakin Skywalker',
'Dentist',
1
),
new TimeSlot(
'2018-09-20T10:45:00',
'2018-09-20T11:00:00',
'Anakin Skywalker',
'Meeting with Joe',
2
),
new TimeSlot(
'2018-09-20T11:30:00',
'2018-09-20T12:00:00',
'Anakin Skywalker',
'Call Adam',
3
),
new TimeSlot(
'2018-09-20T10:00:00',
'2018-09-20T10:30:00',
'Chewbacca',
'Board meeting',
4
),
new TimeSlot(
'2018-09-20T10:45:00',
'2018-09-20T11:15:00',
'Han Solo',
'Dentist',
5
),
new TimeSlot(
'2018-09-20T11:45:00',
'2018-09-20T12:30:00',
'Leia Organa',
'Kinds/Lunch',
6
)
];
```
## Build the library
Run `ng build toxic-schedule` and find the output inside the `dist/toxic-schedule` folder.