Difference between revisions of "Widget:Calendar"

From Hackerspace ACKspace
Jump to: navigation, search
(new debug test)
(calendar added first attempt for color highlight support)
Line 68: Line 68:
 
                 }
 
                 }
 
             }
 
             }
       
+
 
 +
            this.hl = {};
 
             this._tblCalendar = document.createElement( "table" );
 
             this._tblCalendar = document.createElement( "table" );
 
             this._today = new Date( );
 
             this._today = new Date( );
 
             this._date = _date ? new Date( _date ): this._today;
 
             this._date = _date ? new Date( _date ): this._today;
 
             this._date.setHours( 0, 0, 0, 0 );
 
             this._date.setHours( 0, 0, 0, 0 );
 +
        }
 +
       
 +
        Calendar.prototype._arrMonths = null;
 +
        Calendar.prototype._arrWeekDays = null;
 +
        Calendar.prototype._arrMonths_en_us = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
 +
        Calendar.prototype._arrWeekDays_en_us = [ "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun" ];
 +
       
 +
        Calendar.prototype._tblCalendar = null;
 +
        Calendar.prototype._today = null;
 +
        Calendar.prototype._date = null;
 +
        Calendar.prototype.hl = null;
 +
 +
        Calendar.prototype._gen = function( )
 +
        {
 
             var date = new Date( this._date.getFullYear(), this._date.getMonth(), 1 );
 
             var date = new Date( this._date.getFullYear(), this._date.getMonth(), 1 );
 
             var wd = ( date.getDay( ) + 6 ) % 7;
 
             var wd = ( date.getDay( ) + 6 ) % 7;
Line 113: Line 128:
 
                     if ( this._today.getTime() === curDate.getTime() )
 
                     if ( this._today.getTime() === curDate.getTime() )
 
                         td.className += " now";
 
                         td.className += " now";
       
+
                    if ( curDate.getTime() in this.hl )
 +
                        td.className += " " + this.hl[ curDate.getTime() ];
 +
 
 
                     row.appendChild( td ).appendChild( document.createTextNode( curDate.getDate( ) ) );
 
                     row.appendChild( td ).appendChild( document.createTextNode( curDate.getDate( ) ) );
 
                     curDate.setDate( curDate.getDate() + 1 );
 
                     curDate.setDate( curDate.getDate() + 1 );
 
                 }
 
                 }
 
             }
 
             }
         }
+
         };
       
 
        Calendar.prototype._arrMonths = null;
 
        Calendar.prototype._arrWeekDays = null;
 
        Calendar.prototype._arrMonths_en_us = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
 
        Calendar.prototype._arrWeekDays_en_us = [ "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun" ];
 
       
 
        Calendar.prototype._tblCalendar = null;
 
        Calendar.prototype._today = null;
 
        Calendar.prototype._date = null;
 
 
          
 
          
 
         Calendar.prototype.place = function( _node )
 
         Calendar.prototype.place = function( _node )
 
         {
 
         {
 +
            this._gen();
 
             _node.appendChild( this._tblCalendar );
 
             _node.appendChild( this._tblCalendar );
 
         }
 
         }
Line 136: Line 145:
 
         Calendar.prototype.toString = function( )
 
         Calendar.prototype.toString = function( )
 
         {
 
         {
 +
            this._gen();
 
             return this._tblCalendar.outerHTML;
 
             return this._tblCalendar.outerHTML;
 
         }
 
         }
Line 141: Line 151:
  
 
     var calendar = new Calendar( "<!--{$date|escape:html}-->" );
 
     var calendar = new Calendar( "<!--{$date|escape:html}-->" );
 +
<!--{foreach from=$hl key=d item=col}-->
 +
    calendar.hl[ new Date( "<!--{$d|escape:'html'}-->" ).getTime() ] = "hl-<!--{$col|escape:'html'}-->";
 +
<!--{/foreach}-->
 +
 
     document.write( calendar );
 
     document.write( calendar );
 
}( ));
 
}( ));
 
</script>
 
</script>
* <!--{$date|escape:html}-->
 
* <!--{$color}-->
 
 
<ul>
 
<!--{foreach from=$hl key=col item=dates}-->
 
  <li><!--{$col|escape:'html'}-->: set to
 
    <ul>
 
    <!--{foreach from=$dates item=item}-->
 
      <li>
 
        <!--{$item|escape:'html'}-->
 
      </li>
 
    <!--{/foreach}-->
 
    </ul>
 
  </li>
 
<!--{/foreach}-->
 
</ul>
 
 
</includeonly>
 
</includeonly>

Revision as of 17:00, 25 February 2016

This widget allows you to display a calendar

Created by Xopr

Using this widget

To insert this widget, use the following code:

{{#widget:Calendar
|date=march 1 2011
}}

This will give the following result:

Copy to your site

To use this widget on your site, just install MediaWiki Widgets extension and copy full source code of this page to your wiki as Widget:Calendar article.