CODEWITHSUNDEEP
jqueryangularjsfullcalendar
HolgerT
HolgerT

Reputation: 62

FullCalendar all agenda-Views not working

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:

Hope someone as another idea! THX

Here are some images

agendaWeek-View

month-view

Upvotes: 1

Views: 4356

Answers (2)

HolgerT
HolgerT

Reputation: 62

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!!!

Upvotes: 0

4b0
4b0

Reputation: 22323

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
  }]
});

Upvotes: 0

Related Questions