用户讨论:丩卩夂忄/活动日历

◀						▶
◀						▶
日	一	二	三	四	五	六
0	0	0	0	0	0	0
0	0	0	0	0	0	0
0	0	0	0	0	0	0
0	0	0	0	0	0	0
0	0	0	0	0	0	0
0	0	0	0	0	0	0

活动:守护天使之誓
活动时间：$START～$END 活动:被强化过的朋友
活动时间：$START～$END 这一天枫·若昂·努韦勒 $AGE 这一天是郭神琳的生日

使用说明

JS

MediaWiki:EventCalendar.js

本页面使用的HTML&WIKI文本

因为使用了浏览器中无法展示的nowiki标签，所以请进入编辑页复制

{|id="EC" class="wikitable noselect" style="width:100%;text-align:center"
|-
!id="ECYM"|◀
!colspan=5 id="ECY" data-notice="想穿越去哪一年？"|
!id="ECYP"|▶
|-
!id="ECMM"|◀
!colspan=5 id="ECM"|
!id="ECMP"|▶
|-
!日||一||二||三||四||五||六
{{#loop:||6|
{{!}}-{{#loop:||7|
{{!}}class="ECD"{{!}}0}}}}
|}

数据格式说明

在页面中填写数据

创建class="ECData"的元素
```

```
添加属性data-type，="event"或="birthday"，分别对应活动信息和生日信息
```

```
```

```
- 当data-type="event"时，添加属性data-start="y/m/d"和data-end="y/m/d"，分别对应活动的开始日期和结束日期，虚位不补0
```

```
- 当data-type="birthday"时，添加属性data-date="m/d"，虚位不补0
```

```
 - 可选属性：data-start-year="y"，使日历只在指定年份后显示生日
```

```

添加属性data-title="内容"，表示鼠标悬浮在日期格时显示的摘要信息

<span class="ECData" data-type="event" data-start="2021/1/20" data-end="2021/1/31" data-title="守护天使之誓"></span>

在元素内添加内容，表示在点击日期格时显示的详细信息

<span class="ECData" data-type="event" data-start="2021/1/20" data-end="2021/1/31" data-title="守护天使之誓">[[活动:守护天使之誓]]</span>

特殊字段

当data-type="event"时，$START和$END会分别被替换为活动开始日期和活动结束日期

<span class="ECData" data-type="event" data-start="2021/1/20" data-end="2021/1/31" data-title="守护天使之誓">[[活动:守护天使之誓]]<br>活动时间：$START～$END</span>

当data-type="birthday"，且有属性data-start-year="y"时，$AGE会被替换为年龄

<span class="ECData" data-type="birthday" data-date="1/1" data-title="枫·若昂·努韦勒" data-start-year="2020">这一天{{莉莉头像|枫·若昂·努韦勒}} $AGE</span>

本页面使用的数据

<span class="ECData" data-type="event" data-start="2021/1/20" data-end="2021/1/31" data-title="守护天使之誓">[[活动:守护天使之誓]]<br>活动时间：$START～$END</span>
<span class="ECData" data-type="event" data-start="2021/1/31" data-end="2021/2/10" data-title="被强化过的朋友">[[活动:被强化过的朋友]]<br>活动时间：$START～$END</span>
<span class="ECData" data-type="birthday" data-date="1/1" data-title="枫·若昂·努韦勒" data-start-year="2020">这一天{{莉莉头像|枫·若昂·努韦勒}} $AGE</span>
<span class="ECData" data-type="birthday" data-date="2/6" data-title="郭神琳">这一天是{{莉莉头像|郭神琳}}的生日</span>

在JS中填写数据

在ECMeta.data中

{
	"event":[
		["详细信息","开始日期y/m/d","结束日期y/m/d","摘要信息"],
		["详细信息","开始日期y/m/d","结束日期y/m/d","摘要信息"],
		//……
	],
	"birthday":{
		"生日m/d":[["详细信息",开始年份（如无填false）,"摘要信息"]],
		"生日m/d":[["详细信息",开始年份（如无填false）,"摘要信息"],["详细信息",开始年份（如无填false）,"摘要信息"]],//如果同一天有多个生日
	},
}

样式说明

日历表格基础样式
- #EC{}整个日历表格的样式
- #ECY{}年份的样式
- #ECM{}月份的样式
- #ECYM{}年份减的样式
- #ECYP{}年份加的样式
- #ECMM{}月份减的样式
- #ECMP{}月份加的样式
- .ECD{}日期格的样式
表格展示样式
- .lastMonth{}上个月的日期格样式
- .nextMonth{}下个月的日期格样式
- .thisMonth{}这个月的日期格样式
- .today{}今天的日期格样式
- .birthday{}有生日信息的日期格样式
- .eventStart{}有活动开始信息的日期格样式
- .eventEnd{}有活动结束信息的日期格样式
- .eventGoing{}有活动进行信息的日期格样式
其他样式
- #ECInfo{}弹出详细信息的样式
- .ECData div{}弹出详细信息中区块的样式
- .ECData{}页面填写数据信息的样式，如无特殊需要，建议display:none;

利用CSS的特性，创建更加复杂的组合样式吧

本页面使用的样式

.ECData{
	display:none;
}
.lastMonth,.nextMonth{
	opacity:0.3;
}
.eventGoing{
	background-color:lightgreen;
	color:green;
}
.eventStart{
	background-color:green;
	color:yellow;
}
.eventEnd{
	background-color:firebrick;
	color:yellow;
}
.eventStart.eventEnd{
	background-color:orange;
	color:blue;
}
.birthday{
	background-color:violet;
	color:yellow;
}
.today{
	background-color:blue;
	color:white;
	font-weight:bold;
}
.birthday.today{
	background-color:red;
	color:yellow;
}
#ECInfo{
	left:10%;
	top:10%;
	width:80%;
	height:80%;
	background-color:white;
	border:2px solid;
	border-radius:25px;
	padding:2em;
	overflow:auto;
}
#ECInfo div{
	margin-bottom:0.5em;
}

操作说明

点击年份的单元格，弹出输入框，输入年份可以直接跳转
- 弹出框的提示文本由年份单元格的属性data-notice="内容"控制，如果不填写，默认提示为：想穿越去哪一年？
点击月份的单元格，直接跳转回当前系统时间的年月
鼠标悬浮在日期单元格，展示当日摘要信息
点击日期单元格，展示当日详细信息
在详细信息显示时，点击外围透明黑边以关闭详细信息