jQWidgets Forums
jQuery UI Widgets › Forums › Angular › Scheduler Rebind not working in Angular4
Tagged: #scheduler #rebind #angular4
This topic contains 4 replies, has 2 voices, and was last updated by chiru 7 years, 5 months ago.
-
Author
-
Hi,
I tried to refresh the data while changing the resource from dropdown and trying to reassign the source and creating a new instance of dataAdapter using the source is not refreshing the data and not showing the appointments.Note:
Using Angular4Kindly suggest how to do it.
Thanks,
Chiru.Hello Chiru,
Here is an example of changing the appointments on a button click in angular scheduler.
app.component.html:
<jqxScheduler #schedulerReference [date]="date" [width]="800" [height]="600" [source]="dataAdapter" [showLegend]="true" [view]="'weekView'" [appointmentDataFields]="appointmentDataFields" [resources]="resources" [views]="views" [dayNameFormat]="'abbr'"> </jqxScheduler> <div style='margin-top: 20px'> <jqxButton #button [width]='120' [height]='40' (onClick)="buttonClicked()"> Button </jqxButton> </div>
app.component.ts:
export class AppComponent implements AfterViewInit { @ViewChild('schedulerReference') scheduler: jqxSchedulerComponent; ngAfterViewInit(): void { this.scheduler.ensureAppointmentVisible('id1'); } generateAppointments(): any { let appointments = new Array(); let appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) }; let appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) }; appointments.push(appointment1); appointments.push(appointment2); return appointments; }; generateSecondAppointments(): any { let SecondAppointments = new Array(); let appointment1 = { id: "id1", description: "Interview with Nancy", location: "", subject: "Course Social Media", calendar: "Room 1", start: new Date(2016, 10, 23, 12, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) }; let appointment2 = { id: "id2", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 24, 7, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) }; SecondAppointments.push(appointment1); SecondAppointments.push(appointment2); return SecondAppointments; }; 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' } ], id: 'id', localData: this.generateAppointments() }; dataAdapter: any = new jqx.dataAdapter(this.source); date: any = new jqx.date(2016, 11, 23); appointmentDataFields: any = { from: "start", to: "end", id: "id", description: "description", location: "place", subject: "subject", resourceId: "calendar" }; resources: any = { colorScheme: "scheme05", dataField: "calendar", orientation: "horizontal", source: new jqx.dataAdapter(this.source) }; views: any[] = [ { type: 'dayView', showWeekends: false }, { type: 'weekView', showWeekends: false }, { type: 'monthView' } ]; buttonClicked(): void { this.source = { 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' } ], id: 'id', localData: this.generateSecondAppointments() }; this.dataAdapter = new jqx.dataAdapter(this.source); } }
Best Regards,
StanislavjQWidgets Team
http://www.jqwidgets.com/Thanks a lot Stanislav,
It works well. I have an issue in DataRendereing and it worked well after commenting out that.
Am facing issue in setting up the theme for Angular4. Can you provide a sample for that.
Thanks in advance.
~Chiru.
Hello Chiru,
You need to add the CSS file to the
.angular-cli.JSON
. In the styles section.
!You need to re-build the project after modifying it!After that, you just need to add it to the widget.
app.component.html<jqxScheduler #schedulerReference [date]="date" [width]="800" [height]="600" [source]="dataAdapter" [showLegend]="true" [view]="'weekView'" [appointmentDataFields]="appointmentDataFields" [resources]="resources" [views]="views" [dayNameFormat]="'abbr'" [theme]="'energyblue'"> </jqxScheduler>
Best Regards,
StanislavjQWidgets Team
http://www.jqwidgets.com/Got it! Thanks a ton.
-
AuthorPosts
You must be logged in to reply to this topic.