Search code examples
javascriptfullcalendarfullcalendar-3

how to alert next month date


I'm using "fullcalendar" plug- https://fullcalendar.io/ in order to display tours on calendar

when user click next/pre button, how do i ALERT the next/pre full date?

for instant, if the calendar show me the current day (2019-06-03) and i click "next" then alert will display 2019-07-01. clicking "pre" will display 2019-05-01

my code:

<div id="calendar"></div>

<script>

          $(document).ready(function() {
            var initialLocaleCode = 'en';

            $('#calendar').fullCalendar({
              header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay,listMonth'
              },

              eventLimit: true, 
              editable: false,

              events: [

                {
                    title: 'tour 1',
                    start: '2019-05-05',
                    end:  '2019-05-11',
                    className: 'bg-warning'
                },{
                    title: 'title for tour num 2',
                    start: '2019-05-19',
                    end:  '2019-05-25',
                    className: 'bg-purple'
                },{
                    title: '3td tour title',
                    start: '2019-05-16',
                    end:  '2019-05-21',
                    className: 'bg-info'
                }   
              ]
            });


          });

</script>

Solution

  • I'm not sure why you'd need to do this, since the new date will already be displayed at the top of your calendar.

    However, putting that aside, one way to achieve it is to handle the viewRender event. This will occur anytime either the date range or the type of view is changed on the calendar, and fires just before the new view is actually displayed on the screen. As per the documentation, the view object supplied in the callback contains the the start and end dates which are about to be displayed.

    You could write something like this:

    viewRender: function( view, element )
    {
      alert(view.start.format("YYYY-MM-DD"));
    }
    

    Here's a working demonstration: http://jsfiddle.net/8bxqzfev/