FullCalendar events shown in month view only

18
votes

I am using FullCalendar http://fullcalendar.io/ to display some events on a web page.

The calendar is created like this

$('#calendar').fullCalendar({
        header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
        },
        allDayDefault: false,
        selectable: true,
        selectHelper: true,
        editable: true,
        eventLimit: true, // allow "more" link when too many events
   });

Events are created through the renderEvent operation (not json feed) like

$('#calendar').fullCalendar('renderEvent', newEvent, 'stick');

where the newEvent is created like this

newEvent = {
                title : 'mytitle',
                start : startDate,
                allDay: false,
                id: eventId,
                description: 'my test event'
            };

the problem is that events are correctly shown in month view but are not shown in week or day views.

UPDATE

I am using this date format: 2015-02-01T01:00:00

3
javascriptjqueryfullcalendar
It would be nice if you could provide a jsfiddle that replicates that issue. Thanks! - Luís Cruz
What versions of jQuery and fullcalendar do you use ? how is your startDate defined ? - LeGEC

3 Answers

9
votes

I've create a plunker reproducing your code. The only problem I see in your code is a comma expected in the creation of the event.

So I create the event with a new moment object -which means now.

  var startDate = moment();
  var eventId = 123;
  var newEvent = {
                title : 'mytitle',
                start : startDate,
                allDay: false,
                id: eventId,   //Is this comma that was missing in your code
                description: 'my test event'
            };

And I add it with the same code you are doing:

$('#calendar').fullCalendar('renderEvent', newEvent, 'stick');

As you can check in the plunker everything is working fine, so the only problem the code you provide us could have:

  • The missing comma.
  • The eventId variable is wrong
  • The startDate variable is wrong

In addition, if you take a look at the documentation for render event you are not using the 'stick' variable properly. It should be a boolean. In your code is working because as you can check in line 9229 for version 2.3.1 its compared as expression, so any string (non empty) will be true. You can have more info about this in this answer: https://stackoverflow.com/a/4923684/2686163

So, if you set the third parameter stick as:

  • true
  • 'stick'
  • 'nonstick'
  • 'false'
  • 'whatever'

... always be resolved as sticky, and added to the stickySource. But, as commented by @slicedtoad, you should change it to avoid problems in future versions.

7
votes

There isn't anything wrong with your code. But you are doing some things in a non-standard way. Try fixing them and the problem might disappear.

The method you are using to add events is not the right one. In FullCalendar terminology, render means the process of displaying data to the calendar. So when you renderEvent, you are just telling it to display an event on screen. And then stick makes it persist (kind of).

Instead you should be using addEventSource. It can be used to add any event source (local or remote). And an eventSource can be anything from a JSON feed to a local array of one event.

This should work:

$('#calendar').fullCalendar('addEventSource',[{
    title : 'mytitle',
    start : startDate,
    allDay: false,
    id: eventId,
    description: 'my test event'
}]);

That gives you an event that will last for the whole session. It also has the benefit of playing nicely with all the other fullcalendar options and callbacks.

3
votes

I made fiddle by using your code with some modification from my side. It is working fine. I hope it will work for you. Your inputs are welcomed.

Code

HTML

<body>
    <div id='calendar'></div>
</body>

SCRIPT

<script type='text/javascript'>
$(document).ready(function(){
    fullCalObj = $('#calendar').fullCalendar({
         header: {
             left: 'prev,next today',
             center: 'title',
             right: 'month,agendaWeek,agendaDay'
         },
         allDayDefault: false,
         selectable: true,
         selectHelper: true,
         editable: true,
         eventLimit: true, // allow "more" link when too many events
     });

    var newEvent = {
        title : 'mytitle',
        start : '2015-04-22',
        allDay: false,
        id: 1,
        description: 'my test event'
    };

    fullCalObj.fullCalendar('renderEvent', newEvent, 'stick');
});
</script>