Our powerful JS Calendar component


Post by codevlabs »

Dear Support,

Can you assist with the following issue. The error only occurs when i create an event on "Example Calendar3" (1st one in array). There is no error when i create an event with "Example Calendar2". thanks.

import { Component, ViewChild } from '@angular/core';
import { BryntumCalendarComponent, BryntumCalendarProjectModelComponent } from '@bryntum/calendar-angular';
import { calendarConfig, projectConfig } from './app.config';
import { OnInit } from '@angular/core';
import { Calendar } from '@bryntum/calendar';
import { HttpErrorResponse } from '@angular/common/http';
import { DataService } from '../../shared/services/data.service';
import { AuthenticationService } from 'src/app/shared/services/authentication.service';

@Component({
  selector: 'app-event-calendar',
  templateUrl: './event-calendar.component.html',
  styleUrls: ['./event-calendar.component.scss']
})
export class EventCalendarComponent implements OnInit {

public resources = [
{
	id         : 200,
	name       : "Example Calendar2",
	eventColor : 'blue'
},
{
	id         : 300,
	name       : "Example Calendar3",
	eventColor : 'blue'
}];


public events = [
{
	id         : 1,
	name       : 'Example Event',
	startDate  : '2023-12-07T05:00:00',
	endDate    : '2023-12-07T19:00:00',
	resourceId : 200,
	cupID	 : 1
},
{
	id         : 2,
	name       : 'Example Event2',
	startDate  : '2023-12-08T05:00:00',
	endDate    : '2023-12-08T19:00:00',
	resourceId : 300,
	cupID	 : 1
}
];

private calendar : Calendar;

calendarConfig = calendarConfig;
projectConfig = projectConfig;

@ViewChild('calendar') calendarComponent!: BryntumCalendarComponent;
@ViewChild('project') projectComponent!: BryntumCalendarProjectModelComponent;

constructor(private _dataService:DataService, private authService:AuthenticationService){
}

ngAfterViewInit(): void {
	// store Bryntum Calendar isntance
	this.calendar = this.calendarComponent.instance;

	this.calendar.resources = this.resources;
	this.calendar.events = this.events;   
	this.calendar.refresh(); // tried this also    
 }

syncData($event){
	//console.log($event);
	if ($event.action == 'update' && $event.record.data){
		
		//console.log("________");
		console.log($event.record.data);
		//console.log($event.changes);

		console.log($event.record.data.resourceId);


		if ($event.record.data.cupID){
			console.log("____ UPDATE ____");
		}
		else
		{
			console.log("____ NEW ____");
		}
	}
	
}

ngOnInit() 
{
    	
}


}

Post by codevlabs »

This is the HTML

<bryntum-calendar-project-model
		#project
		[events] = "events"
		[resources] = "resources">
	</bryntum-calendar-project-model>
	
<bryntum-calendar
	(onDataChange) = "syncData($event)"
	#calendar
	[date] = "calendarConfig.date!"
	[project] = "project">
</bryntum-calendar>

Post by tasnim »

Hi,

Could you please upload a runnable app here so we can run it locally and debug it?
The code you provided is not runnable, getting errors while running


Post Reply