Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jquery full calendar

What i have is a tabbed page with 12 tabs (every tab is a month of the year). What i need is when i load jquery calendar, foreach tab, the calendar to switch to the month that is assigned. (e.g when i click and load page for January the calendar shows days for january, and so on).

like image 651
madrat Avatar asked Mar 22 '26 03:03

madrat


2 Answers

demo: http://so.lucafilosofi.com/jquery-full-calendar

JS:

        $(function() {
            // build months anchors list
            monthsList('#months-list');

            // inizialize calendar
            $('#calendar').fullCalendar({});

            $(document).on('click', '#months-list a', function() {
                // get month from month anchor hash
                var month = this.hash.substring(1);
                // go to new month
                $('#calendar').fullCalendar('gotoDate', goToMonth(month));
                return false;
            });

            function goToMonth(month) {
                var date = new Date();
                var d = date.getDate();
                var m = month !== undefined ? parseInt(month, 0) : date.getMonth();
                var y = date.getFullYear();
                return new Date(y, m, d);
            }

            function monthsList(element) {
                var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
                for (var m = 0; m < monthNames.length; m++) {
                    $(element).append('<li><a href="#' + m + '">' + monthNames[m] + '</a></li>');
                }
            }

        });

HTML:

    <ul id="months-list"></ul>
    <div id='calendar'></div>
like image 58
Luca Filosofi Avatar answered Mar 24 '26 15:03

Luca Filosofi


Did you check out the documentation page? The function takes in 2 required parameters and 2 optional ones.

.fullCalendar( 'gotoDate', year [, month, [ date  ]] )

So to set your calendar to April 2010, you would use something like this:

.fullCalendar( 'gotoDate', 2010, 5)

Note that the months are 0-based so April=3.

like image 22
Peter Jacoby Avatar answered Mar 24 '26 16:03

Peter Jacoby



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!