Difference between revisions of "Widget:Calendar"
(added title feature) |
(added show week numbers option) |
||
| Line 17: | Line 17: | ||
{{#widget:{{PAGENAME}} | {{#widget:{{PAGENAME}} | ||
|date=february 26 2011 | |date=february 26 2011 | ||
| + | |w=true | ||
|hl.26 february 2011=blue | |hl.26 february 2011=blue | ||
|hl.1 march 2011=red | |hl.1 march 2011=red | ||
| Line 26: | Line 27: | ||
* you can highlight dates by using the ''hl'' parameter, followed by a dot and the date you want to highlight. Available colors are: red, green, blue, yellow, cyan and purple | * you can highlight dates by using the ''hl'' parameter, followed by a dot and the date you want to highlight. Available colors are: red, green, blue, yellow, cyan and purple | ||
* you can also add titles per-day using the 't' parameter, followed by a dot and the date you want to highlight. | * you can also add titles per-day using the 't' parameter, followed by a dot and the date you want to highlight. | ||
| + | * w (show week numbers) is optional | ||
== Copy to your site == | == Copy to your site == | ||
| Line 55: | Line 57: | ||
if ( typeof Calendar === "undefined" ) | if ( typeof Calendar === "undefined" ) | ||
{ | { | ||
| − | window.Calendar = function( _date ) | + | window.Calendar = function( _date, _showWeekNumber ) |
{ | { | ||
| + | this._showWeekNumber = _showWeekNumber || false; | ||
// Fill in the months and weekdays once | // Fill in the months and weekdays once | ||
if ( !Calendar.prototype._arrMonths ) | if ( !Calendar.prototype._arrMonths ) | ||
| Line 109: | Line 112: | ||
this._tblCalendar.className = "calendar"; | this._tblCalendar.className = "calendar"; | ||
| − | |||
| − | |||
| − | |||
// Month and year | // Month and year | ||
row = this._tblCalendar.appendChild( document.createElement( "tr" ) ).appendChild( document.createElement( "th" ) ); | row = this._tblCalendar.appendChild( document.createElement( "tr" ) ).appendChild( document.createElement( "th" ) ); | ||
| − | row.setAttribute( "colspan", | + | row.setAttribute( "colspan", this._showWeekNumber ? 8 : 7 ); |
row.appendChild( document.createTextNode( this._arrMonths[ date.getMonth( ) ] + " " + date.getFullYear( ) ) ); | row.appendChild( document.createTextNode( this._arrMonths[ date.getMonth( ) ] + " " + date.getFullYear( ) ) ); | ||
// Weekdays | // Weekdays | ||
row = this._tblCalendar.appendChild( document.createElement( "tr" ) ); | row = this._tblCalendar.appendChild( document.createElement( "tr" ) ); | ||
| − | if ( | + | if ( this._showWeekNumber ) |
row.appendChild( document.createElement( "th" ) ).appendChild( document.createTextNode( "w" ) ); | row.appendChild( document.createElement( "th" ) ).appendChild( document.createTextNode( "w" ) ); | ||
for ( var d = 0; d < 7; d++ ) | for ( var d = 0; d < 7; d++ ) | ||
| Line 129: | Line 129: | ||
// create row | // create row | ||
row = this._tblCalendar.appendChild( document.createElement( "tr" ) ); | row = this._tblCalendar.appendChild( document.createElement( "tr" ) ); | ||
| − | if ( | + | if ( this._showWeekNumber ) |
row.appendChild( document.createElement( "td" ) ).appendChild( document.createTextNode( "(" + curDate.getWeek() + ")" ) ); | row.appendChild( document.createElement( "td" ) ).appendChild( document.createTextNode( "(" + curDate.getWeek() + ")" ) ); | ||
| Line 169: | Line 169: | ||
} | } | ||
| − | var calendar = new Calendar( "<!--{$date|escape:html}-->" ); | + | var calendar = new Calendar( "<!--{$date|escape:html}-->", "<!--{$w|escape:html}-->" ); |
<!--{foreach from=$hl key=d item=col}--> | <!--{foreach from=$hl key=d item=col}--> | ||
calendar.hl[ new Date( "<!--{$d|escape:'html'}-->" ).getTime() ] = "hl-<!--{$col|escape:'html'}-->"; | calendar.hl[ new Date( "<!--{$d|escape:'html'}-->" ).getTime() ] = "hl-<!--{$col|escape:'html'}-->"; | ||
Revision as of 16:49, 24 March 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=february 26 2011
|hl.26 february 2011=blue
|hl.1 march 2011=red
|t.17 february 2011=First peek into ACKspace's new space
}}
This will give the following result:
Note:
- all parameters are optional. If date is omitted, the current month will be displayed
- you can highlight dates by using the hl parameter, followed by a dot and the date you want to highlight. Available colors are: red, green, blue, yellow, cyan and purple
- you can also add titles per-day using the 't' parameter, followed by a dot and the date you want to highlight.
- w (show week numbers) is optional
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.
