care documentation
  1. Components
  2. AppointmentsComponent

File

src/app/appointments/appointments.component.ts

Implements

OnInit

Metadata

encapsulation ViewEncapsulation.None
providers AppointmentsService
selector app-appointments
styleUrls appointments.component.scss
templateUrl ./appointments.component.html

Index

Properties
Methods

Constructor

constructor()
Defined in src/app/appointments/appointments.component.ts:23

Methods

ngOnInit
ngOnInit()
Defined in src/app/appointments/appointments.component.ts:26
Returns : void

Properties

model
model: any
Type : any
Defined in src/app/appointments/appointments.component.ts:20
myDateRangePickerOptions
myDateRangePickerOptions: IMyDrpOptions
Type : IMyDrpOptions
Defined in src/app/appointments/appointments.component.ts:13
 
import { AppointmentsService } from './appointments.service';
import { IMyDrpOptions } from 'mydaterangepicker';
import { Component, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'app-appointments',
    templateUrl: './appointments.component.html',
    styleUrls: ['./appointments.component.scss'],
    encapsulation: ViewEncapsulation.None,
    providers: [AppointmentsService]
})
export class AppointmentsComponent implements OnInit {
    myDateRangePickerOptions: IMyDrpOptions = {
        // other options...
        dateFormat: 'dd/mm/yyyy'
    };

    // For example initialize to specific date (09.10.2018 - 19.10.2018). It is also possible
    // to set initial date range value using the selDateRange attribute.
    model: any = {
        beginDate: { year: 2018, month: 10, day: 9 },
        endDate: { year: 2018, month: 10, day: 19 }
    };
    constructor() {}

    ngOnInit() {}
}

<mat-toolbar>Appointments 
	<div class="appoint-date-picker">
				<my-date-range-picker name="mydaterange" [options]="myDateRangePickerOptions"
							[(ngModel)]="model" required>
				</my-date-range-picker>
	</div>
	
