My favorites | Sign in
Project Home Issues
New issue   Search
for
  Advanced search   Search tips   Subscriptions
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
Status:  ExportedToGithub
Owner:  ----
Closed:  Aug 2015


Sign in to add a comment
 
Reported by cymen...@gmail.com, Mar 11, 2010
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 15, 2010
Project Member #1 adamrs...@gmail.com
yes, this would definitely be useful, ive had a handful of people request this feature 
before. feel free to post any examples on your blog. it would be nice to get the 
datejs dependency out of there.

when i release 1.5, there will be an official add-on architecture, and this could 
definitely hook into it, would be really slick and modularized.

thanks!
Summary: Keeping history state when navigating calendar (so back button works)
Status: Accepted
Mar 23, 2010
#2 allon.mo...@gmail.com
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
#3 shaynebo...@gmail.com
@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
#4 n8cs...@gmail.com
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
#5 lukehert...@gmail.com
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
history.js
2.6 KB   View   Download
Jan 1, 2011
Project Member #6 adamrs...@gmail.com
(No comment was entered for this change.)
Status: MaybePlugin
Aug 13, 2013
Project Member #7 adamrs...@gmail.com
(No comment was entered for this change.)
Status: Accepted
Labels: -Type-Enhancement Type-Feature
Nov 27, 2014
Project Member #8 adamrs...@gmail.com
 Issue 2381  has been merged into this issue.
Dec 18, 2014
#9 neil.s.b...@gmail.com
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
#10 neil.s.b...@gmail.com
It's working now, I had to change viewDisplay to viewRender.
Aug 21, 2015
Project Member #11 adamrs...@gmail.com
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

Powered by Google Project Hosting