Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings
This repository was archived by the owner on Apr 11, 2025. It is now read-only.

Commit 9a935a6

Browse files
Angular 6 Scheduler sample committed.
1 parent ae02a5f commit 9a935a6

File tree

13 files changed

+95
-61
lines changed

13 files changed

+95
-61
lines changed

‎README.md‎

Lines changed: 24 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,36 @@
1-
# AngularSix
1+
# Syncfusion Angular 6 Scheduler Quick Start Project
22

3-
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.2.7.
3+
A quick start project that helps you to create the Syncfusion Angular 6 Scheduler with minimal code configuration.
44

5-
## Development server
5+
![Monthly Angular 6 Scheduler](monthly-scheduler.png)
66

7-
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
8-
9-
## Code scaffolding
7+
## Scheduler features covered in this Project
108

11-
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
9+
This is an Angular 6 project created using [Angular CLI](https://github.com/angular/angular-cli) 6.2.7. The Scheduler features included in this project are as follows.
10+
* Angular 6 Scheduler displaying basic views with appointments loaded as JSON data.
11+
* Drag and resize actions enabled for events by default.
12+
* Setting current date and view for scheduler.
13+
* Setting specific timezone on scheduler.
1214

13-
## Build
15+
## How to run this application?
16+
To run this application, you need to first clone the `ej2-angular-6-scheduler` repository and then navigate to its appropriate path where it has been located in your system.
1417

15-
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
18+
To do so, open the command prompt and run the below commands one after the other.
1619

17-
## Running unit tests
20+
```
21+
git clone https://github.com/SyncfusionSamples/ej2-angular-6-scheduler angular-6-scheduler
22+
cd angular-6-scheduler
23+
```
1824

19-
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
25+
## Installing
26+
Once done with downloading, next you need to install the necessay packages required to run this application locally. The `npm install` command will install all the needed angular packages into your current project and to do so, run the below command.
2027

21-
## Running end-to-end tests
22-
23-
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
28+
```
29+
npm install
30+
```
31+
## Running on development server
32+
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
2433

2534
## Further help
2635

27-
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
36+
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

‎monthly-scheduler.png‎

37.4 KB
Loading[フレーム]

‎package.json‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,24 @@
2020
"@angular/platform-browser": "^6.1.0",
2121
"@angular/platform-browser-dynamic": "^6.1.0",
2222
"@angular/router": "^6.1.0",
23+
"@syncfusion/ej2-base": "*",
24+
"@syncfusion/ej2-buttons": "*",
25+
"@syncfusion/ej2-inputs": "*",
26+
"@syncfusion/ej2-lists": "*",
27+
"@syncfusion/ej2-navigations": "*",
28+
"@syncfusion/ej2-calendars": "*",
29+
"@syncfusion/ej2-dropdowns": "*",
30+
"@syncfusion/ej2-schedule": "*",
31+
"@syncfusion/ej2-angular-base": "*",
32+
"@syncfusion/ej2-angular-buttons": "*",
33+
"@syncfusion/ej2-angular-inputs": "*",
34+
"@syncfusion/ej2-angular-lists": "*",
35+
"@syncfusion/ej2-angular-navigations": "*",
36+
"@syncfusion/ej2-angular-calendars": "*",
37+
"@syncfusion/ej2-angular-dropdowns": "*",
38+
"@syncfusion/ej2-angular-schedule": "*",
39+
"@types/requirejs": "^2.1.26",
40+
"cldr-data": "^33.0.0",
2341
"core-js": "^2.5.4",
2442
"rxjs": "~6.2.0",
2543
"zone.js": "~0.8.26"

‎src/app/app.component.html‎

Lines changed: 1 addition & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,2 @@
1-
<!--The content below is only a placeholder and can be replaced.-->
2-
<div style="text-align:center">
3-
<h1>
4-
Welcome to {{ title }}!
5-
</h1>
6-
<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
7-
</div>
8-
<h2>Here are some links to help you start: </h2>
9-
<ul>
10-
<li>
11-
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
12-
</li>
13-
<li>
14-
<h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
15-
</li>
16-
<li>
17-
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
18-
</li>
19-
</ul>
1+
<ejs-schedule [eventSettings]="eventData" width='750px' height='550px' [selectedDate]="currentDate" timezone="UTC" [currentView]="newViewMode"></ejs-schedule>
202

‎src/app/app.component.spec.ts‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { TestBed, async } from '@angular/core/testing';
22
import { AppComponent } from './app.component';
3-
43
describe('AppComponent', () => {
54
beforeEach(async(() => {
65
TestBed.configureTestingModule({
@@ -9,23 +8,20 @@ describe('AppComponent', () => {
98
],
109
}).compileComponents();
1110
}));
12-
13-
it('should create the app', () => {
11+
it('should create the app', async(() => {
1412
const fixture = TestBed.createComponent(AppComponent);
1513
const app = fixture.debugElement.componentInstance;
1614
expect(app).toBeTruthy();
17-
});
18-
19-
it(`should have as title 'AngularSix'`, () => {
15+
}));
16+
it(`should have as title 'app'`, async(() => {
2017
const fixture = TestBed.createComponent(AppComponent);
2118
const app = fixture.debugElement.componentInstance;
22-
expect(app.title).toEqual('AngularSix');
23-
});
24-
25-
it('should render title in a h1 tag', () => {
19+
expect(app.title).toEqual('app');
20+
}));
21+
it('should render title in a h1 tag', async(() => {
2622
const fixture = TestBed.createComponent(AppComponent);
2723
fixture.detectChanges();
2824
const compiled = fixture.debugElement.nativeElement;
29-
expect(compiled.querySelector('h1').textContent).toContain('Welcome to AngularSix!');
30-
});
25+
expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
26+
}));
3127
});

‎src/app/app.component.ts‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,33 @@
11
import { Component } from '@angular/core';
2+
import { EventSettingsModel, View } from '@syncfusion/ej2-angular-schedule';
23

34
@Component({
45
selector: 'app-root',
56
templateUrl: './app.component.html',
67
styleUrls: ['./app.component.css']
78
})
89
export class AppComponent {
9-
title = 'AngularSix';
10+
public currentDate: Date = new Date(2018, 10, 30);
11+
public newViewMode: View = 'Month';
12+
public eventData: EventSettingsModel = {
13+
dataSource: [{
14+
Id: 1,
15+
Subject: 'Board Meeting',
16+
StartTime: new Date(2018, 10, 30, 9, 0),
17+
EndTime: new Date(2018, 10, 30, 11, 0)
18+
},
19+
{
20+
Id: 2,
21+
Subject: 'Training session on JSP',
22+
StartTime: new Date(2018, 10, 30, 15, 0),
23+
EndTime: new Date(2018, 10, 30, 17, 0)
24+
},
25+
{
26+
Id: 3,
27+
Subject: 'Sprint Planning with Team members',
28+
StartTime: new Date(2018, 10, 30, 9, 30),
29+
EndTime: new Date(2018, 10, 30, 11, 0)
30+
}]
31+
}
32+
1033
}

‎src/app/app.module.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { BrowserModule } from '@angular/platform-browser';
2+
import {ScheduleModule, AgendaService, DayService, DragAndDropService, ResizeService, WeekService, WorkWeekService, MonthService } from '@syncfusion/ej2-angular-schedule';
23
import { NgModule } from '@angular/core';
34

45
import { AppComponent } from './app.component';
@@ -8,9 +9,9 @@ import { AppComponent } from './app.component';
89
AppComponent
910
],
1011
imports: [
11-
BrowserModule
12+
BrowserModule,ScheduleModule
1213
],
13-
providers: [],
14+
providers: [AgendaService,DayService,WeekService,WorkWeekService,MonthService,DragAndDropService,ResizeService],
1415
bootstrap: [AppComponent]
1516
})
1617
export class AppModule { }

