DHtmlX Scheduler Events not showing in Safari and Internet Explorer
I am building a nodejs application and am implementing DHtmlX Scheduler as my calendar. The calendar shows events perfectly on Chrome, Firefox, and Microsoft Edge, but will not show events on Safari or IE. I am very new to web development and have no clue what I'm doing wrong.
here is my calendar's 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>
EDIT:
Here is how the dates are stored in my MongoDB atlas
You parse server dates using new Date(dateString) constructor. This is not a recommended approach since it's prone to this kind of issues.
From 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.
Since you have problems in IE and Safari only, it suggests that the problem is caused by different browser behavior. You can pls check the format of dates that come from the server, pls refer to this article, and update your question? I can't give you an answer without seeing the actual format of dates you work with.
One possible solution would be to serialize server dates in a format client-side scheduler can parse. For example, you can check how it's done here: tutorial, github repo
If you don't have control over server date formats, then you'll need to modify a parse function. In order to suggest something for this, I need to know what your dates look like.
UPDATE
Since format of dates you get from the backend matches xml_date config value, I believe all should start working as soon as you delete this line:
scheduler.templates.xml_date = function(value){ return new Date(value); };
Scheduler generates xml_date function automatically from the config value, it shouldn't require additional configuration. If you want to define the template explicitly, you can do something like this:
scheduler.templates.xml_date = scheduler.date.str_to_date("%Y-%m-%d %H:%i");
Overall, you only need to define this template if server format changes dynamically, or if the server returns format that can't be expressed by xml_date config (e.g. ISO dates or timestamps)
Also, please be sure to add the id (without underscore) property to your server data. Client-side scheduler won't recognize _id field and as a result you won't be able to modify existing records from the client side.
Just settings event.id = event._id before returning data to the client should do the trick.