To avoid overlapping events, I use this function:

    function isOverlapping(event){
    var array = $('#calendar').fullCalendar('clientEvents');
    for(i in array){
      if(array[i].id != event.id){
        if(array[i].allDay || event.allDay){
          if(array[i].start.getDate() == event.start.getDate()){
            if(array[i].start.getMonth() == event.start.getMonth()){
              return true;
            }
          }
        }
        else{
          if(event.end > array[i].start && event.start < array[i].end){ return true;}
        }
      }
    }
      return false;
  }

If my calendar has lots of events, the function is quite slow, so as to increase the speed, i thought it would be nice to pare only the events in the current view, so I wished I could use the clientEvents filter function like this:

    var array = $('#calendar').fullCalendar('clientEvents', function(events){ return (event.start >= view_start && view_end > event.start)});

But this returns all the events.

Note: I have declared view_start & view_end as global variables and calculated them in the ViewDisplay like this:

 view_start = view.visStart;
 view_end = view.visEnd;     

How can I get the events which are visible in the current view.

To avoid overlapping events, I use this function:

    function isOverlapping(event){
    var array = $('#calendar').fullCalendar('clientEvents');
    for(i in array){
      if(array[i].id != event.id){
        if(array[i].allDay || event.allDay){
          if(array[i].start.getDate() == event.start.getDate()){
            if(array[i].start.getMonth() == event.start.getMonth()){
              return true;
            }
          }
        }
        else{
          if(event.end > array[i].start && event.start < array[i].end){ return true;}
        }
      }
    }
      return false;
  }

If my calendar has lots of events, the function is quite slow, so as to increase the speed, i thought it would be nice to pare only the events in the current view, so I wished I could use the clientEvents filter function like this:

    var array = $('#calendar').fullCalendar('clientEvents', function(events){ return (event.start >= view_start && view_end > event.start)});

But this returns all the events.

Note: I have declared view_start & view_end as global variables and calculated them in the ViewDisplay like this:

 view_start = view.visStart;
 view_end = view.visEnd;     

How can I get the events which are visible in the current view.

• javascript
• jquery
• fullcalendar

Share Improve this question Follow asked Dec 20, 2013 at 12:37 ThiruThiru 3,39377 gold badges3737 silver badges5252 bronze badges 4

• You want to show events of specific time range like month to month? Can you show how do you fetch your events? – Henrique C. Commented Dec 21, 2013 at 3:32
• I use a php file to get events form the mysql database and use json_encode to return the json feed. – Thiru Commented Dec 21, 2013 at 4:13
• So you are using JSON to add your events and still it takes to long ? Why don´t you filter server side your events and in you AJAX call pass a parameter that tells the server what type of events you want? – Henrique C. Commented Dec 21, 2013 at 11:04
• Thanks Henrique, I have implemented a server side filter and tha t makes it faster, but it would be better If I could know how to use the fullcalender filters more efficiently. – Thiru Commented Dec 23, 2013 at 5:25

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

The problem with the oneliner you wanted to use is that the event.start is actually an object. I was able to use something similar like this:

moment(calEvent.start).format('YYYY-MM-DD')

So for your case try:

var array = $('#calendar').fullCalendar('clientEvents', function(events){ return (moment(events.start).format('YYYY-MM-DD') >= view_start && view_end > moment(events.start).format('YYYY-MM-DD'))});

There are no built in filter in fullcalendar, you have to make them by yourself. The only thing you can do is to do what you are doing :) ...using your own filter functions.

This is what i do to filter them, but this is made client side, so the filtering will be made client side... This can be a problem, but for my particular solution its enought.

This is my example:

function getCalendarEvents(filter){

        var events = new Array();      
            if(filter == null)
            {
                events = calendar.fullCalendar('clientEvents');
            }
            else
            {
                events = getEventsByFilter(filter);                 
            }           
        return events;                 
    }

The filter events function:

function getEventsByFilter(filter){        
        var allevents = new Array();
        var filterevents = new Array();
        allevents = getCalendarEvents(null);

        for(var j in allevents){ 
            if(allevents[j].eventtype === filter)
            {
                filterevents.push(allevents[j]);
            }
        }           

        return filterevents;
    }

Most functions in fullCalendar use filters.

These filters may be a number and gets filtered by ID or can be functions that return true or false depending on what are you filtering.

var array = $('#calendar').fullCalendar('clientEvents',function(event)
    if(event.start > '1111-11-11')return true;
    else return false;
);