Posts Tagged ‘javascript’

MooTools Events Calendar – Web Embeddable Javascript Calendar

Friday, October 3rd, 2008

Month ViewThis is the official release of the unofficial MooTools Events Calendar. It is an embeddable web calendar that was built using the MooTools JavaScript framework. Currently, it is still under development, but may be sufficient for your needs. Check out the project page here: MooTools Events Calendar

-

v0.3.0 (August 5, 2009)

  • Accepts events that span across multiple days
  • MooTools v1.2.3 required.

v0.2.2 (April 11, 2009)

  • Fixed a rendering problem for people outside of the U.S.
  • Added the option for weeks to start on Monday

v0.2.1 (Feb 9, 2009)

  • bug fix - usage error with parseInt(). Events wouldn't load on the 8th and 9th of a month.
  • HTML allowed in events. This allows for events to link elsewhere.

v0.2.0 (Feb 1, 2009)

  • uses plug-ins or direct loading through the constructor for events
  • uses iCal/ISO 8601 dates/times for event input
  • different style sheets can be used for 3 different sized calendars

v0.1.0 (Oct 3, 2008)

  • month, week, and day views
  • tool tips for month view events (using Tips)
  • scrolling day events for month view (using Scroller)
  • events loaded manually or possibly through a JSON feed

Javascript Date Object – Adding and Subtracting Months

Thursday, September 18th, 2008

There is a slight problem with the Javascript Date() Object when trying to advance to the next month or go back to the previous month. For example, if your date is set to October 31, 2008 and you add one month, you'd probably expect the new date to be November 30, 2008 because November 31st doesn't exist. This, however, isn't the case. Javascript automatically advances your Date object to December 1st. This functionality is very useful in most situations(i.e. adding days to a date, determining the number of days in a month or if it's a leap year), but not for adding/subtracting months. I've put together some functions below that extend the Date() object: nextMonth() and prevMonth() See the example below for their usage and please feel free to use these in your applications.

Extends the Date Object:

function prevMonth(){
var thisMonth = this.getMonth();
this.setMonth(thisMonth-1);
if(this.getMonth() != thisMonth-1 && (this.getMonth() != 11 || (thisMonth == 11 && this.getDate() == 1)))
this.setDate(0);
}
function nextMonth(){
var thisMonth = this.getMonth();
this.setMonth(thisMonth+1);
if(this.getMonth() != thisMonth+1 && this.getMonth() != 0)
this.setDate(0);
}

Date.prototype.nextMonth = nextMonth;
Date.prototype.prevMonth = prevMonth;

Example of Usage:


function getPrevMonth(){
var today = new Date(2008,9,31); //set "today" to October 31, 2008
today.prevMonth(); //show one month earlier -> September 30, 2008 (instead of September 31, 2008 which converts to October 1st, 2008
}
function getNextMonth(){
var today = new Date(2008,9,31); //set "today" to October 31, 2008
today.nextMonth(); //show one month later -> November 30, 2008 (instead of November 31, 2008 which converts to December 1st, 2008
}

Stop A Page From Loading

Friday, July 4th, 2008

I've recently put together a page that included over 550 thumbnails that were set to load dynamically. They were grouped together to be viewed throughout several "pages". Originally, if you went to the second page without waiting for the first to finish loading, you'd be unimpressed with the presentation. The second page would begin to load only after the first was finished and so on. I needed to come up with a way to stop the thumbs from loading when you went to the next page and here's what I came up with. It works with Firefox, Safari, and the troublemaker...Internet Explorer.

Using Mootools:

function stopLoad()
{
   $try(
      function(){window.stop()},
      function(){document.execCommand('Stop')}
   )
}

Using Prototype:

function stopLoad()
{
   Try.these(
      function(){window.stop()},
      function(){document.execCommand('Stop')}
   )
}