FullCalendar all agenda-Views not working

1
votes

i lost a lot of time to search for a solution - but nothing works for me. I have an Angular-1-Webapp and i need to use jQuery FullCalendar. Alle views a working and events are showing up - but in the agenda-views there is no event...

    $('#calendar').fullCalendar({
        //Language
        lang: 'de', 
        //Weekview inital
        defaultView: 'agendaWeek',
        eventSources: [{
            events: [{
                "id" : "789",
                "title"  : 'event1',
                "start"  : "2017-01-11 12:00",
                "end" : "2017-01-11 15:00"
            }]
        }]
    });

HTML:

<div id="calendar"></div>

That's what is checked:

  • Import Order is jquery -> css -> js
  • JQuery working OK
  • allDaySlot true/false - checked - no change
  • allDay true/false in the event - checked - no change

Hope someone as another idea! THX

Here are some images

agendaWeek-View

month-view

2
jqueryangularjsfullcalendar
It is odd that you are using $(document).ready in angular. How familiar are you will angular? – Buh Buh
you're right - it was a try cause i don't know how to solve this error. I removed it in the "working" app. – HolgerT

2 Answers

0
votes

Working Fidlle

Try this way. 

var calendar = $('#calendar').fullCalendar({
  defaultView: 'agendaWeek',
  lang: 'de',
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
  },
  events: [{
    id: '789',
    title: 'Event1',
    start: '2017-01-11 12:00',
    end: '2017-01-11 15:00',
    allDay: false
  }]
});
0
votes

Ok, after hour's of trying i found the problem. FullCalendar needs photon to look as it has to. But in line 2256 in that css is the following entry:

td {
  padding: 2px 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

That problem was found in that post. After changing the line into the following code everything is working:

td {
  padding: 2px 15px;
  white-space: nowrap;
  /* OUT FOR FULL CALENDAR */
  /* overflow: hidden; */
  text-overflow: ellipsis;
}

I'am really confused that fullcalendar needs photon but these two css does not work perfectly together...thx4help!!!