My favorites | Sign in
Project Home Issues
New issue   Search
for
  Advanced search   Search tips   Subscriptions
Issue 153: Clickable day numbers/headers for easier navigation
41 people starred this issue and may be notified of changes. Back to list
Status:  ExportedToGithub
Owner:  ----
Closed:  Aug 2015


Sign in to add a comment
 
Reported by renzo.la...@gmail.com, Oct 29, 2009
I have some ideas on how to improve the navigation possibilities between
the different views. As I am not too much of a JS coder, maybe you might
consider coding them:

- weekView: Make headers with names of days clickable to switch to this
day's view.
- monthView: Add a new column with the week numbers to the left and make
those clickable to switch to this week's view.
- In addition to the arrows to go to the next and previous
year/month/week/day a select box might be helpful. In the month view it
would contain the past X and next Y months to choose from. The same for
weeks with the previous X and next Y weeks.
Nov 10, 2009
Project Member #1 adamrs...@gmail.com
these are all good ideas. can't promise i will get to any of them soon, but i do plan
on making a add-on system for 3rd party developers to easily do these sorts of
things. will keep this thread updated.
Nov 26, 2009
Project Member #2 adamrs...@gmail.com
add-on or not, this seems very necessary, upgrading to accepted, but don't know which
release it will fall into. thanks
Status: Accepted
Labels: -Type-Defect -Priority-Medium Type-Enhancement
Jan 19, 2010
Project Member #3 adamrs...@gmail.com
 Issue 283  has been merged into this issue.
Mar 15, 2010
Project Member #4 adamrs...@gmail.com
 Issue 403  has been merged into this issue.
Mar 15, 2010
#5 robtay...@gmail.com
My Dup'd issue (403), was to change monthview where you can click on the day number,
and it opens up the agendaDay view for that specific day ...

Here is the code I changed/added to make it happen, in case anyone else wants to add it.

On my calendar page, I used the following:

function moveToDay(date){
	var toDate = new Date(date);
	//alert(toDate);
	$('#calendar').fullCalendar( 'changeView', 'agendaDay' );
	$('#calendar').fullCalendar( 'gotoDate', toDate );
}

In fullcalendar.js, I modified the following:

<div class='fc-day-number'>"+aO.getDate()+"</div>

with:

<div class='fc-day-number'><a href='#' onClick='moveToDay(\""+aO+"\");return
false'>"+aO.getDate()+"</a></div>

And the added these new css entries for link color:

.fc-grid .fc-day-number a{
	color:#000;
	}
	
.fc-grid .fc-day-number a:hover{
	color:#F60;
	}


This seems to work really well in this format.  As I figured, pretty simple code
changes, but really helpful for usable navigation.

Apr 22, 2010
#6 genell...@gmail.com
hi guys

great job !!!

i was watching this solucion that robtaylor posted, but i got a problem, when i click 
on the link of any day and i come back to month, numbers does not have links, also 
when i click on today, or prev or next and i come back to month i can have links, i 
solved this problem when i go to weeks and days a few lines below, adding the same 
logic, but i can't find a solution, could you help me please...

thanks in advance.
Jun 16, 2010
Project Member #7 adamrs...@gmail.com
i'm making this issue about easier navigation via click on day names/numbers, but renzo, here is a new issue addressing the selectable box for easier month-to-month navigation: https://code.google.com/p/fullcalendar/issues/detail?id=514 (please star it)
Summary: Clickable day-numbers for easier navigation
Jun 28, 2010
#8 doug.bro...@gmail.com
@genellern you need to edit another part of the code:

Find this:
td.find('div.fc-day-number').text(d.getDate());

Change to this:
td.find('div.fc-day-number').html("<a href='#' onClick='moveToDay(\"" + d + "\");return false'>" + d.getDate() + "</a>");

Oct 7, 2010
Project Member #9 adamrs...@gmail.com
 Issue 577  has been merged into this issue.
Oct 7, 2010
Project Member #10 adamrs...@gmail.com
(No comment was entered for this change.)
Summary: Clickable day numbers/headers for easier navigation
Nov 21, 2010
Project Member #11 adamrs...@gmail.com
 Issue 695  has been merged into this issue.
