Difference between revisions of "Widget:Calendar"
(Rework date script) |
m (added multi-event dates support) |
||
| (2 intermediate revisions by the same user not shown) | |||
| Line 37: | Line 37: | ||
{ | { | ||
"use strict"; | "use strict"; | ||
| + | |||
| + | function getFirstWeekdayInMonth(year, month, dayOfWeek) | ||
| + | { | ||
| + | var date = new Date(year, month, 1, 12); | ||
| + | date.setDate((dayOfWeek - date.getDay()+7) % 7 + 1); | ||
| + | return date; | ||
| + | } | ||
| + | function getLastWeekdayInMonth(year, month, dayOfWeek) | ||
| + | { | ||
| + | var date = new Date(year, month+1, 0, 12); | ||
| + | date.setDate(date.getDate() - (date.getDay()+7-dayOfWeek) % 7); | ||
| + | return date; | ||
| + | } | ||
| + | |||
// ISO 8601 week number | // ISO 8601 week number | ||
| Line 60: | Line 74: | ||
async function loadEvents() | async function loadEvents() | ||
{ | { | ||
| + | const year = new Date().getFullYear(); | ||
| + | |||
window.calendarEvents = Object.values((await (await fetch(`/wiki/Special:Ask/format%3Djson/limit%3D500/link%3Dall/headers%3Dshow/searchlabel%3DJSON/class%3Dsortable-20wikitable-20smwtable/sort%3D/order%3Dasc/offset%3D0/-5B-5BEventState::!Stalled-5D-5D-20-5B-5BEventStart::%E2%89%A431-20December-20${year}-5D-5D-20-5B-5BEventEnd::%E2%89%A51-20January-20${year}-5D-5D/-3FEventKind/-3FEventLocation/-3FURL/-3FEventStart/-3FEventEnd/mainlabel%3D/prettyprint%3Dtrue/unescape%3Dtrue`)).json()).results); | window.calendarEvents = Object.values((await (await fetch(`/wiki/Special:Ask/format%3Djson/limit%3D500/link%3Dall/headers%3Dshow/searchlabel%3DJSON/class%3Dsortable-20wikitable-20smwtable/sort%3D/order%3Dasc/offset%3D0/-5B-5BEventState::!Stalled-5D-5D-20-5B-5BEventStart::%E2%89%A431-20December-20${year}-5D-5D-20-5B-5BEventEnd::%E2%89%A51-20January-20${year}-5D-5D/-3FEventKind/-3FEventLocation/-3FURL/-3FEventStart/-3FEventEnd/mainlabel%3D/prettyprint%3Dtrue/unescape%3Dtrue`)).json()).results); | ||
| Line 203: | Line 219: | ||
var eventKinds = _td.title = _dates.filter( function( _date ) | var eventKinds = _td.title = _dates.filter( function( _date ) | ||
{ | { | ||
| − | var start = new Date( _date.printouts.EventStart[ | + | return _date.printouts.EventStart.find((es,i) => { |
| − | + | var start = new Date( _date.printouts.EventStart[i].timestamp*1000 ); | |
| − | + | var end = new Date( _date.printouts.EventEnd[i].timestamp*1000 ); | |
| − | + | // 'Fix' timezone | |
| − | + | start.setHours( 0, 0, 0, 0 ); | |
| − | + | end.setHours( 0, 0, 0, 0 ); | |
| + | return _curDate >= start && _curDate <= end; | ||
| + | }); | ||
} ).map( function( _date ) | } ).map( function( _date ) | ||
{ | { | ||
| Line 230: | Line 248: | ||
var dates = _dates.filter( function( _date ) | var dates = _dates.filter( function( _date ) | ||
{ | { | ||
| − | var start = new Date( _date.printouts.EventStart[ | + | return _date.printouts.EventStart.find((es,i) => { |
| − | + | var start = new Date( _date.printouts.EventStart[i].timestamp*1000 ); | |
| − | + | var end = new Date( _date.printouts.EventEnd[i].timestamp*1000 ); | |
| − | + | // 'Fix' timezone | |
| − | + | start.setHours( 0, 0, 0, 0 ); | |
| − | + | end.setHours( 0, 0, 0, 0 ); | |
| + | return _curDate >= start && _curDate <= end; | ||
| + | }); | ||
} ); | } ); | ||
_td.title = dates.map( function( _date ) | _td.title = dates.map( function( _date ) | ||
Latest revision as of 20:40, 14 October 2023
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
|w=true
|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.
