Skip to content

Commit 82d7886

Browse files
yanmariomenevyanmariomenev
committed
chore: add translation to scheduler
1 parent ba09fb0 commit 82d7886

File tree

5 files changed

+189
-96
lines changed

5 files changed

+189
-96
lines changed

‎examples-standalone/kendoangular-landing-page/src/app/app.component.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,3 @@
1111
</div>
1212
</div>
1313
</div>
14-
<!-- <app-scheduler></app-scheduler> -->

‎examples-standalone/kendoangular-landing-page/src/app/app.component.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,13 @@ import { BottomLeftComponent } from './components/bottom-left/bottom-left.compon
44
import { TransactionsDashboardComponent } from './components/transactions-dashboard/transactions-dashboard.component';
55
import { BottomRightComponent } from './components/bottom-right/bottom-right.component';
66
import { SchedulerComponent } from "./components/scheduler/scheduler.component";
7+
import { DynamicGridComponent } from './components/dynamic-grid/dynamic-grid.component';
78

89
@Component({
910
selector: 'app-root',
1011
encapsulation: ViewEncapsulation.None,
1112
standalone: true,
12-
imports: [RouterOutlet, RouterLink, RouterLinkActive, BottomLeftComponent, BottomRightComponent, TransactionsDashboardComponent, SchedulerComponent],
13+
imports: [RouterOutlet, RouterLink, RouterLinkActive, BottomLeftComponent, BottomRightComponent, TransactionsDashboardComponent, SchedulerComponent, DynamicGridComponent],
1314
templateUrl: './app.component.html',
1415
styleUrl: './app.component.css'
1516
})

‎examples-standalone/kendoangular-landing-page/src/app/components/scheduler/scheduler.component.html

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,15 @@
1717
<kendo-scheduler-agenda-view></kendo-scheduler-agenda-view>
1818
<ng-template kendoSchedulerToolbarTemplate let-selectedDate="selectedDate">
1919
<div kendoSchedulerToolbarNavigation></div>
20-
20+
<kendo-dropdownlist
21+
[data]="languages"
22+
textField="text"
23+
valueField="value"
24+
[(value)]="selectedLanguage"
25+
(valueChange)="changeLanguage($event)"
26+
>
27+
</kendo-dropdownlist>
2128
<span class="k-spacer"></span>
22-
2329
<div kendoSchedulerToolbarViewSelector [toolbarWidth]="900" [responsiveBreakpoint]="960"></div>
2430
</ng-template>
2531
</kendo-scheduler>

‎examples-standalone/kendoangular-landing-page/src/app/components/scheduler/scheduler.component.ts

Lines changed: 103 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,108 +1,119 @@
1-
import { Component, OnInit } from '@angular/core';
2-
import { SchedulerEvent, CreateFormGroupArgs, KENDO_SCHEDULER } from '@progress/kendo-angular-scheduler';
3-
import { FormGroup, FormBuilder, ReactiveFormsModule } from '@angular/forms';
4-
import { sampleDataWithCustomSchema, displayDate, customModelFields } from './scheduler-data';
5-
import { KENDO_TOOLBAR } from '@progress/kendo-angular-toolbar';
1+
import { Component, OnInit } from "@angular/core";
2+
import { FormBuilder, FormGroup, ReactiveFormsModule } from "@angular/forms";
3+
import { KENDO_DROPDOWNLIST } from "@progress/kendo-angular-dropdowns";
4+
import { CreateFormGroupArgs, KENDO_SCHEDULER } from "@progress/kendo-angular-scheduler";
5+
import { KENDO_TOOLBAR } from "@progress/kendo-angular-toolbar";
6+
import { customModelFields, displayDate, sampleDataWithCustomSchema } from "./scheduler-data";
7+
import { SchedulerMessageService } from "../../services/scheduler-message.service";
8+
import { MessageService } from "@progress/kendo-angular-l10n";
69

