Re: [ANGULAR] - Edit Calendar Field
Please share the code you use to instantiate the Calendar so we see your configuration.
Please share the code you use to instantiate the Calendar so we see your configuration.
Image attached.
Please post code, in CODE tags - not images. Ideally you provide us a runnable zip file so we can run this locally.
agenda.component.html
<div class="agenda-day">
<bry-calendar #calendar style="height: 610px !important;" *ngIf="flag == true" [date]='calendarDateStart'
[modes]="calendarConfig.modes" [resources]='resources' [events]='events' [sidebar]='calendarConfig.sidebar'
[tbar]='calendarConfig.tbar' (onCalendarEvents)='onCalendarEvents($event)' [eventEditFeature]='calendarConfig.features.eventEdit'>
</bry-calendar>
</div>
calendar.config-ts
import * as moment from 'moment';
export const calendarConfig = {
// CrudManager arranges loading and syncing of data in JSON form from/to a web service
crudManager: {
autoLoad: true,
transport: {
load: {
url: 'assets/data/data.json'
}
}
},
date: new Date(Number(moment())),
tbar: null,
// This element becomes the Calendar's encapsulating element
adopt: 'container',
minHeight: '20em',
eventColor: null,
sidebar: false,
// Features named by the properties are included.
// An object is used to configure the feature.
features: {
eventEdit: {
items: {
eventTypeField: {
index: 1,
type: 'combo',
name: 'eventType',
ref: 'eventTypeField',
label: 'Agendamento',
items: ['Pessoal', 'Consulta']
}
}
}
},
// Modes are the views available in the Calendar.
// An object is used to configure the view.
modes: {
year: false,
month: false,
week: false,
agenda: false,
day: {
dayStartTime: 7,
dayEndTime: 20,
allDayEvents: {
eventRenderer({ eventRecord }) {
return `
<div style="color: white; background-color: #1e88e5; display: flex; justify-content: space-between; height: 22px; width: 100%; padding: 0 5px;
border-top-left-radius: 11px; border-bottom-left-radius: 11px; border-top-right-radius: 4px; border-bottom-right-radius: 4px;">
<div style="display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center;">
<div style="font-size: 10px">${eventRecord.name}</div>
</div>
</div>`;
}
},
eventRenderer({ eventRecord }) {
if (moment.duration(moment(eventRecord.endDate).diff(eventRecord.startDate)).asMinutes() >= 30) {
return `<div style="display: flex; justify-content: space-between; color: black; background-color: transparent; width: 100%; height: 100%; padding: 3px 10px 7px">
<div style="display: flex; flex-wrap: wrap; flex-direction: column; justify-content: space-between;">
<div style="font-weight: bold">${eventRecord.name}</div>
<div style="color: #818181; font-size: 12px; font-weight: 400">${eventRecord.category}</div>
</div>
<div style="display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center;">
<span style="padding: 2px 10px; background-color: #a8a7a7; color: white; border-radius: 11px; font-weight: 400; font-size: 13px;">${eventRecord.organizationName}</span>
</div>
</div>`;
} else {
return `<div style="display: flex; justify-content: space-between; color: black; background-color: transparent; width: 100%; height: 100%; padding: 0px 10px">
<div style="display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center;">
<div style="font-weight: bold; font-size: 10px">${eventRecord.name}</div>
</div>
</div>`;
}
}
}
},
readOnly: false
};
Hi Gabriela,
You can see the json posted by Pavel here: viewtopic.php?p=78080#p78080
There are resources array data, those will be your calendars available.
Please post your json data (assets/data/data.json
) then we can try to run a test case.
Thank you!
I was litterally trying to test what Pavel send me, to see if shows up on the calendar option:
{
"success" : true,
"resources" : {
"rows" : [
{
"id" : "bryntum",
"name" : "Bryntum team",
"eventColor" : "blue"
},
{
"id" : "hotel",
"name" : "Hotel Park",
"eventColor" : "orange"
},
{
"id" : "michael",
"name" : "Michael Johnson",
"eventColor" : "deep-orange"
}
]
}
}
Gabriela, I was unable to run your test case, there are some dependencies variables missing that is about your logic, I had errors when tried to run. I tried to change the filtering example but there are some errors on console.
I would suggest you take a look on filtering demo and put your changes there.
But looking to your code I can realise that you are defining [resources]='resources'
that will override your agendas from json file. Also you are not defining your crudManager like [crudManager] = "calendarConfig.crudManager"
to calendar understand from where to bring the data.
Please take a look on that demo that there are very important informations.
Anything else, please let us know.
My problem was really the [crudManager]. Thanks for all your help!