Hey all,

 

I have a Javascript calender and it's got a funny issue where it loads fine however the events that are being pulled only show when you click the next month link then when you go back to the previous month the events then show.

 

I've had a good look through the JS and can't seem to see what's causing it i'm not a JS guru at all i'm fairly new to it.

var dateFormat = function () {
var	token = /d{1,4}|m{1,4}|yy(?:yy)?|([HhMsTt])\1?|[LloSZ]|"[^"]*"|'[^']*'/g,
	timezone = /\b(?:[PMCEA][sDP]T|(?:Pacific|Mountain|Central|Eastern|Atlantic) (?:Standard|Daylight|Prevailing) Time|(?:GMT|UTC)(?:[-+]\d{4})?)\b/g,
	timezoneClip = /[^-+\dA-Z]/g,
	pad = function (val, len) {
		val = String(val);
		len = len || 2;
		while (val.length < len) val = "0" + val;
		return val;
	};

// Regexes and supporting functions are cached through closure
return function (date, mask, utc) {
	var dF = dateFormat;

	// You can't provide utc if you skip other args (use the "UTC:" mask prefix)
	if (arguments.length == 1 && Object.prototype.toString.call(date) == "[object String]" && !/\d/.test(date)) {
		mask = date;
		date = undefined;
	}

	// Passing date through Date applies Date.parse, if necessary
	date = date ? new Date(date) : new Date;
	if (isNaN(date)) throw SyntaxError("invalid date");

	mask = String(dF.masks[mask] || mask || dF.masks["default"]);

	// Allow setting the utc argument via the mask
	if (mask.slice(0, 4) == "UTC:") {
		mask = mask.slice(4);
		utc = true;
	}

	var	_ = utc ? "getUTC" : "get",
		d = date[_ + "Date"](),
		D = date[_ + "Day"](),
		m = date[_ + "Month"](),
		y = date[_ + "FullYear"](),
		H = date[_ + "Hours"](),
		M = date[_ + "Minutes"](),
		s = date[_ + "Seconds"](),
		L = date[_ + "Milliseconds"](),
		o = utc ? 0 : date.getTimezoneOffset(),
		flags = {
			d:    d,
			dd:   pad(d),
			ddd:  dF.i18n.dayNames[D],
			dddd: dF.i18n.dayNames[D + 7],
			m:    m + 1,
			mm:   pad(m + 1),
			mmm:  dF.i18n.monthNames[m],
			mmmm: dF.i18n.monthNames[m + 12],
			yy:   String(y).slice(2),
			yyyy: y,
			h:    H % 12 || 12,
			hh:   pad(H % 12 || 12),
			H:    H,
			HH:   pad(H),
			M:    M,
			MM:   pad(M),
			s:    s,
			ss:   pad(s),
			l:    pad(L, 3),
			L:    pad(L > 99 ? Math.round(L / 10) : L),
			t:    H < 12 ? "a"  : "p",
			tt:   H < 12 ? "am" : "pm",
			T:    H < 12 ? "A"  : "P",
			TT:   H < 12 ? "AM" : "PM",
			Z:    utc ? "UTC" : (String(date).match(timezone) || [""]).pop().replace(timezoneClip, ""),
			o:    (o > 0 ? "-" : "+") + pad(Math.floor(Math.abs(o) / 60) * 100 + Math.abs(o) % 60, 4),
			S:    ["th", "st", "nd", "rd"][d % 10 > 3 ? 0 : (d % 100 - d % 10 != 10) * d % 10]
		};

	return mask.replace(token, function ($0) {
		return $0 in flags ? flags[$0] : $0.slice(1, $0.length - 1);
	});
};
}();

// Some common format strings
dateFormat.masks = {
"default":      "ddd mmm dd yyyy HH:MM:ss",
shortDate:      "m/d/yy",
mediumDate:     "mmm d, yyyy",
longDate:       "mmmm d, yyyy",
fullDate:       "dddd, mmmm d, yyyy",
shortTime:      "h:MM TT",
mediumTime:     "h:MM:ss TT",
longTime:       "h:MM:ss TT Z",
isoDate:        "yyyy-mm-dd",
isoTime:        "HH:MM:ss",
isoDateTime:    "yyyy-mm-dd'T'HH:MM:ss",
isoUtcDateTime: "UTC:yyyy-mm-dd'T'HH:MM:ss'Z'"
};

// Internationalization strings
dateFormat.i18n = {
dayNames: [
	"Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat",
	"Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"
],
monthNames: [
	"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec",
	"January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"
]
};

// For convenience...
Date.prototype.format = function (mask, utc) {
return dateFormat(this, mask, utc);
};



//<![CDATA[

 	  function updateDatepicker(dates)
 	  {
 	    $('div.ajax-overlay').remove();
 	    $('#calendar .ui-datepicker-calendar td a, #calendar .ui-datepicker-calendar td span').each(function(index, item){
   	    if(dates[index] != '') $(item).addClass('event-day').attr("title",dates[index].join('   |   '));
   	    else $(item).removeAttr('href').parent().removeAttr('onclick');
   	  })
   	}
     function getDates(newYear, newMonth)
     {
     	$.getJSON('{% url events_calendar_dates 1111 22 %}'.replace('1111',newYear).replace('22',newMonth),
         {},
         function(data) {
           if(data.error)
           {
             $('#calendar').remove();
           }
           else if(data.days)
           {
             updateDatepicker(data.days);//data.days should be a list of string/false values corresponding to each day of the month and whether that day holds an event. for days that have events, strings should contain a html representation of the titles of that day's events
           }
       	}
       )
     }
   	$(document).ready(function() {
   		$('#calendar').datepicker({
   		  dateFormat: 'yy-mm-dd',
         minDate: 0,
   		  firstDay: 1,
   		  onSelect: function(dateText, picker) {
   		    var dateVals = /\d{4}-\d{1,2}-\d{1,2}/.test(dateText) ? dateText.match(/\d{4}|\d{2}/g) : false;
   		    if(dateVals === false || !$('#calendar .ui-datepicker-calendar td a, #calendar .ui-datepicker-calendar td span').eq((dateVals[2] - 1)).hasClass('event-day'))
   		    {
 		        return false;//bad date format or not an event day
   		    }
   		    window.location = "{% url events_date "1111-22-33" %}"
   		      .replace('33', dateVals[2])
   		      .replace('22', dateVals[1])
   		      .replace('1111', dateVals[0]);
   	    },
   	    onChangeMonthYear: function(newYear, newMonth, inst) {
   	      $('#calendar').append('<div class="ajax-overlay"><div class="ajax-loading">Loading Calendar</div></div>');
   	      $('#calendar .ajax-overlay, #calendar .ajax-loading').css({
   	        width: function(){return $('#calendar').width();},
   	        height: '5000px'
   	      });
   	      $('#calendar .ajax-loading').css({paddingTop: "120px"});
   	      getDates(newYear, newMonth);
   	    }
   	  });



	setTimeout("setDateFormat()", 500);


   	});

	function setDateFormat() {
		// Convert date formats
		$(".hasDatepicker").each(function() {
			currentdate = new Date($(this).val());
			newdate = dateFormat(currentdate, "dd/mm/yyyy");
			$(this).val(newdate);
		});

	}

 

 

If you need anymore information let me know, but I should it's something to do with the way you click next and that's triggering the JS to load which shows the events. Idealy this needs to be done on page load.

 

Thanks in advance.

 

Josh

Anyone?