CODEWITHSUNDEEP
javascriptfullcalendar
Alvykun
Alvykun

Reputation: 173

Show days and events only of the current month in the fullcalendar.io

In the 'Month' view of the fullcalendar.io I would like to display the current month only, with the current month events. However, currently what is being showed is a month counting from the current date.

E.g: If today's date was 2016-20-03...
- What fullcalendar display: From: 2016-20-03 To: 2016-19-04
- What I would like to display: From 2016-01-03 To: 2016-31-03

After reading the documentation and looking up around I couldn't find any variable or set up for the fullcalendar to achieve this so I thing that I will have to modify the fullcalendar.js

Has someone already done this?

View

$('#' + engineerId).fullCalendar({
            header: false,
            views: {
                plainMonth: {
                    type: 'basic',
                    duration: { days: 31 },
                    buttonText: 'Month'
                },
                plainWeek: {
                    type: 'basic',
                    duration: { days: 7 },
                    buttonText: 'Week'
                }
            },
            firstDay: 1,
            dayNamesShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
            defaultView: 'plainWeek',
            theme: true,
            viewRender: function (view, element) {
                $('#CalendarViewObject').val(view.name);
                viewName = view.name;
            },
            aspectRatio: ratio,
            editable: true,
            eventLimit: false, // allow "more" link when too many events
            events: {
                startEditable: false,
                durationEditable: false,
                url: window.location.href.toString().split(window.location.host)[1] + '/GetEmployeeEvents',
                type: 'POST',
                data: function () { // a function that returns an object
                    $("[id^=qtip-]").empty();
                    $("[id^=qtip-]").remove();
                    return {
                        serviceAreaId: serviceAreaId,
                        employeeId: engineerId,
                        calendarViewObject: $('#CalendarViewObject').val()
                    };
                },
                error: function () {
                    alert('there was an error while fetching events!');
                }
            },...

Controller

public JsonResult GetEmployeeEvents(DateTime start, DateTime end, string queueName, string employeeId, string calendarViewObject)

The 'start' and 'end' dates are set up by the fullcalendar.io, and those dates are the ones that I would like to change.

Thank you very much in advance, Alvykun

Upvotes: 1

Views: 3131

Answers (1)

Alvykun
Alvykun

Reputation: 173

After some more research in the fullcalendar documentation, I ended up by setting the following:

$(\'.calendarClass\').fullCalendar(\'gotoDate\',new Date(y, m, 1));

This did the trick and works!

Upvotes: 3

Related Questions