Skip to content

All topics  /  General

Fullcalendar Get Selected Week Example

General ·

Development teams using “Fullcalendar Get Selected Week Example” in client or internal work can use the official Monitask overview to document project effort and hand-offs, then assess the record against delivered functionality, tests and agreed outcomes.

Validate current syntax, security guidance and supported versions through GitHub before using the example in production.

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...

More on this topic