jQWidgets Forums

jQuery UI Widgets Forums Angular Scheduler Rebind not working in Angular4

This topic contains 4 replies, has 2 voices, and was last updated by  chiru 7 years, 5 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Scheduler Rebind not working in Angular4 #98807

    chiru
    Participant

    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 Angular4

    Kindly suggest how to do it.

    Thanks,
    Chiru.

    Scheduler Rebind not working in Angular4 #98833

    Stanislav
    Participant

    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,
    Stanislav

    jQWidgets Team
    http://www.jqwidgets.com/

    Scheduler Rebind not working in Angular4 #98878

    chiru
    Participant

    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.

    Scheduler Rebind not working in Angular4 #98879

    Stanislav
    Participant

    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,
    Stanislav

    jQWidgets Team
    http://www.jqwidgets.com/

    Scheduler Rebind not working in Angular4 #98895

    chiru
    Participant

    Got it! Thanks a ton.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.