DHtmlX 调度程序事件未在 Safari 和 Internet Explorer 中显示
DHtmlX Scheduler Events not showing in Safari and Internet Explorer
我正在构建一个 nodejs 应用程序并将 DHtmlX Scheduler 作为我的日历。日历在 Chrome、Firefox 和 Microsoft Edge 上完美显示事件,但不会在 Safari 或 IE 上显示事件。我是网络开发的新手,不知道自己做错了什么。
这是我的日历 index.html
<!doctype html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Basic initialization</title>
<link rel="stylesheet" href="https://cdn.dhtmlx.com/scheduler/edge/dhtmlxscheduler.css">
<script src="https://cdn.dhtmlx.com/scheduler/edge/dhtmlxscheduler.js"></script>
<style>
html, body{
margin:0px;
padding:0px;
height:100%;
overflow:auto;
}
</style>
<script>
function init() {
scheduler.config.xml_date="%Y-%m-%d %H:%i";
scheduler.init('scheduler_here',new Date(),"month");
scheduler.templates.xml_date = function(value){ return new Date(value); };
scheduler.load("/data", "json");
var dp = new dataProcessor("/data");
dp.init(scheduler);
dp.setTransactionMode("POST", false);
}
</script>
</head>
<body onload="init();">
<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
<div class="dhx_cal_navline">
<div class="dhx_cal_prev_button"> </div>
<div class="dhx_cal_next_button"> </div>
<div class="dhx_cal_today_button"></div>
<div class="dhx_cal_date"></div>
<div class="dhx_cal_tab" name="day_tab"></div>
<div class="dhx_cal_tab" name="week_tab"></div>
<div class="dhx_cal_tab" name="month_tab" ></div>
</div>
<div class="dhx_cal_header">
</div>
<div class="dhx_cal_data">
</div>
</div>
</body>
编辑:
以下是日期在我的 MongoDB 地图集
中的存储方式
您使用 new Date(dateString)
构造函数解析服务器日期。这不是推荐的方法,因为它容易出现此类问题。
来自MDN
Note: parsing of date strings with the Date constructor (and Date.parse, they are equivalent) is strongly discouraged due to browser differences and inconsistencies. Support for RFC 2822 format strings is by convention only. Support for ISO 8601 formats differs in that date-only strings (e.g. "1970-01-01") are treated as UTC, not local.
由于您仅在 IE 和 Safari 中遇到问题,这表明问题是由不同的浏览器行为引起的。
您可以检查来自服务器的日期格式,pls refer to this article,并更新您的问题?如果没有看到您使用的日期的实际格式,我无法给您答案。
一种可能的解决方案是以客户端调度程序可以解析的格式序列化服务器日期。例如,您可以在此处查看它是如何完成的:tutorial, github repo
如果您无法控制服务器日期格式,则需要修改解析函数。为了对此提出一些建议,我需要知道你的约会对象是什么样的。
更新
由于您从后端获取的日期格式匹配 xml_date 配置值,
我相信一旦您删除此行,一切都应该开始工作:
scheduler.templates.xml_date = function(value){ return new Date(value); };
Scheduler 会根据配置值自动生成 xml_date 函数,不需要额外的配置。
如果你想显式定义模板,你可以这样做:
scheduler.templates.xml_date = scheduler.date.str_to_date("%Y-%m-%d %H:%i");
总的来说,只有当服务器格式动态变化,或者服务器returns格式不能用xml_date[=44表达时才需要定义这个模板=] 配置(例如 ISO 日期或时间戳)
此外,请务必将 id(无下划线)属性 添加到您的服务器数据中。客户端调度程序无法识别 _id 字段,因此您将无法从客户端修改现有记录。
只需在将数据返回给客户端之前设置 event.id = event._id
即可。
我正在构建一个 nodejs 应用程序并将 DHtmlX Scheduler 作为我的日历。日历在 Chrome、Firefox 和 Microsoft Edge 上完美显示事件,但不会在 Safari 或 IE 上显示事件。我是网络开发的新手,不知道自己做错了什么。
这是我的日历 index.html
<!doctype html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Basic initialization</title>
<link rel="stylesheet" href="https://cdn.dhtmlx.com/scheduler/edge/dhtmlxscheduler.css">
<script src="https://cdn.dhtmlx.com/scheduler/edge/dhtmlxscheduler.js"></script>
<style>
html, body{
margin:0px;
padding:0px;
height:100%;
overflow:auto;
}
</style>
<script>
function init() {
scheduler.config.xml_date="%Y-%m-%d %H:%i";
scheduler.init('scheduler_here',new Date(),"month");
scheduler.templates.xml_date = function(value){ return new Date(value); };
scheduler.load("/data", "json");
var dp = new dataProcessor("/data");
dp.init(scheduler);
dp.setTransactionMode("POST", false);
}
</script>
</head>
<body onload="init();">
<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
<div class="dhx_cal_navline">
<div class="dhx_cal_prev_button"> </div>
<div class="dhx_cal_next_button"> </div>
<div class="dhx_cal_today_button"></div>
<div class="dhx_cal_date"></div>
<div class="dhx_cal_tab" name="day_tab"></div>
<div class="dhx_cal_tab" name="week_tab"></div>
<div class="dhx_cal_tab" name="month_tab" ></div>
</div>
<div class="dhx_cal_header">
</div>
<div class="dhx_cal_data">
</div>
</div>
</body>
编辑:
您使用 new Date(dateString)
构造函数解析服务器日期。这不是推荐的方法,因为它容易出现此类问题。
来自MDN
Note: parsing of date strings with the Date constructor (and Date.parse, they are equivalent) is strongly discouraged due to browser differences and inconsistencies. Support for RFC 2822 format strings is by convention only. Support for ISO 8601 formats differs in that date-only strings (e.g. "1970-01-01") are treated as UTC, not local.
由于您仅在 IE 和 Safari 中遇到问题,这表明问题是由不同的浏览器行为引起的。 您可以检查来自服务器的日期格式,pls refer to this article,并更新您的问题?如果没有看到您使用的日期的实际格式,我无法给您答案。
一种可能的解决方案是以客户端调度程序可以解析的格式序列化服务器日期。例如,您可以在此处查看它是如何完成的:tutorial, github repo
如果您无法控制服务器日期格式,则需要修改解析函数。为了对此提出一些建议,我需要知道你的约会对象是什么样的。
更新
由于您从后端获取的日期格式匹配 xml_date 配置值, 我相信一旦您删除此行,一切都应该开始工作:
scheduler.templates.xml_date = function(value){ return new Date(value); };
Scheduler 会根据配置值自动生成 xml_date 函数,不需要额外的配置。 如果你想显式定义模板,你可以这样做:
scheduler.templates.xml_date = scheduler.date.str_to_date("%Y-%m-%d %H:%i");
总的来说,只有当服务器格式动态变化,或者服务器returns格式不能用xml_date[=44表达时才需要定义这个模板=] 配置(例如 ISO 日期或时间戳)
此外,请务必将 id(无下划线)属性 添加到您的服务器数据中。客户端调度程序无法识别 _id 字段,因此您将无法从客户端修改现有记录。
只需在将数据返回给客户端之前设置 event.id = event._id
即可。