jQWidgets Forums
Forum Replies Created
-
app.component.html
<app-header></app-header>
<div class=”row”>
<div class=”col-xs-4″ style=”display: flex;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);font-weight: 800;margin-right:80px;border:1px outset #e6e8e99a;font-family: Arial, Helvetica, sans-serif;
“>
<jqxListBox #myListBox[allowDrag]=”true”
[source]=”Lsource”
[width]=”270″
[height]=”‘105%'”
[theme]=”energyblue”
[dragEnd]=”dragEnd”
(onDragEnd)=”DragEnd($event)”
>
</jqxListBox>
</div>
<div class=”col-xs-8″>
<jqxScheduler #myScheduler style=” margin-top: 20px;
/* border:1px outset #647279; */
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(89, 93, 94, 0.2), 0 6px 20px 0 rgba(61, 80, 99, 0.19);
”
[date]=”date”
[width]=”1150″
[height]=”600″
[source]=”dataAdapter”
[showLegend]=”true”
[view]=”‘monthView'”
[appointmentDataFields]=”appointmentDataFields”
[editDialogCreate]=”editDialogCreate”
[resources]=”resources”
[views]=”views”
(onCellClick)=”CellClick($event)”>
</jqxScheduler>
</div></div>
app.component.ts
import { Component, ViewChild, AfterViewInit } from ‘@angular/core’;
import { jqxListBoxComponent } from “jqwidgets-scripts/jqwidgets-ts/angular_jqxlistbox”;
import { DirectiveRegistryValuesIndex } from ‘@angular/core/src/render3/interfaces/styling’;
import { jqxSchedulerComponent } from ‘jqwidgets-scripts/jqwidgets-ts/angular_jqxscheduler’;@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent implements AfterViewInit{@ViewChild(‘myScheduler’) myScheduler: jqxSchedulerComponent;
@ViewChild(‘myListBox’) myListBox: jqxListBoxComponent;ngAfterViewInit(): void
{}
generateAppointments(): any
{
let appointments = new Array();let appointment1 = {
id: “id1”,
description: “Interviews for IT/DT”,
location: “”,
subject: “Interview with James”,
calendar: “Engineer 1”,
start: new Date(2019, 4, 23, 9, 0, 0),
end: new Date(2019, 4, 23, 12, 0, 0)
};
let appointment2 = {
id: “id2”, description: “”,
location: “”, subject: “IT Group Mtg.”, calendar: “Engineer 2”,
start: new Date(2019, 4, 24, 8, 0, 0),
end: new Date(2019, 4, 24, 10, 0, 0)
};
let appointment3 = {
id: “id3”, description: “”,
location: “”, subject: “Team Meet”, calendar: “Engineer 3”,
start: new Date(2019, 4, 23, 10, 0, 0),
end: new Date(2019, 4, 23, 15, 0, 0)
};
let appointment4 = {
id: “id4”, description: “”,
location: “”, subject: “COC Meet”, calendar: “Engineer 3”,
start: new Date(2019, 4, 15, 10, 0, 0),
end: new Date(2019, 4, 15, 15, 0, 0)
};
let appointment5 = {
id: “id5”, description: “”,
location: “”, subject: “All Hands Meet”, calendar: “Engineer 2”,
start: new Date(2019, 4, 2, 10, 0, 0),
end: new Date(2019, 4, 2, 12, 0, 0)
};let appointment6 = {
id: “id6”, description: “”,
location: “”, subject: “Certification”,
calendar: “Certification”,
start: new Date(2019, 4, 7, 10, 0, 0),
end: new Date(2019, 4, 7, 12, 0, 0),
background: “red”,
allDay:”true”
};appointments.push(appointment1);
appointments.push(appointment2);
appointments.push(appointment3);
appointments.push(appointment4);
appointments.push(appointment5);
appointments.push(appointment6);return appointments;
}source: any =
{
dataType: “array”,
dataFields: [
{ name: ‘id’, type: ‘string’ },
{ name: ‘description’, type: ‘string’ },
{ name: ‘location’, type: ‘string’ },
{ name: ‘subject’, type: ‘string’ },
{ name: ‘calendar’, type: ‘string’ },
{ name: ‘start’, type: ‘date’ },
{ name: ‘end’, type: ‘date’ },
{ name: ‘style’, type: ‘string’ },
{ name: ‘color’, type: ‘string’ },
{name: ‘Certification’, type:’Boolean’}],
id: ‘id’,
localData: this.generateAppointments()
}dataAdapter: any = new jqx.dataAdapter(this.source);
// date:any=new Date(2019, 4, 7, 12, 0, 0);printButton: any = null;
appointmentDataFields: any =
{
from: “start”,
to: “end”,
id: “id”,
description: “description”,
location: “location”,
subject: “subject”,
resourceId: “calendar”
};resources: any =
{
colorScheme: “scheme012”,
dataField: “calendar”,
source: new jqx.dataAdapter(this.source),
// renderAppointment: function(data)
// {
// // data Object properties
// // appointment – Object with the properties from the Scheduler.s source object.
// // width – int
// // height- int
// // textColor – hex
// // background – hex
// // borderColor – hex
// // style – string
// // cssClass – string
// // html – html string
// // view – string
// var img = “
“;
// if (data.appointment.subject == “Nancy”) {
// var img = “
“;
// }
// else if (data.appointment.subject == “Peter”) {
// var img = “
“;
// }
// else if (data.appointment.subject == “Antony”) {
// var img = “
“;
// }
// else if (data.appointment.subject == “John”) {
// var img = “
“;
// }// if (data.view == “weekView” || data.view == “dayView” || data.view == “monthView”) {
// data.html = img + “<i>” + data.appointment.subject + “</i>”;
// if (data.appointment.id == “id1”) {
// data.style = “#AA4643”;
// }
// else if (data.appointment.id == “id2” || data.appointment.id == “id6”) {
// data.style = “#309B46”;
// }
// else if (data.appointment.id == “id3”) {
// data.style = “#447F6E”;
// }
// }// return data;
// }};
views: any[] =
[
{
type:’dayView’,
showWeekends: false
},
{
type: “weekView”,
showWeekends: false,
timeRuler: {
scaleStartHour:8,
scaleEndHour:22,
hidden: false },
workTime:
{
fromDayOfWeek: 1,
toDayOfWeek: 5,
fromHour: 7,
toHour: 18
}
},
{
type: ‘monthView’,
monthRowAutoHeight: true,
workTime:
{
fromDayofWeek:1,
toDayOfWeek: 5,
hidden:true}
},
‘agendaView’
];isFirstLoad: boolean = true;
editDialogCreate = (dialog, fields, editAppointment) => {
if (this.isFirstLoad) {
this.isFirstLoad = false;
this.myScheduler.closeDialog();
dialog.jqxWindow({ isModal: true });
setTimeout(_ => {
dialog.jqxWindow({ height: 400 });
this.myScheduler.openDialog(480,200);
}, 100);
}// fields.repeatContainer.hide();
fields.statusContainer.hide();
fields.timeZoneContainer.hide();
fields.colorContainer.hide();
fields.allDayLabel.html(“Certification”);fields.subjectLabel.html(“Title”);
fields.locationLabel.html(“Where”);
// fields.allDay.html(“Certification”);
fields.fromLabel.html(“Start”);
fields.toLabel.html(“End”);
fields.resourceLabel.html(“Engineer/Certificate”);// fields.subjectLabel.jqxValidator({
// rules: [{ input: fields.subject, message: ‘Title is required!’, action: ‘keyup, blur’, rule: ‘required’ }]
// });let buttonElement = document.createElement(“BUTTON”);
buttonElement.innerText = ‘Print’;
buttonElement.style.cssFloat = ‘right’;
buttonElement.style.marginLeft = ’10px’;
buttonElement.style.padding=’6px 53px 21px 17px’;
buttonElement.id = ‘PrintButton’;fields.buttons[0].appendChild(buttonElement);
let printButton: jqwidgets.jqxButton = jqwidgets.createInstance(‘#PrintButton’, ‘jqxButton’, {
theme: ‘material’,
width: 50,
height: 25
});this.printButton = printButton;
printButton.addEventHandler(‘click’, function () {
let appointment = editAppointment;
if (!appointment && printButton.disabled) {
return;
}let appointmentContent =
“<table class=’printTable’>” +
“<tr>” +
“<td class=’label’>Title</td>” +
“<td>” + fields.subject.val() + “</td>” +
“</tr>” +
“<tr>” +
“<td class=’label’>Start</td>” +
“<td>” + fields.from.val() + “</td>” +
“</tr>” +
“<tr>” +
“<td class=’label’>End</td>” +
“<td>” + fields.to.val() + “</td>” +
“</tr>” +
“<tr>” +
“<td class=’label’>Where</td>” +
“<td>” + fields.location.val() + “</td>” +
“</tr>” +
“<tr>” +
“<td class=’label’>Engineer</td>” +
“<td>” + fields.resource.val() + “</td>” +
“</tr>”
+ “</table>”;
let newWindow = window.open(”, ”, ‘width=800, height=500’),
document = newWindow.document.open(),
pageContent =
‘<!DOCTYPE html>\n’ +
‘<html>\n’ +
‘<head>\n’ +
‘<meta charset=”utf-8″ />\n’ +
‘<title>jQWidgets Scheduler</title>\n’ +
‘<style>\n’ +
‘.printTable {\n’ +
‘border-color: #aaa;\n’ +
‘}\n’ +
‘.printTable .label {\n’ +
‘font-weight: bold;\n’ +
‘}\n’ +
‘.printTable td{\n’ +
‘padding: 4px 3px;\n’ +
‘border: 1px solid #DDD;\n’ +
‘vertical-align: top;\n’ +
‘}\n’ +
‘</style>’ +
‘</head>\n’ +
‘<body>\n’ + appointmentContent + ‘\n</body>\n</html>’;
try {
document.write(pageContent);
document.close();
}
catch (error) {
}
newWindow.print();
});//——–data Button——
let buttonElement1 = document.createElement(“BUTTON”);
buttonElement1.innerText = ‘Data’;
buttonElement1.style.cssFloat = ‘right’;
buttonElement1.style.marginLeft = ’10px’;
buttonElement1.style.padding=’6px 53px 21px 17px’;
buttonElement1.id = ‘DataButton’;fields.buttons[0].appendChild(buttonElement1);
let dataButton: jqwidgets.jqxButton = jqwidgets.createInstance(‘#DataButton’, ‘jqxButton’, {
theme: ‘material’,
width: 50,
height: 25
});// this.dataButton = dataButton;
dataButton.addEventHandler(‘click’, function () {
let appointment = editAppointment;
if (!appointment && dataButton.disabled) {
return;
}let my_window = window.open(“”,”Test Data”,”status=0,width=1100,height=800″);
my_window.document.write(‘
‘);});
};
// Creating List
Lsource:String[] = [
‘Frontal-impact Test’,
‘Moderate Overlap tests’,
‘Side-impact tests’,
‘Roll-over tests’,
‘Small Overlap tests’,
‘Frontal Crash Test’,
‘Test on Hybrid’,
‘Preliminary Test’,
‘Stability Test’];
DragEnd($event:any):void
{let args = $event.args;
let label = args.label;
let value = args.value;
let originalEvent = args.originalEvent;
let target = originalEvent.target;
// let targetDateString = target.getAttribute(“data-date”);
let targetDate = new Date(args.originalEvent.timeStamp);
// let targetDateEnd = new Date(targetDateString);
// targetDateEnd.setMinutes(targetDate.getMinutes() + 30);debugger;
var newAppointment = {
id:”id”,
description: “”,
location: “”,
subject: label,
calendar: “Engineer 1”,
start: targetDate ,
end: targetDate
};
debugger;this.myScheduler.addAppointment(newAppointment);
let Lvalue = this.myListBox.getSelectedItem();
this.myListBox.disableItem(Lvalue);
debugger;
}}