Jan 21, 2011
#12 rfauc...@gmail.com
I would opt for a more generic approach, and provide a 'headerClick' event, just like the 'dayClick' event which passes the day along to the callback. This way it is possible to add your custom functionality to the header click.

I altered the javascript to support this:
on line 1397:

                s = "<thead><tr>";
                for (i = 0; i < colCnt; i++) {
                    s += "<th class='fc-" +
					dayIDs[d.getDay()] + ' ' + // needs to be first
					tm + '-state-default fc-header-day' + i +
					(i == dit ? ' fc-leftmost' : '') +
					"'>" + formatDate(d, colFormat) + "</th>";
                    addDays(d, 1);
                    if (nwe) {
                        skipWeekend(d);
                    }
                }
                thead = $(s + "</tr></thead>").appendTo(table);
                headerBind(thead.find('th'));

and then use the infrastructure already in place to throw the event:
on line 1586:

        function headerBind(days) {
            days.click(headerClick)
			.mousedown(daySelectionMousedown);
        }

        function headerClick(ev) {
            if (!opt('selectable')) { // SelectionManager will worry about dayClick
                var n = parseInt(this.className.match(/fc\-header\-day(\d+)/)[1]),
				date = addDays(
					cloneDate(t.visStart),
					Math.floor(n / colCnt) * 7 + n % colCnt
				);
                trigger('headerClick', this, date, ev);
            }
        }

and it's usable like so:

$('#calendar').fullCalendar({
    headerClick: function (date, jsEvent, view) {
        alert(date);
    }
});

I also added another line for styling the headers on mouseover:
$("th[class^=fc-]").css("cursor", "pointer"); /*not supported by IE6 */

Hope this will help people who also need this functionality! 






Feb 12, 2011
#13 walkings...@gmail.com
Has this feature been implemented yet in the official release? Implementing the fullCalendar myself now and would be a useful functionality.
Feb 13, 2011
#15 jag.cha...@gmail.com
Firstly, thanks for FullCalender. I've started using it recently and it has saved (and will continue to save) me a ton of time and provided an excellent example of modular code.

As it happens, I also need the header/dayNumber clickability features that so many others are requesting. I ended up adding the functionality with some code that I think can be implemented into the next official release.

---------------------------

Let's start with the "headerClick" functionality. My code changes are nearly identical to those in comment #12, but with the following minor differences.

1) The headerBind/headerClick functions appear in the BasicView as well as the AgendaView sections of code. Note that in the BasicView call of headerBind, the th's need to be retrieved from thead (as opposed to tbody in the case of AgendaView).

2) I've used the prefix 'heading' instead of 'header' to avoid confusion with the actual 'header' in FullCalendar. I'm interested to know if you think this is more or less confusing.

3) I'm wondering if it's worth adding an additional class name to th cells that actually contain a heading. The reason is that there is a (minor) bug where you can click the unnamed headings in agendaWeek view.

---------------------------

I've also implemented dayNumberClick with the following code changes (line references are all based on v1.4.10 with no insertions for headerClick, etc.):

1) line 85 - defaults {}

Commented out for the same reason selectable is commented out

	//dayNumberClickable: false,


2) line 130 - dayClick(ev) from BasicView

Note that there has been some rearranging of the method so I didn't have to repeat the code for calculating the date. This overrides dayClick if the dayNumber was clicked when 'selectable' is false.

    function dayClick(ev)
    {
      var dayNumberClicked = opt('dayNumberClickable') && ev.originalTarget.hasClassName('fc-day-number');
      var selectable = opt('selectable');
      
      if (dayNumberClicked || !selectable)
      {
        var n = parseInt(this.className.match(/fc\-day(\d+)/)[1]),
				date = addDays(
					cloneDate(t.visStart),
					Math.floor(n / colCnt) * 7 + n % colCnt
				);
        if (dayNumberClicked)
        {
          trigger('dayNumberClick', this, date, ev);
        }
        else
        {
          // TODO: what about weekends in middle of week?
          trigger('dayClick', this, date, true, ev);
        }
      }
    }

3) line 3980 = daySelectionMousedown()

