YUI Calendar, select a week !

Here is a smart example on how to select a week with the yui calendar

First we will create a simple calendar :

YAHOO.namespace("example.calendar");YAHOO.example.calendar.init = function() {
      var today = new Date();
      YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container", {
            navigator:true,
            multi_select:true,
            maxdate: (today.getMonth()+1)+"/"+today.getDate()+"/"+today.getFullYear()});YAHOO.example.calendar.cal1.render();
}
YAHOO.util.Event.onDOMReady(YAHOO.example.calendar.init);

This will create a simple calendar.
If we want to select a week, there is an easy way to select the cell of the clicked date and then to navigate throw parent nodes.

This method will get the selected date. We will go to the TR parent to get all the td nodes. With this solution and with the getDateByCellId we can get the first date of the week and the last. We then just have to execute the select function on this range.

var customClick = function(e, cal) {
    YAHOO.example.calendar.cal1.deselectAll();
    var elem = YAHOO.util.Event.getTarget(e);
    while (elem.tagName != "TR") {
          elem = elem.parentNode;    
    }
 
    td_tochange = elem.getElementsByTagName("td");
    var date_start = YAHOO.example.calendar.cal1.toDate(YAHOO.example.calendar.cal1.getDateByCellId(td_tochange[0].id));
    var date_end = YAHOO.example.calendar.cal1.toDate(YAHOO.example.calendar.cal1.getDateByCellId(td_tochange[td_tochange.length-1].id));
    var date_range = (date_start.getMonth()+1)+'/'+date_start.getDate()+"/"+date_start.getFullYear()+"-"+(date_end.getMonth()+1)+'/'+date_end.getDate()+"/"+date_end.getFullYear();
    if(!YAHOO.util.Dom.hasClass(td_tochange[0], "selected")){
 	YAHOO.example.calendar.cal1.select(date_range);
    }else{
 	YAHOO.example.calendar.cal1.deselect(date_range)
    }
 YAHOO.example.calendar.cal1.render();
};

To enable the custom clik function we need to use the domEventMap on the calendar

YAHOO.example.calendar.cal1.domEventMap = {};
YAHOO.example.calendar.cal1.domEventMap[YAHOO.example.calendar.cal1.Style.CSS_CELL_SELECTABLE] = [
 	{tag:null, event:"click", handler: customClick, scope:YAHOO.example.calendar.cal1, correct:false }
 	];

You can simply check the result here and view the source code !

About this entry

You’re currently reading “YUI Calendar, select a week !,” an entry on Make me pulse - Making a better life for web developer since 2006

Published:
02.12.08 / 2pm
Category:
Javascript, Tips, Tutorial, YUI team