I'm trying to create a calendar like the following with fullcalendar:
but when trying to do it with angular I get this result:
ngOnInit() {
this.calendarOptions = {
editable: true,
eventLimit: false,
timeFormat: 'H:mm',
axisFormat: 'HH:mm',
slotDuration: '24:00',
titleFormat : 'ddd D MMM YYYY',
columnFormat : 'ddd D/YY',
defaultView: 'agendaWeek',
height: "auto",
contentHeight: "auto",
resources: [
{
id: 'a',
fname: 'John',
lname: 'Smith'
},
{
id: 'b',
fname: 'Jerry',
lname: 'Garcia'
}
],
resourceGroupField: 'id',
resourceLabelText: 'Technicians',
groupByResource:true,
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek'
}
};
}<ng-fullcalendar #ucCalendar [options]="calendarOptions"></ng-fullcalendar>