Skip to search.
ydn-javascript · Yahoo! User Interface Library Group

Group Information

  • Members: 10919
  • Category: JavaScript
  • Founded: Dec 15, 2005
  • Language: English
? Already a member? Sign in to Yahoo!

Yahoo! Groups Tips

Did you know...
Real people. Real stories. See how Yahoo! Groups impacts members worldwide.

Messages

  Messages Help
Advanced
Select all Sundays   Message List  
Reply Message #8507 of 52481 |
Re: Select all Sundays

Hi Laura,
Firstly, you're right - the current Calendar/CalendarGroup API does not really expose/provide the methods required to easily work cell indices.

It does have a couple of index based properties though, cells  and cellDates, which can be leveraged to provide the type of functionality you require, while also keeping to the public Calendar interfaces (viz. avoiding private Calendar methods, not relying on implementation details like DOM ids etc.).

The general idea is to:

    a). Setup a Selection Listener

In the selection listener...

    b). Find the cell index of the date selected using Calendar.cells/cellDates *
    c). Look up and down the cellDates array in increments of 7 (Days in a week) and select dates which are ! OOM

The complexities arise around the fact that:

1). CalendarGroup does not have it's own cells/cellDates array, so we need to

            i). Find the Calendar (page) for the selected date *
            ii). Use this Calendar's cellDates array to drive the selection

2).  Since we're 'selecting' inside a selectEvent listener, we run into the issue of recursing infinitely (not fun)

The methods/tasks marked with a * above are ones which I believe should exist as part of the Calendar API. We'll be looking into this for a future release.

Anyhow, here's the code I came up with which attempts to deal with the above issues and seems to work OK. Needs some thorough testing though.

I don't necessarily know if it's faster than re-rendering after applying a renderer, but it seems to be. Also, keep in mind that applying the renderer (or manipulating CSS directly) doesn't really change the selected state of the calendar - just it's visual appearance.

NOTE: you'll need to add code to handle de-selection similarly, but the stucture should be identical.

Let us know if this helps,

- Satyen


<div id="cal1Container"></div>

<script type="text/javascript">

function updateSelection(type, args, obj)
{
    // We need this flag to stop re-entrancy for the listener
    //(when selectCell is called below)
    if (!this.__selectingInternal) {
       
        this.__selectingInternal = true;
        var selectedDateArray = args[0][0];
       
        var cal = (!this.pages) ? this : findCalPage(this, selectedDateArray);
        if (cal) {
            var index = findCellIndex(cal, selectedDateArray);
            if (index != -1) {
               
                var DAYS_IN_WEEK = 7;
               
                // Dates Above

                for (var i = index - DAYS_IN_WEEK; i >= 0; i -= DAYS_IN_WEEK) {
                    var nextDate = cal.cellDates[i];
                    if (!cal.isDateOOM(getDateFromArray(nextDate))) {
                        // If you don't need selection state, just highlighting;
                        // you can set a css class instead and drop the re-entrancy check

                        cal.selectCell(i);
                    } else {
                        break;
                    }
                }
               
                // Dates Below
                for (var j = index + DAYS_IN_WEEK; j < cal.cellDates.length; j += DAYS_IN_WEEK) {
                    var nextDate = cal.cellDates[j];
                    if (!cal.isDateOOM(getDateFromArray(nextDate))) {
                        cal.selectCell(j);
                    } else {
                        break;
                    }
                }
            }
        }
        this.__selectingInternal = false;
    }
}

// Some of these next 3 methods should probably be provided (publically) by
// the Calendar/CalendarGroup API

function getDateFromArray(dateArray)
{
    return new Date(dateArray[0], dateArray[1]-1, dateArray[2]);
}

function findCellIndex(cal, selectedDateArray)
{
    var selectedDateArrayStr = selectedDateArray.join(",");
    for (var i = 0; i < cal.cellDates.length; ++i)
    {
        if (selectedDateArrayStr == cal.cellDates[i].join(","))
        {
            return i;
        }
    }
    return -1;
}

function findCalPage(calgroup, selectedDateArray)
{
    var yr = selectedDateArray[0];
    var monthIdx = selectedDateArray[1] - 1;
    var pages = calgroup.pages;
   
    for (var i = 0; i < pages.length; ++i)
    {
        var pageDate = pages[i].cfg.getProperty("pagedate");
        if (pageDate.getFullYear() == yr && pageDate.getMonth() == monthIdx)
        {
            return pages[i];
        }                       
    }
    return null;
}

function init() {
    var cal1 = new YAHOO.widget.CalendarGroup("cal1", "cal1Container", {MULTI_SELECT: true});
    cal1.selectEvent.subscribe(updateSelection, cal1, true);
    cal1.render();
}

YAHOO.util.Event.addListener(window, "load", init);
</script>




Wed Jan 17, 2007 3:12 am

sdezzi
Offline Offline
Send Email Send Email

Message #8507 of 52481 |
Expand Messages Author Sort by Date

Hi, I created a group calendar and now I'd like to add a feature: clicking on weekday should cause all the days in the same columns to be selected. For...
flexylally Offline Send Email Jan 15, 2007
9:27 am

To the top again... Any ideas? Thanks, Laura...
flexylally Offline Send Email Jan 16, 2007
9:08 am

I wrote a script for someone on Sitepoint a couple of weeks ago to help him make a dropdown that only contained Saturdays - I'm only pasting this code here as...
Jon Trelfa
jtrelfa Offline Send Email
Jan 16, 2007
1:27 pm

Thanks Jon. Actually the thing is a bit more complex than this. The problem is: if you don't want to refresh completely the calendar every time you click on a...
flexylally Offline Send Email Jan 16, 2007
4:13 pm

Hi Laura, Firstly, you're right - the current Calendar/CalendarGroup API does not really expose/provide the methods required to easily work cell indices. It...
Satyen Desai
sdezzi Offline Send Email
Jan 17, 2007
3:12 am

Hi Satyen and Jon thanks a lot for your help. Yahoo's a great community! In particular I tried Satyen's code and it works, but I wanted to implement something...
flexylally Offline Send Email Jan 17, 2007
10:23 am

to the top...
flexylally Offline Send Email Jan 23, 2007
8:16 am

Hey Laura, If you're looking to implement this type of solution, then you will need to rely on the stucture of the markup the Calendar generates, because it...
Satyen Desai
sdezzi Offline Send Email
Jan 23, 2007
8:30 am

... Wonderful!!! I tried and it works! Thank you so much!! :-) Laura - Italian in Switzerland...
flexylally Offline Send Email Jan 23, 2007
9:31 am

Alrighty - here's what I came up with. I borrowed from one of the examples and messed around to try and figure it out. The example comes from...
Jon Trelfa
jtrelfa Offline Send Email
Jan 16, 2007
9:21 pm
Advanced

Copyright © 2010 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Guidelines NEW - Help