Currently trying to use the webix mobile scheduler but instead of pulling the json i want to get data from the google calendar.
Already set them up individually and they work great. But trying to figure out how to incorporate google events into the existing mobile scheduler seems a little more difficult
Any suggetsions?
Working code that gets google events
<!DOCTYPE html><head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title></title>
</head>
<script src="./codebase/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" href="./codebase/dhtmlxscheduler.css" type="text/css" media="screen" title="no title" charset="utf-8">
<style type="text/css" media="screen">
html, body{
margin:0px;
padding:0px;
height:100%;
overflow:hidden;
}
</style>
<script type="text/javascript" charset="utf-8">
function init() {
scheduler.config.xml_date="%Y-%m-%d %H:%i";
scheduler.init('scheduler_here',new Date(),"week");
scheduler.load("./data.php", "json");
var dp = new dataProcessor("./data.php");
dp.init(scheduler);
dp.setTransactionMode("POST", false);
}
</script>
<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" style="right:204px;"></div>
<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
</div>
<div class="dhx_cal_header">
</div>
<div class="dhx_cal_data">
</div>
</div>
</body>
Working code that creates the mobile scheduler with working events from the json
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">
<script src="cal/webix.js" type="text/javascript"></script>
<script src="cal/scheduler/scheduler.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="cal/skins/touch.css">
<link rel="stylesheet" type="text/css" href="cal/scheduler/scheduler.css">
<title></title>
<script type="text/javascript" charset="utf-8">
webix.ready(function() {
scheduler.config.hour_date = "%g:%i%a";
scheduler.config.readonly = true;
webix.ui.fullScreen();
webix.ui({
view: "scheduler",
id: "scheduler"
});
$$("scheduler").load("data.json", "json");
});
</script>
</head>
<body>
<div id="scheduler"></div>
</body>
</html>
You can use code like next
webix.ui({
view: "scheduler",
id: "scheduler",
save:"connector->./data.php"
});
$$("scheduler").load("./data.php");
It will allow to use the same server side code as for Desktop Scheduler
If you are using XML data feed, just use
$$("scheduler").load("./data.php", "scheduler");
like this?
webix.ready(function() {
scheduler.config.hour_date = "%g:%i%a";
scheduler.config.readonly = true;
webix.ui.fullScreen();
webix.ui({
view: "scheduler",
id: "scheduler",
save:"connector->data.php"
});
$$(“scheduler”).load(“data.php”);
});
Yep the above must read and save data correctly.
If above doesn’t work, can you share a data returned by data.php
Please share the exact response ( text which you will see after entering data.php in browser as page URI )
This is the calendar working with the mobile theme
http://area956.com/cal/cal.html
I want that theme to work but get the data from google calendar which i have working here
http://area956.com/google/sample/index.html
I have sent you a link to the demo by private message.
Demo contains the same data as returned by data.php and it works.
Just saw it! Amazing. Although it doesn’t fill up the description/details part.