Clickable day numbers/headers for easier navigation (for fullcalendar.js).

...here's a patched 1.5.2 version of fullcalendar.js that includes the headerClick extension (drupal.org renames the file to _.txt, so remove that). I'm also attaching a .diff and a full .zip

I don't know if there's something that needs to be done on the drupal module part though.

There have been some updates to the bug filed over at http://code.google.com/p/fullcalendar/issues/detail?id=153 Once again: I don't claim any recognition - credits go to the original posters of the solutions at the issue linked previously...

Here is one another and much simpler. If you are working with FullCalendar v1.5.3

just add following:

dayClick: function(date, allDay, jsEvent, view) {
    if(view.name != 'month')
    return;

    $('#calendar').fullCalendar('changeView', 'agendaDay')
    .fullCalendar('gotoDate', date);
  },

in $('#calendar').fullCalendar({ this section

Also for changing mouse pointer when you hover day, add cursor: pointer in

.fc-widget-content {
	border: 1px solid #ccc;
	}

Thats all you need to do.

Hello,

I solved this way, no need to hack into fullcalendar's code:

First define a convenient columnFormat for week's view, so you can read the date (day) to navigate to from it, in my case (for catalan locale):

columnFormat: {
            month: 'ddd',
            week: 'dddd dd/MM/yyyy',
            day: 'dddd dd/MM/yyyy'
        }

Next hook into viewDisplay and add something like:

viewDisplay: function(view) {
            // Add onclick to header columns of weekView to navigate to clicked day on dayView
            $jq('table.fc-agenda-days thead th').each(function(){
                if($jq(this).html() != " "){
                    $jq(this).css('cursor','pointer'); // set cursor
                    $jq(this).unbind('click'); //unbind previously bound 'click'
                    $jq(this).click(function(){
                        var dateStr = $jq(this).html().substring($jq(this).html().indexOf(' ')+1);
                        var day = dateStr.substring(0, 2);
                        var month = dateStr.substring(3, 5) - 1;
                        var year = dateStr.substring(6, 10);
                        $jq('#calendar').fullCalendar('gotoDate', new Date(year, month, day));
                        $jq('#calendar').fullCalendar('changeView', 'agendaDay');
                    });
                }
            });
        }

And you are done !

...while you go tying out these proposed solutions, please keep in mind that fullcalendar.js 1.7.2 seems to have known issues with the latest jQuery 1.8.0: http://code.google.com/p/fullcalendar/issues/detail?id=1499

Just a heads-up ;)

Update from the issue again (as always, I claim no credits):

I rewrote a bit #29 solution in order to be compatible with fullCalendar 1.6.

Very easy implementation, no need to hack fullCalendar.js :

    columnFormat : {
        week: "'<div data-date=\'yyyy-MM-dd\'>'ddd dd/MM'</div>'" // add a data-date attribute to the day header in week view
    },
    viewDisplay: function(view) {
        if (view.name == 'month') {
            // a click on the day number should switch the calendar to week view
            var $headers = $('.fc-day-number');
            $headers.each(function() {
                var date = $(this).parent().parent().attr('data-date');
                $(this).attr(
                    'onmousedown',
                    '$(\'#agenda\').fullCalendar(\'changeView\', \'agendaWeek\').fullCalendar(\'gotoDate\', new Date(\''+ date +'\'))'
                );
            });
            $headers.css({'cursor':'pointer', 'width':'100%', 'text-align':'right', 'border-bottom':'1px dotted #ddd'} );
        }

        if (view.name == 'agendaWeek') {
            // a click on the day number should switch the calendar to day view
            var $headers = $('.fc-widget-header[class*=fc-col]');
            $headers.click(function() {
                var date = new Date($(this).children().first().attr('data-date'));
                $('#agenda').fullCalendar('changeView', 'agendaDay').fullCalendar('gotoDate', date);
            });
            $headers.css({'cursor':'pointer'});
        }

That's all, thanks to all posters for your ideas !