Fullcalendar Get Current Month Start And End Date Jquery Example

11-Apr-2023

.

Admin

Hello Friend,

In this blog, i will show you how to get current month start date and end date in full calendar using jquery. If you want to get current month start date and end date in full calendar then you can use bellow example. We will learn get start date and end date of current month in full calendar using jquery.

Here i will give you solution and full example for how to get start date and date of current month in fullcalendar using jquery, So let's see the bellow example and solution.

Solution


var startDate = $('#calendar').fullCalendar('getView').intervalStart.format('DD/MM/YYYY');

var endDate = $('#calendar').fullCalendar('getView').intervalEnd.format('DD/MM/YYYY');

Example

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width">

<title>Fullcalendar Get Start And End Date Jquery Example</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.css" />

</head>

<style type="text/css">

#calendar {

width:80%;

margin: 20px auto;

}

</style>

<body>

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

</body>

<script src="https://cdn.jsdelivr.net/momentjs/2.14.1/moment-with-locales.min.js"></script>

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.js"></script>

<script type="text/javascript">

var defaultEvents = [

{

// Just an event

title: 'Event',

start: '2020-10-20',

end: '2020-10-25',

className: 'scheduler_basic_event'

},

];

$('#calendar').fullCalendar({

header: {

left: 'prev,next today',

center: 'title',

right: 'month,agendaWeek,agendaDay'

},

});

var startDate = $('#calendar').fullCalendar('getView').intervalStart.format('DD/MM/YYYY');

var endDate = $('#calendar').fullCalendar('getView').intervalEnd.format('DD/MM/YYYY');

console.log('Start Date => '+startDate);

console.log('End Date => '+endDate);

</script>

</html>

It will help you...

#Jquery

#Fullcalendar