javascript – How to get selected month in jQuery full calendar?-ThrowExceptions

Exception or error:

We are using jQuery full calendar for displaying events from database.

I need to display the events below the calendar according to user selected month onchange.
I can get data according to event date but I can’t get user selected month in jQuery calendar.

$('#calendar').fullCalendar({
    theme: true,
    header: {

        left: 'today',
        center: 'prevYear,prev,title, next,nextYear',
        right: ' month,agendaWeek,agendaDay'
    },
    buttonText: {
        prevYear: 'Prev'
    },
    editable: false,
    events: [
    <?php foreach ($edumeet_invite_det as $key =>  $edumeet_det): ?> 
    <?php $edumeet_start = $edumeet_det->getFromDate(); ?>
    <?php $edumeet_end = $edumeet_det->getToDate(); ?>
    <?php $title = $edumeet_det->getTitle(); ?> 
        {
            title:'<?php echo $title; ?>',
            start:'<?php echo $edumeet_start ?>',
            end:'<?php echo $edumeet_end ?>',
            allDay: false
        },
    <?php endforeach; ?>
        ],

    eventColor: '#378006',    
});

This is the calendar function I am using, I need to get user selected month onchange. Does anyone have solution for this problem?

How to solve:

Maybe I don’t fully understand your quesiton, but it sounds like you just need to know the current month on screen?

FullCalendar has a “getDate” method.

function getMonth(){
  var date = $("#calendar").fullCalendar('getDate');
  var month_int = date.getMonth();
  //you now have the visible month as an integer from 0-11
}

Sorry if this isn’t what you were asking.

Answer:

The function “getView” which might be useful to you:

To get the first day of calendar month:

$(cal).fullCalendar('getView').start

To get the last day of calendar month:

$(cal).fullCalendar('getView').end

To get the first visible day of calendar: (the last few days of previous month)

$(cal).fullCalendar('getView').visStart

To get the last visible day of calendar: (the first few days of next month)

$(cal).fullCalendar('getView').visEnd

Answer:

With last version (2018) need to use this code!

jQuery("#your_selector").fullCalendar('getDate').month()

Answer:

There are ways to get the date and below is one where you can do it when you initialize the calendar , Using that you can get the date , month and year separately.

 $('#calendar').fullCalendar({

    dayClick: function(date, jsEvent, view) { 
        alert('Clicked on: ' + date.getDate()+"/"+date.getMonth()+"/"+date.getFullYear());  
    },

});

Answer:

Full Calendar Version – 4

<script type="text/javascript">

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        ...
        ...
    });

    calendar.render();

    var cdate = calendar.getDate();
    var month_int = cdate.getMonth();
    alert((month_int+1));  // March 2020 month will return 3

});

</script>

This solution worked for me. Happy to help you. Thanks for asking this question.

Leave a Reply

Your email address will not be published. Required fields are marked *