‎src/browserslist‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
22
# For additional information regarding the format and rule options, please see:
33
# https://github.com/browserslist/browserslist#queries
4-
#
5-
# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed
6-
4+
# For IE 9-11 support, please uncomment the last line of the file and adjust as needed
75
> 0.5%
86
last 2 versions
97
Firefox ESR
108
not dead
11-
not IE 9-11
9+
# IE 9-11

‎src/environments/environment.ts‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
// This file can be replaced during build by using the `fileReplacements` array.
2-
// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
2+
// `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.
33
// The list of file replacements can be found in `angular.json`.
44

55
export const environment = {
66
production: false
77
};
88

99
/*
10-
* For easier debugging in development mode, you can import the following file
11-
* to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12-
*
13-
* This import should be commented out in production mode because it will have a negative impact
14-
* on performance if an error is thrown.
10+
* In development mode, to ignore zone related error stack frames such as
11+
* `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can
12+
* import the following file, but please comment it out in production mode
13+
* because it will have performance impact when throw error
1514
*/
1615
// import 'zone.js/dist/zone-error'; // Included with Angular CLI.

‎src/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,12 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<title>AngularSix</title>
5+
<title>Angular 6 Scheduler</title>
66
<base href="/">
77

88
<meta name="viewport" content="width=device-width, initial-scale=1">
99
<link rel="icon" type="image/x-icon" href="favicon.ico">
10+
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />
1011
</head>
1112
<body>
1213
<app-root></app-root>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /