Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Xarno Calendar (gallery-xarno-calendar) on cdn

Last Updated: 03/21/11

+ 9 -

Anthony Pipkin

YUI Developer

See 28 more by this user.

Created: 12/8/10
Last CDN Push: 02/2/11
Build Tag: gallery-2011.02.02-21-07
Project: YUI 3
License: YUI BSD
YUI Version: 3.3.0
Free for use.

Renders a full list of calendar days. Always displays 6 weeks to keep the calendar the same height.

Method

prevYear - Sets calendar to previous year
prevMonth - Sets calendar to previous month
nextMonth - Sets calendar to next month
nextYear - Sets calendar to next year

Event

select - Fired when a calendar day is selected
update - Fired when the calendar date is changed.

Configuration

date - Current date. Must always be a Date object
dateSelected - Current date selected
daysOfTheWeek - List of the days of the week to be displayed above each column
weekStart - (0) Sets the calendar start week to either Sunday(0) or Monday(1)
calendarTemplate - Template to be used for the calendar. The parent node will be used if a nested template is provided.
dayTemplate - Template used for each day of the current month
previousDayTemplate - Template used for each day of the previous month
nextDayTemplate - Template used for each day of the next month

Tags:
apipkin

The calendar controls are not part of the calendar widget because of the large number of unique setups. These could easily be generated from plugins.

In this example the controls are part of the page and added to the widget when it is rendered.

Code Sample

<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>

        <div id="selected"><span></span></div>
        <div id="controls">
                <button class="prev-year"><<</button>
                <button class="prev-month"><</button>
                <span class="monthYear"></span>
                <button class="next-month">></button>
                <button class="next-year">>></button>
        </div>
        <div id="cal"></div>
    <script type="text/javascript">
      YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2011.02.02-21-07'
}).use('gallery-xarno-calendar', function(Y){
        var c = new Y.Xarno.Calendar({dateSelected: (new Date())}),
                        months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
 
                c.on('update', function(e) {
                        var d = c.get('date');
                        Y.one('.monthYear').setContent(months[d.getMonth()] + ' ' + d.getFullYear());
                });
 
                c.after('select', function(e) {
                        var d = c.get('dateSelected');
                        Y.one('#selected span').set('text', months[d.getMonth()] + ' ' + d.getDate() + ', ' + d.getFullYear());
                });
 
                c.render('#cal');
                c.set('headerContent', Y.one('#controls'));
                c.set('footerContent', Y.one('#selected'));
 
                Y.one('.prev-year').on('click', c.prevYear, c);
                Y.one('.prev-month').on('click', c.prevMonth, c);
                Y.one('.next-month').on('click', c.nextMonth, c);
                Y.one('.next-year').on('click', c.nextYear, c);
 
      });
    </script>

<div id="selected"><span></span></div>
        <div id="controls">
                <button class="prev-year"><<</button>
                <button class="prev-month"><</button>
                <span class="monthYear"></span>
                <button class="next-month">></button>
                <button class="next-year">>></button>
        </div>
        <div id="cal"></div>
    <script type="text/javascript">
      YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2011.02.02-21-07'
}).use('gallery-xarno-calendar', function(Y){
        var c = new Y.Xarno.Calendar({dateSelected: (new Date())}),
                        months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
                
                c.on('update', function(e) {
                        var d = c.get('date');
                        Y.one('.monthYear').setContent(months[d.getMonth()] + ' ' + d.getFullYear());
                });
                
                c.after('select', function(e) {
                        var d = c.get('dateSelected');
                        Y.one('#selected span').set('text', months[d.getMonth()] + ' ' + d.getDate() + ', ' + d.getFullYear());
                });
                
                c.render('#cal');
                c.set('headerContent', Y.one('#controls'));
                c.set('footerContent', Y.one('#selected'));
                
                Y.one('.prev-year').on('click', c.prevYear, c);
                Y.one('.prev-month').on('click', c.prevMonth, c);
                Y.one('.next-month').on('click', c.nextMonth, c);
                Y.one('.next-year').on('click', c.nextYear, c);

});
    </script>

Forum Posts

No forum posts for this module.