How to make fullcalendar to get current month events only?

Question

I am using fullcalendar plugin to get and display holidays of a month via Ajax. The problem I am having, is that the method that retrieves the holidays accepts only a year and a month as parameter, not a date range.

When using month view of fullcalendar, the start and end parameter ranges from feb 23rd and Apr 6th. I need it to range from Mar 1st to Mar 31st. That way, I can only get year and month part to call the method.

This is what I tried but without success:

    $('#calendar').fullCalendar({
        monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
        monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
        dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
        dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'],
        events: '/get_month_holidays',
        start: {
            month: new Date((new Date()).getFullYear(), (new Date()).getMonth(), 1)
        },
        end: {
            month: (new Date((new Date()).getFullYear(), (new Date()).getMonth() + 1, 1)) - 1
        },            
        buttonText: {
            today: 'hoy'
        }
    })

Any help will be appreciated,

Thanks Jaime

Answer 1

Finally I used:

        eventSources: [
            {
                url: '/get_month_holidays',
                type: 'POST',
                data: function() {
                    var fecha = $('#calendar').fullCalendar('getDate');
                    return {
                        month: fecha.getMonth() + 1,
                        year: fecha.getFullYear()
                    }
                }
            }
        ],

And it worked. Thanks anyway. Jaime

Answer 2

jstuardo's solution adds new parameters to the request so you end up with something like this:

http://your.api.com/events?month=8&year=2015&start=2015-07-27&end=2015-09-07

Which is quite confusing and requires you to change the API accordingly.

Better solution would be to change the default start and end parameters. You can achieve that using something like this:

{
  url: baseUrl + '/events',
  startParam: null, //resetting default fullcalendar parameter
  endParam: null, //resetting default fullcalendar parameter
  data: function() {
    var date = $('#gc-calendar').fullCalendar('getDate')._d;
    var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
    var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);

    firstDay = $filter('date')(firstDay, 'yyyy-MM-dd');
    lastDay = $filter('date')(lastDay, 'yyyy-MM-dd');
    //AngularJS way of changing the date format to yyyy-mm-dd

    return {
      start: firstDay,
      end: lastDay
    }
  }
}

This way your request looks like this:

http://your.api.com/calendar_orders?start=2015-08-01&end=2015-08-31

You can format the date to 'yyy-MM-dd' using any method you like. You can find a bunch of them here: Get String in YYYYMMDD format from JS date object?