Our powerful JS Calendar component


Post by wrp »

HI,

I'm new to Bryntum Calendar and I'm trying to get crudManager and autoSync: true working. However, I don't see the browser requests for a sync - just the initial load works. Odds are I'm misunderstanding something.

<bryntum-project-model
    #project
    [events] = "events"
    [resources] = "resources"
></bryntum-project-model>

<bryntum-calendar
    #calendar
    [date] = "calendarConfig.date"
    [project] = project
    (onAfterEventSave)="onAfterEventSave($event)"
    (onDataChange)="onDataChange($event)"
></bryntum-calendar>
@Component({
  selector: 'app-calendar',
  templateUrl: './calendar.component.html',
  styleUrls: ['./calendar.component.scss']
})
export class CalendarComponent implements OnInit {
    @ViewChild('calendar', { static : false }) calendarComponent!: BryntumCalendarComponent;
    @ViewChild('project', { static : false }) projectComponent!: BryntumProjectModelComponent;

    constructor() { }

    events = [];
    resources = [];
    assignments = [];

    calendarConfig: Partial<CalendarConfig> = {
        date: new Date(),
        crudManager: new CrudManager({
            autoLoad: true,
            autoSync: true,
            transport: {
                load: {
                    url: Endpoints.apiEndpoint() + "/api/v1/projectcalendar/0",
                    // HTTP request parameter used to pass serialized "load"-requests
                    paramName: 'data',
                    // pass few Fetch API options
                    method: 'GET',
                    credentials: 'include',
                    cache: 'no-cache'
                },
                sync: {
                    url: Endpoints.apiEndpoint() + "/api/v1/projectcalendar/0",
                    // specify Content-Type for requests
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    credentials: 'include',
                    // pass few Fetch API options
                    method: 'POST',
                    cache: 'no-cache'
                }
            }
        })
    };

    projectConfig: Partial<ProjectModelConfig> = {
        // Empty project config
    };

    onAfterEventSave($event) {
        console.log("Save");
    }

    onDataChange($event) : void {
        let data = $event as { store : Store; action : String; records : Model[]}
        console.log(`${data.store.id} changed. The action was: ${data.action}. Changed records: `, data.records);
    }

    ngOnInit(): void {
    }
}

Also, I see onAfterEventSave only called once but onDataChange called after every change. Any ideas would be appreciated!


Post by tasnim »

Need to debug, Could you please provide us a runnable test case where can reproduce the issue and debug it?


Post by wrp »

Here you go. It's literally the getting started example with a crud manager.

calendar.zip
(734.2 KiB) Downloaded 48 times

Post by alex.l »

Hi wrp,

I see you specified crudManager in calendarConfig, but I don't see you applied that config to Calendar. The only config used is calendarConfig.date. I also see you specified projectModel with some inline data.
You should use inline data or remote data, not both.

<bryntum-calendar
    #calendar
    [date] = "calendarConfig.date"
    [crudManager] = "calendarConfig.crudManager"
</bryntum-calendar>

All the best,
Alex


Post by wrp »

[crudManager] = "calendarConfig.crudManager"

That was it. Did I miss this in the documentation somewhere? I'm guessing I have to mirror any parameters in calendarConfig in the angular component?

Anyway, thanks for your help!


Post by marcio »

Hey wrp,

Yes, you have to add the parameters from the calendarConfig in the Angular component to make it work. Glad that is working now! :)

Best regards,
Márcio


Post Reply