710
@Component({
8-
selector: 'app-scheduler',
9-
standalone: true,
10-
imports: [KENDO_SCHEDULER, KENDO_TOOLBAR, ReactiveFormsModule],
11-
templateUrl: './scheduler.component.html',
12-
styleUrls: ['./scheduler.component.css']
11+
selector: "app-scheduler",
12+
standalone: true,
13+
imports: [KENDO_SCHEDULER, KENDO_TOOLBAR, KENDO_DROPDOWNLIST, ReactiveFormsModule],
14+
providers: [{ provide: MessageService, useClass: SchedulerMessageService }],
15+
templateUrl: "./scheduler.component.html",
16+
styleUrls: ["./scheduler.component.css"],
1317
})
1418
export class SchedulerComponent implements OnInit {
15-
public selectedDate: Date = displayDate;
16-
public events: any[] = [];
17-
public currentView: string = 'day';
18-
public modelFields = customModelFields;
19-
public orientation: 'horizontal' | 'vertical' = 'horizontal';
20-
public formGroup!: FormGroup;
21-
public group: any = { resources: ['Rooms', 'Persons'] }
22-
23-
public resources = [
24-
{
25-
name: 'Rooms',
26-
data: [
27-
{ text: 'Meeting Room 101', value: 1 , color: "#5392E4"},
28-
{ text: 'Meeting Room 201', value: 2, color: '#FF7272' }
29-
],
30-
field: 'RoomID',
31-
valueField: 'value',
32-
textField: 'text',
33-
colorField: 'color'
34-
},
35-
{
36-
name: 'Persons',
37-
data: [
38-
{ text: 'Peter', value: 1, color: '#5392E4' },
39-
{ text: 'Alex', value: 2, color: '#54677B' }
40-
],
41-
field: 'PersonIDs',
42-
valueField: 'value',
43-
textField: 'text',
44-
colorField: 'color'
45-
}
46-
];
19+
public selectedDate: Date = displayDate;
20+
public events: any[] = [];
21+
public currentView: string = "day";
22+
public modelFields = customModelFields;
23+
public orientation: "horizontal" | "vertical" = "horizontal";
24+
public formGroup!: FormGroup;
25+
public group: any = { resources: ["Rooms", "Persons"] };
4726

48-
constructor(private formBuilder: FormBuilder) {
49-
this.createFormGroup = this.createFormGroup.bind(this);
50-
}
27+
public resources = [
28+
{
29+
name: "Rooms",
30+
data: [
31+
{ text: "Meeting Room 101", value: 1, color: "#5392E4" },
32+
{ text: "Meeting Room 201", value: 2, color: "#FF7272" },
33+
],
34+
field: "RoomID",
35+
valueField: "value",
36+
textField: "text",
37+
colorField: "color",
38+
},
39+
{
40+
name: "Persons",
41+
data: [
42+
{ text: "Peter", value: 1, color: "#5392E4" },
43+
{ text: "Alex", value: 2, color: "#54677B" },
44+
],
45+
field: "PersonIDs",
46+
valueField: "value",
47+
textField: "text",
48+
colorField: "color",
49+
},
50+
];
51+
public languages: any[] = [
52+
{ text: "English", value: "en" },
53+
{ text: "Spanish", value: "es" }
54+
];
55+
public selectedLanguage: any = { text: "English", value: "en-US" };
56+
constructor(private formBuilder: FormBuilder, private messages: MessageService) {
57+
this.createFormGroup = this.createFormGroup.bind(this);
58+
}
5159

52-
ngOnInit(): void {
53-
this.events = sampleDataWithCustomSchema;
54-
}
60+
ngOnInit(): void {
61+
this.events = sampleDataWithCustomSchema;
62+
}
5563

56-
public createFormGroup(args: CreateFormGroupArgs): FormGroup {
57-
const dataItem = args.dataItem;
58-
// const isOccurrence = args.isOccurrence;
64+
public createFormGroup(args: CreateFormGroupArgs): FormGroup {
65+
const dataItem = args.dataItem;
5966

60-
const formGroup = this.formBuilder.group({
61-
'Id': args.isNew ? this.getNextId() : dataItem.TaskID,
62-
'Title': dataItem.Title,
63-
'Start': dataItem.Start,
64-
'End': dataItem.End,
65-
'StartTimezone': dataItem.StartTimezone,
66-
'EndTimezone': dataItem.EndTimezone,
67-
'Description': dataItem.Description,
68-
'RecurrenceRule': dataItem.RecurrenceRule,
69-
'RecurrenceID': dataItem.RecurrenceID,
70-
'RecurrenceException': dataItem.RecurrenceException,
71-
'isAllDay': dataItem.isAllDay,
72-
'RoomID': dataItem.RoomID,
73-
'PersonIDs': dataItem.PersonIDs
74-
});
67+
const formGroup = this.formBuilder.group({
68+
Id: args.isNew ? this.getNextId() : dataItem.TaskID,
69+
Title: dataItem.Title,
70+
Start: dataItem.Start,
71+
End: dataItem.End,
72+
StartTimezone: dataItem.StartTimezone,
73+
EndTimezone: dataItem.EndTimezone,
74+
Description: dataItem.Description,
75+
RecurrenceRule: dataItem.RecurrenceRule,
76+
RecurrenceID: dataItem.RecurrenceID,
77+
RecurrenceException: dataItem.RecurrenceException,
78+
isAllDay: dataItem.isAllDay,
79+
RoomID: dataItem.RoomID,
80+
PersonIDs: dataItem.PersonIDs,
81+
});
7582

76-
return formGroup;
77-
}
83+
return formGroup;
84+
}
7885

79-
public getNextId(): number {
80-
const len = this.events.length;
81-
return (len > 0) ? this.events[this.events.length - 1].TaskID + 1 : 1;
82-
}
86+
public getNextId(): number {
87+
const len = this.events.length;
88+
return len > 0 ? this.events[this.events.length - 1].TaskID + 1 : 1;
89+
}
8390

84-
public handleViewChange(view: string): void {
85-
this.currentView = view;
86-
}
91+
public handleViewChange(view: string): void {
92+
this.currentView = view;
93+
}
8794

88-
public handleDateChange(date: Date): void {
89-
this.selectedDate = date;
90-
}
95+
public handleDateChange(date: Date): void {
96+
this.selectedDate = date;
97+
}
9198

92-
public handleDataChange({ created, updated, deleted }: any): void {
93-
this.events = this.events
94-
.filter(item => deleted.findIndex((current: any) => current.TaskID === item.TaskID) === -1)
95-
.map(item => {
96-
const updatedItem = updated.find((current: any) => current.TaskID === item.TaskID);
97-
return updatedItem ? updatedItem : item;
98-
});
99+
public handleDataChange({ created, updated, deleted }: any): void {
100+
this.events = this.events
101+
.filter((item) => deleted.findIndex((current: any) => current.TaskID === item.TaskID) === -1)
102+
.map((item) => {
103+
const updatedItem = updated.find((current: any) => current.TaskID === item.TaskID);
104+
return updatedItem ? updatedItem : item;
105+
});
99106

100-
if (created.length > 0) {
101-
this.events = this.events.concat(created);
107+
if (created.length > 0) {
108+
this.events = this.events.concat(created);
109+
}
102110
}
103-
}
104111

105-
public handleOrientationChange(orientation: 'horizontal' | 'vertical'): void {
106-
this.orientation = orientation;
107-
}
108-
}
112+
public handleOrientationChange(orientation: "horizontal" | "vertical"): void {
113+
this.orientation = orientation;
114+
}
115+
public changeLanguage(language: string): void {
116+
const svc = <SchedulerMessageService>this.messages;
117+
svc.language = svc.language === "es" ? "en" : "es";
118+
}
119+
}