This bit is to override the 'select' function when the day number is clicked when 'selectable' is true. Wrap the block of code contained within the IF statement on l.3980 with the following 2nd IF statement below:

    if (ev.which == 1 && opt('selectable')) { //original IF statement
        if (!opt('dayNumberClickable') || !ev.originalTarget.hasClassName('fc-day-number')) { //new IF statement
	        ...
                a bunch of code
		...
	}
    }

---------------------------

Finally, here is example usage for dayNumberClick (the usage for headingClick is the same as comment #12):

    $('#calendar').fullCalendar({

	dayNumberClickable: true,

        dayNumberClick: function(date, jsEvent, view)
        {
          if (view.name == 'month')
          {
            jQuery(calendarDiv).fullCalendar('gotoDate', date);
            jQuery(calendarDiv).fullCalendar('changeView', 'agendaDay');
          }
        }

    }

---------------------------

I hope this helps those that need it, and that it will be useful for the next official release. I'm interested to know your thoughts on the questions about headingClick and if anyone finds any issues or has any comments regarding dayNumberClick. Thanks!

-Jag

May 12, 2011
#16 klo...@gmail.com
How about having the previous/next arrow buttons in the calendar header while in default month view moved from:

[<] [>] [today]      Month Year      [month] [week] [day]

like this instead:

[today]      [<<] [<]   Month Year   [>] [>>]     [month] [week] [day]

This way double arrows would move up/down the years and the single ones would move up/down the months. For those that like the drop-down idea implemented as well, the mockup would look something like so:

[today]      [<<] [<]   [Month |v] [Year |v]   [>] [>>]     [month] [week] [day]

Thanx for considering ;)
Jun 8, 2011
#17 anssi.ra...@gmail.com
Any news on this headerClick event what would bind to the day number in month view and weekday name in week view?
Aug 21, 2011
Project Member #18 adamrs...@gmail.com
 Issue 1050  has been merged into this issue.
Jan 18, 2012
#19 ramalam...@gmail.com
Hi, I have adapted comment #12 to work with FullCalendar 1.5.2. Here's my contribution:

fullcalendar.js (~3140)

slotBind(slotTable.find('td'));
// new header bind
headerBind(dayHeadCells);


Line ~3270

        function slotBind(cells) {
		cells.click(slotClick)
			.mousedown(slotSelectionMousedown);
	}
	
	
	function headerBind(days) {
               days.click(headerClick)
		   .mousedown(daySelectionMousedown);
        }

         function headerClick(ev) {
        if (!opt('selectable')) { // SelectionManager will worry about dayClick
        	var col = Math.min(colCnt-1, Math.floor((ev.pageX - dayTable.offset().left - axisWidth) / colWidth));
			var date = colDate(col);
			var rowMatch = this.parentNode.className.match(/fc-slot(\d+)/); // TODO: maybe use data
			if (rowMatch) {
				var mins = parseInt(rowMatch[1]) * opt('slotMinutes');
				var hours = Math.floor(mins/60);
				date.setHours(hours);
				date.setMinutes(mins%60 + minMinute);
				trigger('headerClick', dayHeadCells[col], date, false, ev);
			}else{
				trigger('headerClick', dayHeadCells[col], date, true, ev);
			}
      
        }
    }



And finaly, in your fullCalendar init code you should define the headerClick callback:

 headerClick: function (date, jsEvent, view) {
  
           // somehow the function 'view' argument has an empty value for "view.name"
    	   // so I get the view Object from the Calendar before use it.
           var view = $('.fullcalendar').fullCalendar('getView');


           if (view.name == 'agendaWeek')
           {
             $(".fullcalendar").fullCalendar('gotoDate', date);
             $(".fullcalendar").fullCalendar('changeView', 'agendaDay');
           }

       },


That's all. Hope it helps

Jan 18, 2012
#20 klo...@gmail.com
Can somebody please upload a patched, working version of 1.5.2? Thanx in advance.
Jan 20, 2012
#21 ifj.miko...@gmail.com
Hi all, first I'd want to thank for the solution, and here is the file patched with solution in #19 (and the diff).

Fullcalendar 1.5.2 with the headerClick extension:
http://mikoandras.hu/projects/fullcalendar/fullcalendar_1.5.2_whc.js

Diff between original 1.5.2 and patched one:
http://mikoandras.hu/projects/fullcalendar/fullcalendar_with_headerClick.diff

-kms
Feb 6, 2012
#22 twinz...@gmail.com
...is this being considered for inclusion in the next release?
Mar 17, 2012
#23 adi.shou...@gmail.com
@jag.cha...@gmail.com || Comment#15
ev.originalTarget is undefined for me. Can anyone please help ?

I am working on FullCalendar 1.5 
Jun 24, 2012
#24 tushardh...@gmail.com
Hi all,
Thanks for all solutions
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 changeing mouse pointer when you hover day
add 
cursor: pointer
in 
.fc-widget-content {
	border: 1px solid #ccc;
	}

Thats all you need to do.
Jun 25, 2012
#25 mik...@gmail.com
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() != "&nbsp;"){
                    $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 !
Nov 19, 2012
#28 couponso...@gmail.com
It would be helpful if we can add Month and the year dropdown in the header to enable quick jumping to the desired date.
I need to add that to my calendar to give an additional functionality to jump to different month views along with one month right and left of header.

I am using fullcalendar 1.5.4
Feb 1, 2013
#29 bboo...@gmail.com
This appears to be the easiest way, just setup the dayClick option with something like this:


dayClick: function(date, allDay, jsEvent, view) {
    if( jsEvent.target.className == "fc-day-number") {
        $( "#calendar" ).fullCalendar( "gotoDate" , date).fullCalendar("changeView", "agendaDay");
    }
}

Also to make the column headers in week mode goto the days you can use the columnFormat and do something like this:

columnFormat: {
    week: "'<a class=''ui-button'' onClick=''$(\"#calendar\").fullCalendar(\"changeView\",\"agendaDay\").fullCalendar(\"gotoDate\",'yyyy','M'-1,'d'); ''>'ddd'</a>'"
}



Jul 18, 2013
#30 sga...@gmail.com
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 !

Aug 13, 2013
Project Member #31 adamrs...@gmail.com
(No comment was entered for this change.)
Labels: -Type-Enhancement Type-Feature
Aug 14, 2013
Project Member #32 adamrs...@gmail.com
 Issue 1198  has been merged into this issue.
Aug 18, 2013
Project Member #33 adamrs...@gmail.com
 Issue 1462  has been merged into this issue.
Jun 5, 2014
Project Member #34 adamrs...@gmail.com
@marandus has implemented part of this in a pull request:
https://github.com/arshaw/fullcalendar/pull/109

it implements callbacks but does not actually take care of the navigation to the new view.

i have not tested nor determined the compatibility with v2, but it is probably worth checking out.
Aug 14, 2014
Project Member #35 adamrs...@gmail.com
 Issue 2229  has been merged into this issue.
Aug 14, 2014
Project Member #36 adamrs...@gmail.com
 Issue 2230  has been merged into this issue.
Aug 14, 2014
Project Member #37 adamrs...@gmail.com
 Issue 2230  brings up a good point: week #s should be clickable too
Aug 14, 2014
Project Member #38 adamrs...@gmail.com
 Issue 2231  has been merged into this issue.
Nov 21, 2014
#39 harryshepard@gmail.com
You responded to this as "very necessary" 5 years ago...will it actually make it to release any time soon? Good navigation is quite fundamental for usability.

In the month view you can go left and right between the months like you have already or if you click on the month it could goes up to a year view (or just a simple drop down of the months) so you could go from November to January in 2 clicks rather than clicking left 10 times. Then if you click on the year in month or year view it could drop down from startYear-endYear or something.

In the month view, clicking the day number should take you to that day while clicking anywhere else in the day should trigger the select as it does now. Clicking the date header in the week view should do the same.

There should also be a way to move back up from day view to week/month view easily. Currently it has the month in the header, this should be clickable. Also you could have the up icon (fa-level-up from font awesome) top right to pull out 1 level. Day would go up to the week, week up to the month and month up to year if there was a year view. 
Aug 21, 2015
Project Member #40 adamrs...@gmail.com
Discussion for this issue has moved to the following URL:
https://github.com/fullcalendar/fullcalendar/issues/424

This is because Google Code is shutting down. Apologies if you are being pestered with these notifications. This is a one-time event.

Happy coding,
Adam
Status: ExportedToGithub
Sign in to add a comment

Powered by Google Project Hosting