04-Nov-2020
.
Admin
Hi Guys,
In this article, I would like to share with you how to get selected week using jquery in fullcalendar. We will talk about get get selected week in fullcalendar. This tutorial will give you fullcalendar get selected week using jquery example.
Here i will give you full example for jquery - fullcalendar get date from selected week So let's see the bellow example :
Example
<!DOCTYPE html>
<html>
<head>
<title>Fullcalendar Get Selected Week Using Jquery Example</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.print.css" rel="stylesheet" media="print"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 mt-5 mb-5">
<div id="calendar"></div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
// page is now ready, initialize the calendar...
var calendar = $("#calendar").fullCalendar({
// put your options and callbacks here
header: {
right: "today prev,next",
},
height:550,
events: "/json-events.php",
selectHelper: true,
dayClick: function(start, allDay, jsEvent, view) {
$(this).parent().siblings().removeClass("week-highlight");
$(this).parent().addClass("week-highlight");
if(start < date && start.getDate() != date.getDate())
{
alert("Cannot select past dates.");
$(this).parent().removeClass("week-highlight");
return;
}
var title = confirm("Selecte Week");
var now = date? new Date(start-1) : new Date();
now.setHours(0,0,0,0);
var sunday = new Date(now);
sunday.setDate(sunday.getDate() - sunday.getDay() + 1);
var saturday = new Date(now);
saturday.setDate(saturday.getDate() - saturday.getDay() + 7);
if (title) {
calendar.fullCalendar("renderEvent",
{
title: "Selected This Week.",
start: sunday,
end: saturday,
allDay: allDay
},
true // make the event "stick"
);
}
$(this).parent().removeClass("week-highlight");
}
});
});
</script>
</body>
</html>
I hope it will help you...
#Fullcalendar
#Jquery