‎examples-standalone/kendoangular-landing-page/src/app/services/scheduler-message.service.ts

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import { Injectable } from "@angular/core";
2+
import { MessageService } from "@progress/kendo-angular-l10n";
3+
4+
interface LocalizationData {
5+
rtl: boolean;
6+
messages: { [key: string]: string };
7+
}
8+
9+
const localizationData: { [key: string]: LocalizationData } = {
10+
en: {
11+
rtl: false,
12+
messages: {
13+
"kendo.scheduler.today": "Today",
14+
"kendo.scheduler.allDay": "All day",
15+
"kendo.scheduler.showWorkDay": "Show business hours",
16+
"kendo.scheduler.showFullDay": "Show full day",
17+
"kendo.scheduler.agendaViewTitle": "Agenda",
18+
"kendo.scheduler.dayViewTitle": "Day",
19+
"kendo.scheduler.weekViewTitle": "Week",
20+
"kendo.scheduler.workWeekViewTitle": "Work Week",
21+
"kendo.scheduler.monthViewTitle": "Month",
22+
},
23+
},
24+
es: {
25+
rtl: false,
26+
messages: {
27+
"kendo.scheduler.today": "Hoy",
28+
"kendo.scheduler.allDay": "todo el dia",
29+
"kendo.scheduler.showWorkDay": "Mostrar horas laborables",
30+
"kendo.scheduler.showFullDay": "Mostrar día completo",
31+
"kendo.scheduler.agendaViewTitle": "Agenda",
32+
"kendo.scheduler.dayViewTitle": "Día",
33+
"kendo.scheduler.weekViewTitle": "Semana",
34+
"kendo.scheduler.workWeekViewTitle": "Semana laboral",
35+
"kendo.scheduler.monthViewTitle": "Mes",
36+
},
37+
},
38+
};
39+
40+
@Injectable({
41+
providedIn: "root",
42+
})
43+
export class SchedulerMessageService extends MessageService {
44+
public set language(value: string) {
45+
const lang = localizationData[value];
46+
47+
if (lang) {
48+
this.localeId = value;
49+
this.notify(lang.rtl);
50+
}
51+
}
52+
53+
public get language(): string {
54+
return this.localeId;
55+
}
56+
57+
private localeId = "en";
58+
59+
constructor() {
60+
super();
61+
}
62+
63+
private get messages(): { [key: string]: string } {
64+
const lang = localizationData[this.localeId];
65+
66+
if (lang) {
67+
return lang.messages;
68+
}
69+
return {};
70+
}
71+
72+
public override get(key: string): string {
73+
const messages = this.messages;
74+
return messages ? messages[key] : "";
75+
}
76+
}

0 commit comments

Comments
 (0)