</mat-toolbar>
<div class="container-fluid appointments-page">
  	<div class="row appointment-content">
		<div class="col-lg-1 col-md-4 col-sm-6 col-xs-6 col-item">
			<p class="title">Monday</p>
			<div class="list-item day-over">
				<mat-card>
					<div class="time-info" color="primary">9:30am</div>
					<mat-card-content>
						<img mat-card-avatar class="header-image"  src="assets/images/patient.jpg">
						<div class="content-info">Abrahan</div>
						<div class="content-info">Mently depressed</div>
					</mat-card-content>
					<mat-card-actions>
						<button mat-button>Shedule</button>
						<button mat-button>Cancel</button>
					</mat-card-actions>
				</mat-card>
				<mat-card>
					<div class="time-info" color="primary">9:30am</div>
					<mat-card-content>
						<img mat-card-avatar class="header-image"  src="assets/images/patient.jpg">
						<div class="content-info">Abrahan</div>
						<div class="content-info">Mently depressed</div>
					</mat-card-content>
					<mat-card-actions>
						<button mat-button>Shedule</button>
						<button mat-button>Cancel</button>
					</mat-card-actions>
				</mat-card>
				<mat-card>
					<div class="time-info" color="primary">9:30am</div>
					<mat-card-content>
						<img mat-card-avatar class="header-image"  src="assets/images/patient.jpg">
						<div class="content-info">Abrahan</div>
						<div class="content-info">Mently depressed</div>
					</mat-card-content>
					<mat-card-actions>
						<button mat-button>Shedule</button>
						<button mat-button>Cancel</button>
					</mat-card-actions>
				</mat-card>
			</div>
		</div>
		<div class="col-lg-1 col-md-4 col-sm-6 col-xs-6 col-item">
			<p class="title selected">Tuesday</p>
			<div class="list-item">
				<mat-card>
					<div class="time-info" color="primary">9:30am</div>
					<mat-card-content>
						<img mat-card-avatar class="header-image"  src="assets/images/patient.jpg">
						<div class="content-info">Abrahan</div>
						<div class="content-info">Mently depressed</div>
					</mat-card-content>
					<mat-card-actions>
						<button mat-button>Shedule</button>
						<button mat-button>Cancel</button>
					</mat-card-actions>
				</mat-card>
				<mat-card>
					<div class="time-info" color="primary">9:30am</div>
					<mat-card-content>
						<img mat-card-avatar class="header-image"  src="assets/images/patient.jpg">
						<div class="content-info">Abrahan</div>
						<div class="content-info">Mently depressed</div>
					</mat-card-content>
					<mat-card-actions>
						<button mat-button>Shedule</button>
						<button mat-button>Cancel</button>
					</mat-card-actions>
				</mat-card>
				<mat-card>
					<div class="time-info" color="primary">9:30am</div>
					<mat-card-content>
						<img mat-card-avatar class="header-image"  src="assets/images/patient.jpg">
						<div class="content-info">Abrahan</div>
						<div class="content-info">Mently depressed</div>
					</mat-card-content>
					<mat-card-actions>
						<button mat-button>Shedule</button>
						<button mat-button>Cancel</button>
					</mat-card-actions>
				</mat-card>
			</div>
		</div>
		<div class="col-lg-1 col-md-4 col-sm-6 col-xs-6 col-item">
			<p class="title">Wednesday</p>
			<div class="list-item">
				<mat-card>
					<div class="time-info" color="primary">9:30am</div>
					<mat-card-content>
						<img mat-card-avatar class="header-image"  src="assets/images/patient.jpg">
						<div class="content-info">Abrahan</div>
						<div class="content-info">Mently depressed</div>
					</mat-card-content>
					<mat-card-actions>
						<button mat-button>Shedule</button>
						<button mat-button>Cancel</button>
					</mat-card-actions>
				</mat-card>
				<mat-card>
					<div class="time-info" color="primary">9:30am</div>
					<mat-card-content>
						<img mat-card-avatar class="header-image"  src="assets/images/patient.jpg">
						<div class="content-info">Abrahan</div>
						<div class="content-info">Mently depressed</div>
					</mat-card-content>
					<mat-card-actions>
						<button mat-button>Shedule</button>
						<button mat-button>Cancel</button>
					</mat-card-actions>
				</mat-card>
				<mat-card>
					<div class="time-info" color="primary">9:30am</div>
					<mat-card-content>
						<img mat-card-avatar class="header-image"  src="assets/images/patient.jpg">
						<div class="content-info">Abrahan</div>
						<div class="content-info">Mently depressed</div>
					</mat-card-content>
					<mat-card-actions>
						<button mat-button>Shedule</button>
						<button mat-button>Cancel</button>
					</mat-card-actions>
				</mat-card>
			</div>
		</div>
		<div class="col-lg-1 col-md-4 col-sm-6 col-xs-6 col-item">
			<p class="title">Thursday</p>
			<div class="list-item">
				<mat-card>
					<div class="time-info" color="primary">9:30am</div>
					<mat-card-content>
						<img mat-card-avatar class="header-image"  src="assets/images/patient.jpg">
						<div class="content-info">Abrahan</div>
						<div class="content-info">Mently depressed</div>
					</mat-card-content>
					<mat-card-actions>
						<button mat-button>Shedule</button>
						<button mat-button>Cancel</button>
					</mat-card-actions>
				</mat-card>
				<mat-card>
					<div class="time-info" color="primary">9:30am</div>
					<mat-card-content>
						<img mat-card-avatar class="header-image"  src="assets/images/patient.jpg">
						<div class="content-info">Abrahan</div>
						<div class="content-info">Mently depressed</div>
					</mat-card-content>
					<mat-card-actions>
						<button mat-button>Shedule</button>
						<button mat-button>Cancel</button>
					</mat-card-actions>
				</mat-card>
				<mat-card>
					<div class="time-info" color="primary">9:30am</div>
					<mat-card-content>
						<img mat-card-avatar class="header-image"  src="assets/images/patient.jpg">
						<div class="content-info">Abrahan</div>
						<div class="content-info">Mently depressed</div>
					</mat-card-content>
					<mat-card-actions>
						<button mat-button>Shedule</button>
						<button mat-button>Cancel</button>
					</mat-card-actions>
				</mat-card>
			</div>
		</div>
		<div class="col-lg-1 col-md-4 col-sm-6 col-xs-6 col-item">
			<p class="title">Friday</p>
			<div class="list-item">
				<mat-card>
					<div class="time-info" color="primary">9:30am</div>
					<mat-card-content>
						<img mat-card-avatar class="header-image"  src="assets/images/patient.jpg">
						<div class="content-info">Abrahan</div>
						<div class="content-info">Mently depressed</div>
					</mat-card-content>
					<mat-card-actions>
						<button mat-button>Shedule</button>
						<button mat-button>Cancel</button>
					</mat-card-actions>
				</mat-card>
				<mat-card>
					<div class="time-info" color="primary">9:30am</div>
					<mat-card-content>
						<img mat-card-avatar class="header-image"  src="assets/images/patient.jpg">
						<div class="content-info">Abrahan</div>
						<div class="content-info">Mently depressed</div>
					</mat-card-content>
					<mat-card-actions>
						<button mat-button>Shedule</button>
						<button mat-button>Cancel</button>
					</mat-card-actions>
				</mat-card>
				<mat-card>
					<div class="time-info" color="primary">9:30am</div>
					<mat-card-content>
						<img mat-card-avatar class="header-image"  src="assets/images/patient.jpg">
						<div class="content-info">Abrahan</div>
						<div class="content-info">Mently depressed</div>
					</mat-card-content>
					<mat-card-actions>
						<button mat-button>Shedule</button>
						<button mat-button>Cancel</button>
					</mat-card-actions>
				</mat-card>
			</div>
		</div>
		<div class="col-lg-1 col-md-4 col-sm-6 col-xs-6 col-item">
			<p class="title">Saturday</p>
			<div class="list-item">
				<mat-card>
					<div class="time-info" color="primary">9:30am</div>
					<mat-card-content>
						<img mat-card-avatar class="header-image"  src="assets/images/patient.jpg">
						<div class="content-info">Abrahan</div>
						<div class="content-info">Mently depressed</div>
					</mat-card-content>
					<mat-card-actions>
						<button mat-button>Shedule</button>
						<button mat-button>Cancel</button>
					</mat-card-actions>
				</mat-card>
				<mat-card>
					<div class="time-info" color="primary">9:30am</div>
					<mat-card-content>
						<img mat-card-avatar class="header-image"  src="assets/images/patient.jpg">
						<div class="content-info">Abrahan</div>
						<div class="content-info">Mently depressed</div>
					</mat-card-content>
					<mat-card-actions>
						<button mat-button>Shedule</button>
						<button mat-button>Cancel</button>
					</mat-card-actions>
				</mat-card>
				<mat-card>
					<div class="time-info" color="primary">9:30am</div>
					<mat-card-content>
						<img mat-card-avatar class="header-image"  src="assets/images/patient.jpg">
						<div class="content-info">Abrahan</div>
						<div class="content-info">Mently depressed</div>
					</mat-card-content>
					<mat-card-actions>
						<button mat-button>Shedule</button>
						<button mat-button>Cancel</button>
					</mat-card-actions>
				</mat-card>
			</div>
		</div>
		<div class="col-lg-1 col-md-4 col-sm-6 col-xs-6 col-item">
			<p class="title">Sunday </p>
			<div class="list-item no-appointments">
				<div class="no-card">Off Duty</div>
				<div class="no-card">You havent set any available hours for this day</div>
				<div class="no-card"><a ui-sref="">Set Available Hours</a></div>
			</div>
		</div>
  	</div>
</div>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""