| Issue 153: | Clickable day numbers/headers for easier navigation | |
| 41 people starred this issue and may be notified of changes. | Back to list |
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
Nov 26, 2009
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
Issue 283 has been merged into this issue.
Mar 15, 2010
Issue 403 has been merged into this issue.
Mar 15, 2010
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
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
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
@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
Issue 577 has been merged into this issue.
Oct 7, 2010
(No comment was entered for this change.)
Summary:
Clickable day numbers/headers for easier navigation
Nov 21, 2010
Issue 695 has been merged into this issue.
Jan 21, 2011
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
Has this feature been implemented yet in the official release? Implementing the fullCalendar myself now and would be a useful functionality.
Feb 13, 2011
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
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
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
Issue 1050 has been merged into this issue.
Jan 18, 2012
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
Can somebody please upload a patched, working version of 1.5.2? Thanx in advance.
Jan 20, 2012
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
...is this being considered for inclusion in the next release?
Mar 17, 2012
@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
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
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 !
Nov 19, 2012
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
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
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
(No comment was entered for this change.)
Labels:
-Type-Enhancement Type-Feature
Aug 14, 2013
Issue 1198 has been merged into this issue.
Aug 18, 2013
Issue 1462 has been merged into this issue.
Jun 5, 2014
@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
Issue 2229 has been merged into this issue.
Aug 14, 2014
Issue 2230 has been merged into this issue.
Aug 14, 2014
Issue 2230 brings up a good point: week #s should be clickable too
Aug 14, 2014
Issue 2231 has been merged into this issue.
Nov 21, 2014
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
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 |