<div id="calendar" class="page out" data-title="日历插件">
	<div id="calendar-header"></div>
	<div id="calendar-a"></div>
	<div id="calendar-urllist"></div>
</div>
<script>
require(["Calendar", "List", "UrlList", "Timelinr"], function(Calendar, List, UrlList, Timelinr) {
	var _u = require("mUtil");
	var hasClsPicker = typeof clsPicker !== "undefined";

	new Calendar({
		el: "calendar-a",
		option: {
			basic : {
				showLunar : true, //显示农历
				showNew : true,	  //显示新建
				showBack : true,  //是否显示返回
				expand : true     //收缩开关，默认为true打开
			},
			action : {
				type : "refreshUrlList",//点击日期动作refreshList刷新列表  refreshUrlList刷新url列表  refreshTimelinr刷新时间轴
				target : "calendar-urllist",//列表插件
				dataFilter : {
					field : "currdate", //字段设置，刷新列表时作为参数传入
				},
				dataReload : true
			},
			remark : "/mobilemode/mobile/demo/plugin/Calendar/data.jsp?action=remark",
				//日期标记，支持数组和链接，当为链接时，可接收startDate和endDate两个输入参数,数组格式如下
				/* [
		  	 	{"date" : "2017-06-30"},
			 	{"date" : "2017-07-15"},
			 	{"date" : "2017-08-20"},
			 	{"date" : "2017-10-28"},
			 	{"date" : "2017-10-31"}
			], */
			callback : {
				swipe : function(startDate, endDate){
					console.log("滑动日历");
				},
				click : function(currDate){
					console.log("点击日期");
				},
				add : function(currDate){
					console.log(currDate+"新建");
				}
			}
		}
	}).render().then(function() {
		if (!hasClsPicker) return;
		
		_u.vetically("#calendar-a");

		clsPicker.golalSetting({
			container: ".wev-comp-Calendar",
			type: "Calendar"
		});

		new clsPicker({
			selector: ".wev-comp-Calendar",
			text: ".wev-comp-Calendar",
			lineYSkew: 60,
			skew: [1.5, ""],
			angle: 80,
			position: "bottom left",
			height: 160
		});
		new clsPicker({
			selector: ".swiper-slide-active ._m_cdar_currentCalendar",
			text: "._m_cdar_currentCalendar",
			lineYSkew: 20,
			angle: 80,
			position: "bottom left"
		});

		new clsPicker({
			selector: "._m_cdar_calendarLeft",
			text: "._m_cdar_calendarLeft",
			lineYSkew: 150,
			skew: [5, ""],
			position: "top right"
		});
		new clsPicker({
			selector: "._m_cdar_calendarYearMonth",
			text: "._m_cdar_calendarYearMonth",
			lineYSkew: 90,
			position: "top right"
		});
		new clsPicker({
			selector: "._m_cdar_calendarHead td",
			text: "._m_cdar_calendarHead td",
			lineYSkew: 120,
			position: "top right"
		});
		
		new clsPicker({
			selector: "._m_cdar_calendarAddData",
			text: "._m_cdar_calendarAddData",
			lineYSkew: 60,
			position: "top left"
		});
		new clsPicker({
			selector: "._m_cdar_upDownCalendar",
			text: "._m_cdar_upDownCalendar",
			lineYSkew: 30,
			position: "top left"
		});
	});
	
	if(!hasClsPicker) {
		var urllist = new UrlList({
			el: "calendar-urllist",
			option: {
				url : "/mobilemode/mobile/demo/plugin/Calendar/data.jsp?action=getDatas",
				pageSize : 3,
				normalview : {
					titlefield : "{title}",
					imgfield : "<img src='{avatar}' style='width:40px;height:40px;border-radius:40px;'/>",
					otherfields : [
						"内容:{content}",
						"分类:{cat}",
						"日期:{date}"
					]
				},
				
				hideSearch : true,//是否隐藏查询
				btns : [
					{
						text : "测试",
						click : function(){
							alert("点击测试按钮");
						}
					}
				],
				readonly : false, //是否只读
				callback: {
					click : function(data){
						var title = encodeURIComponent(data.title);
						var cat = encodeURIComponent(data.cat);
						var content = encodeURIComponent(data.content);
						$u("/mobilemode/mobile/demo/plugin/UrlList/detail.html?id="+data.id+"&title="+title+"&cat="+cat+"&content="+content, true);
					}
				}
			}
		});
		urllist.render();
	}
});
</script>