FullCalendar初探 (日程表)
本帖最后由 逛逛逛 于 2022-3-23 20:38 编辑嵌入html学习
示例中的日期字段用了文本类型，修改的时候注意开始和结束日期的填写格式。
ggwww1 发表于 2022-1-27 23:22
日期字段用了文本类型，开始和结束日期的填写格式要是能改成日期格式输入框就好了，这是不是搞不成啊~
<html>
<head>
<meta charset="utf-8">
<link href='fullcalendar/fullcalendar.css' rel='stylesheet' />
<script src='fullcalendar/fullcalendar.min.js'></script>
<script src='fullcalendar/locales/zh-cn.js'></script>
<script>
var calendar = new FullCalendar.Calendar;
function UpdateCalendar() {
calendar.refetchEvents();
}
function formatDate(serial) {
var utc_days = Math.floor(serial - 25569);
var utc_value = utc_days * 86400;
var date_info = new Date(utc_value * 1000);
var fractional_day = serial - Math.floor(serial) + 0.0000001;
var total_seconds = Math.floor(86400 * fractional_day);
var seconds = total_seconds % 60;
total_seconds -= seconds;
var hours = Math.floor(total_seconds / (60 * 60));
var minutes = Math.floor(total_seconds / 60) % 60;
var daytime = new Date(date_info.getFullYear(), date_info.getMonth(), date_info.getDate(), hours, minutes, seconds);
var returnDate = date_info.getFullYear();
returnDate += "-" + (date_info.getMonth() < 9 ? '0' + (date_info.getMonth() + 1) : date_info.getMonth() + 1);
returnDate += "-" + (date_info.getDate() < 10 ? '0' + date_info.getDate() : date_info.getDate());
returnDate += " " + (daytime.getHours() < 10 ? '0' + daytime.getHours() : daytime.getHours());
returnDate += ":" + (daytime.getMinutes() < 10 ? '0' + daytime.getMinutes() : daytime.getMinutes());
return returnDate;
}
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
calendar = new FullCalendar.Calendar(calendarEl, {
theme: true, //是否展示主题
initialView: 'dayGridMonth', //默认视图设置
locale: 'zh-cn',//语言设置
aspectRatio: 1.35, //月视图下日历格子宽度和高度的比例
height: "100%",
lazyFetching:false,
contentHeight: 500, //内容高度
customButtons: {
myCustomButton: {
text: '编辑',
click: function () {
$("button").click();
}
}
},
headerToolbar: {
left: 'prev,next today myCustomButton',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
//日程数据
events: function (fetchInfo, successCallback, failureCallback ) {
var userid = 1;//用户id
var events = [];
var date = new Date();//现在时间
$.ajax({
url: 'ServerCommand/服务端命令1',
data: {
"userid": userid
},
dataType: 'json',
type: 'GET',
success: function (data1) {
var data = data1.data;
if (data != null) {
var dlen = data.length;
for (var i = 0; i < dlen; i++) {
events.push({
id: data.ID,
title: data.title,
start: formatDate(data.start),
textColor: data.color,
end: formatDate(data.end)
});
}
}
successCallback(events)
},
});
}
});
calendar.render();
});
</script>
</head>
<body>
<div class="calendar" id="calendar"></div>
<script>
Forguncy = window.parent.Forguncy;
$ = window.parent.$;
</script>
</body>
</html> ggwww1 发表于 2022-1-26 22:21
这个日历改变+1
是啥意思啊？百思不得其姐，能不能泄露一下呢？
通过值变化，去触发主页面的日历刷新事件。 牛，感谢大神！ 本帖最后由 天堂虎哥 于 2022-1-22 12:57 编辑
没完全看懂实现的思路
zxbFullCalendar.html这个没看懂，怎么获取表格的数据的 7.104没有效果 FullCalendar 的API非常广泛，支持多种视图模式，希望有一天能被官方集成 这个不错呀，:hjyzw::i0tw: 为啥没有杠呢~这毛病出在哪里啊？发布以后就没杠了，预览还有杠 ggwww1 发表于 2022-1-26 21:15
为啥没有杠呢~这毛病出在哪里啊？发布以后就没杠了，预览还有杠
示例中的日期字段用了文本类型，修改的时候注意开始和结束日期的填写格式。