How do I set the date of a calendar view from another view using Jquery FullCalendar?

Question

I have 2 Jquery fullcalendar controls on my page.

I want to be able to click on a day on the 1st calendar which is in 'month mode', and then set the 2nd calendar which is by default using the AgengaDay view, to the day that has been clicked on the 1st calendar?

I've tried the following:

 $('#firstCalendar').fullCalendar({

            dayClick: function (date, allDay, jsEvent, view) {

                $('#secondcalendary').fullCalendar('select', date, date, allDay);
            }
 });

but it doesn't seem to work

Answer 1

Here you go--- Its not that difficult actually. Click on the Cal1 day and the Cal2 Changes!

http://jsfiddle.net/ppumkin/A56LN/

---

CODE

---

$('#mycalendar1').fullCalendar(
{
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    dayClick: function( date, allDay, jsEvent, view ) {
        dayClicked(date);
    },
    events: [                         
        {
            title  : 'event2',
            start  : '2011-03-10',
            end    : '2011-07-25'
        }
    ]
}); 


$('#mycalendar2').fullCalendar(
            {
             header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                    },

                defaultView: 'agendaDay',

                events: [                         
                        {
                            title  : 'event2',
                            start  : '2011-03-10',
                            end    : '2011-07-25'
                        }
                    ]
           }); 


function dayClicked(date){
    $('#mycalendar2').fullCalendar( 'gotoDate', date );
}

---

Clicking the "TODAY" and other buttons..

I got some code like this. but this is not the solution. because it shows the date before the calendar changes. so basically the old date- maybe you can use a time-out? 500ms? or something - because jquery binds before the fullcalendar...

$('.fc-button-today').click(function() { 
     alert($('#mycalendar2').fullCalendar( 'getDate' ));
   //dayClicked($('#mycalendar2').fullCalendar( 'getDate' ))

        });

You might have to use the viewDisplay event. But it gets a bit complicated in there. Here is a document how to use it.

http://arshaw.com/fullcalendar/docs/display/viewDisplay/

Look at DoomsDay answer- nice solution :D

---

An internal hack for day click and possibly other buttons.

You can open fullcalendar.js and goto line about... 3220 or search for Slot/Day clicking and binding

/* Slot/Day clicking and binding
-----------------------------------------------------------------------*/


function dayBind(cells) {
    cells.click(slotClick)
        .mousedown(daySelectionMousedown);

   //OVER HERE INSERT YOUR CUSTOM CALL!
     setMyOtherCalendar();
}

and in your page somewhere you would havbe a public function of setMyOtherCalendar and it would have this simple code in it.. init mate?

function setMyOtherCalendar(){

  $('#mycalendar2').fullCalendar( 'gotoDate',      $('#mycalendar1').fullCalendar( 'getDate' ) );

};

Answer 2

I agree with ppumkin for dayclick.

BUT it is still possible to alter actions of prev,next,today buttons. I will use this solution for navigating from #mycalendar1 to #mycalendar2:

$("#mycalendar1 .fc-button-prev").click(function() {
  $("#mycalendar2").fullCalendar('prev');
});
$("#mycalendar1 .fc-button-next").click(function() {
  $("#mycalendar2").fullCalendar('next');
});
$("#mycalendar1 .fc-button-today").click(function() {
  $("#mycalendar2").fullCalendar('today');
});

And keeping ppumkin solution for dayClick:

dayClick: function( date, allDay, jsEvent, view ) {
   $('#mycalendar2').fullCalendar( 'gotoDate', date );
},

You should use each keyword if you're using .fullcalendar instead of #mycalendar2 (if you are using more than two calendars).

An example is shown on : http://jsfiddle.net/Doomsday/6P2CR/