FullCalendar初探 (日程表)

Chelsey.Wang

本帖最后由逛逛逛于 2022-3-23 20:38 编辑

嵌入html学习
示例中的日期字段用了文本类型，修改的时候注意开始和结束日期的填写格式。

image.png150034484.png

逛逛逛 · 逛逛逛

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 () {
$("[fgcname='按钮1'] 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[i].ID,
title: data[i].title,
start: formatDate(data[i].start),
textColor: data[i].color,
end: formatDate(data[i].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 编辑

没完全看懂实现的思路

tominson · tominson

zxbFullCalendar.html 这个没看懂，怎么获取表格的数据的

回复 · 18791208143

7.104没有效果

phoben · phoben

FullCalendar 的API非常广泛，支持多种视图模式，希望有一天能被官方集成

muto · muto

这个不错呀，

ggwww1 · ggwww1

ggwww1 · ggwww1

为啥没有杠呢~这毛病出在哪里啊？发布以后就没杠了，预览还有杠

逛逛逛 · 逛逛逛

ggwww1 发表于 2022-1-26 21:15
为啥没有杠呢~这毛病出在哪里啊？发布以后就没杠了，预览还有杠

示例中的日期字段用了文本类型，修改的时候注意开始和结束日期的填写格式。

		自动登录	找回密码
密码			立即注册

[资源分享] FullCalendar初探 (日程表)

评分

21 个回复

评分

悬赏达人

微信认证勋章

时代开发者征文活动

活字格认证

讲师达人

活字格高级认证