In this tutorial, We will learn how to get selected week using jquery in the fullcalendar. We will talk about get selected week in the full calendar. This tutorial will give you a full calendar to get selected week using jquery 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>


Thanks, May this example will help you...