| Issue 388: | Keeping history state when navigating calendar (so back button works) | |
| 18 people starred this issue and may be notified of changes. | Back to list |
I have a working example of supporting the back button fully by updating the hash tag of window.location (window.location.hash). I'm using a couple of things to make this possible: - fullcalendar viewDisplay callback - jQuery hashChange event plugin (see 1) - Datejs (see 2) - and some javascript to pull it all together and use hash tags like #week- 10-2010, #day-71-2010, or #month-3-2010 I'll document this on my blog but I suspect I am doing some things inefficiently (if I was more familiar with the fullcalendar source, I could probably get rid of Datejs) and it seems like something that people would commonly need. I'll update this once I get my blog post in but feedback on whether it is desired or not would be great... (1) http://benalman.com/code/projects/jquery-hashchange/docs/files/jquery- ba-hashchange-js.html (2) http://www.datejs.com/
Mar 23, 2010
This would be cool to have it as an option in fullcalendar. In the meantime I have
implemented it with the script from benalman:
window.addEvent("domready", function(){
var today = new Date();
var tmpYear = today.getFullYear();
var tmpMonth = today.getMonth();
var tmpDay = today.getDate();
var tmpView = 'month';
var vars = window.location.hash.split("&");
for ( var i = 0; i < vars.length; i++ ){
if(vars[i].match("^#year"))tmpYear = vars[i].substring(6);
if(vars[i].match("^month"))tmpMonth = vars[i].substring(6)-1;
if(vars[i].match("^day"))tmpDay = vars[i].substring(4);
if(vars[i].match("^view"))tmpView = vars[i].substring(5);
}
jQuery('#calendar').fullCalendar({
year: tmpYear,
month: tmpMonth,
day: tmpDay,
defaultView: tmpView,
viewDisplay: function(view) {
var d = jQuery('#calendar').fullCalendar('getDate');
window.location.hash =
'year='+d.getFullYear()+'&month='+(d.getMonth()+1)+'&day='+d.getDate()+'&view='+view.name;
}
});
jQuery(window).bind( 'hashchange', function(){
var today = new Date();
var tmpYear = today.getFullYear();
var tmpMonth = today.getMonth();
var tmpDay = today.getDate();
var tmpView = 'month';
var vars = window.location.hash.split("&");
for ( var i = 0; i < vars.length; i++ ){
if(vars[i].match("^#year"))tmpYear = vars[i].substring(6);
if(vars[i].match("^month"))tmpMonth = vars[i].substring(6)-1;
if(vars[i].match("^day"))tmpDay = vars[i].substring(4);
if(vars[i].match("^view"))tmpView = vars[i].substring(5);
}
var date = new Date(tmpYear, tmpMonth, tmpDay,0,0,0);
var d = jQuery('#calendar').fullCalendar('getDate');
var view = jQuery('#calendar').fullCalendar('getView');
if(date.getFullYear() != d.getFullYear() || date.getMonth() != d.getMonth() ||
date.getDate() != d.getDate())
jQuery('#calendar').fullCalendar('gotoDate', date);
if(view.name != tmpView)
jQuery('#calendar').fullCalendar('changeView', tmpView);
});
});
I know there is some optimization potential but at the moment it works. This works
also with the datepicker.
Apr 23, 2010
@allon.moritz - took your implementation and changed it a bit to minimize and there
was an issue in the day view. Here is the revised version:
$(document).ready(function () {
var today = new Date();
var tmpYear = today.getFullYear();
var tmpMonth = today.getMonth();
var tmpDay = today.getDate();
var tmpView = 'month';
var vars = window.location.hash.split("&");
for (var i = 0; i < vars.length; i++) {
if (vars[i].match("^#year")) tmpYear = vars[i].substring(6);
if (vars[i].match("^month")) tmpMonth = vars[i].substring(6) - 1;
if (vars[i].match("^day")) tmpDay = vars[i].substring(4);
if (vars[i].match("^view")) tmpView = vars[i].substring(5);
}
$('#calendar').fullCalendar({
theme: true,
maxTime: 20, minTime: 6,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: false,
lazyFetching: false,
events: 'events.aspx',
renderEvent: function (event, element) {
element.find('span.fc-event-title').html(element.find('span.fc-event-
title').text());
},
loading: function (bool) {
if (bool) $('#loading').show();
else $('#loading').hide();
},
year: tmpYear,
month: tmpMonth,
day: tmpDay,
defaultView: tmpView,
viewDisplay: function (view) {
var d = $('#calendar').fullCalendar('getDate');
window.location.hash = 'year=' + d.getFullYear() + '&month=' + (d.getMonth()
+ 1) + '&day=' + d.getDate() + '&view=' + view.name;
}
});
var date = new Date(tmpYear, tmpMonth, tmpDay, 0, 0, 0);
var d = $('#calendar').fullCalendar('getDate');
var view = $('#calendar').fullCalendar('getView');
if (date.getFullYear() != d.getFullYear() || date.getMonth() != d.getMonth() ||
date.getDate() != d.getDate())
$('#calendar').fullCalendar('gotoDate', date);
if (view.name != tmpView)
$('#calendar').fullCalendar('changeView', tmpView);
});
Jul 13, 2010
What is the status of this? Is there going to be an official way to do this in fullCalendar or is it going to be up to us to implement it separately like the above examples?
Dec 13, 2010
I thought I'd share something I wrote in case anyone found it useful. It uses the new HTML5 history management features to make nice URL's. Basically my URL's look like this, and will be updated on the client side (with back button support) on supported browsers: http://mysite.com/calendar/month/01-01-2010 http://mysite.com/calendar/week/01-01-2010 http://mysite.com/calendar/day/01-01-2010 See attached file for code
Jan 1, 2011
(No comment was entered for this change.)
Status:
MaybePlugin
Aug 13, 2013
(No comment was entered for this change.)
Status:
Accepted
Labels: -Type-Enhancement Type-Feature
Nov 27, 2014
Issue 2381 has been merged into this issue.
Dec 18, 2014
I am struggling to get this working using the code posted in comment #3. Does anybody have a working example that they could show me that uses Fullcalendar and windows.location.hash? I have been searching high and low, and this thread is the most informative it gets.
Dec 19, 2014
It's working now, I had to change viewDisplay to viewRender.
Aug 21, 2015
Discussion for this issue has moved to the following URL: https://github.com/fullcalendar/fullcalendar/issues/659 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 |
Status: Accepted