Please share the code you use to instantiate the Calendar so we see your configuration.
Support Forum
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!
Best regards,
Fabio
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.
Best regards,
Fabio