Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

FullCalendar events shown in month view only

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

like image 429
lowcoupling Avatar asked Apr 11 '15 08:04

lowcoupling


People also ask

What is full calendar month?

Full calendar month means the period which begins at midnight on the last day of the previous month and ends at midnight on the last day of the month under consideration.

How do I change the view in fullCalendar?

If you are using Custom View, you can change the visibleRange in the same way: calendar. changeView('timeGrid', { start: '2017-06-01', end: '2017-06-05' }); This date/visibleRange parameter was added in version 3.3.

How do I set events in fullCalendar?

Here is an example of how to specify an array of events: var calendar = new Calendar(calendarEl, { events: [ { title : 'event1', start : '2010-01-01' }, { title : 'event2', start : '2010-01-05', end : '2010-01-07' }, { title : 'event3', start : '2010-01-09T12:30:00', allDay : false // will make the time show } ] });

How do I turn off weekends in fullCalendar?

Just go from the startDate to the endDate and check if any of those days are weekends. If so, display the alert / popup and return false. select: (start, end, allDay) => { var startDate = moment(start), endDate = moment(end), date = startDate.


2 Answers

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.

like image 131
Mario Levrero Avatar answered Oct 16 '22 16:10

Mario Levrero


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.

like image 7
DanielST Avatar answered Oct 16 '22 15:10

DanielST