Hi,
I am on the verge of purchasing a full license having got the desktop version of the scheduler working in MVC. I am, however having difficulty with the mobile version. Can you please confirm the mobile version will work in an MVC project and also please confirm the steps needed to get it working.
Thanks,
Andy
Hi,
do you mean this version?
docs.dhtmlx.com/doku.php?id=dhtm … ler:mobile
It should work with MVC, but can you clarify what problems do you have?
Hi,
I had tried to send you the source code but will have to send that later. All I can tell you now is that the error was “scheduler.init no defined function”. So in the source I can see it has set up the scheduler object but then this line fails when trying to (I think) use the div id as a parameter to the init function. But the init function cannot be found. The mobile .js file is being correctly referenced in the source.
Thanks,
Andy
Hi,
A bit more detail. I have an MVC4 project. In a file called MobileDiaryViewModel.cs I have the following code snippets:
using DHTMLX.Scheduler;
using DHTMLX.Scheduler.Data;
using DHTMLX.Common;
using DHTMLX.Scheduler.Controls;
public class MobileDiaryViewModel
{
public DHTMLX.Scheduler.DHXScheduler scheduler { get; private set; }
public MobileDiaryViewModel()
{
scheduler = new DHXScheduler();
UrlHelper Url = new UrlHelper(HttpContext.Current.Request.RequestContext);
scheduler.Codebase = Url.Content("~/Scripts/dhtmlxScheduler_mobile");
scheduler.DataAction = Url.RouteUrl(new { action = "Data", controller = "Diary", area = "InstructorPortal" });
scheduler.SaveAction = Url.RouteUrl(new { action = "Save", controller = "Diary", area = "InstructorPortal" });
scheduler.Skin = DHXScheduler.Skins.Glossy;
scheduler.LoadData = true; // allows loading data
scheduler.EnableDataprocessor = true; // enables DataProcessor in order to enable implementation CRUD operations
//do we need this???
scheduler.Config.prevent_cache = true;
//scheduler.Data.Loader.PreventCache();
scheduler.Config.icons_select.Clear(); // we don't want the default "select bar" icons
scheduler.UpdateFieldsAfterSave(); // ensure client is refreshed after data is saved
scheduler.Config.xml_date = "%d %M %Y %H:%i"; // date format
scheduler.Config.scroll_hour = 7; // default the scrollbar to 07:00
scheduler.Config.time_step = 15; // 15 minute increments
scheduler.InitialValues.Add("text", "New lesson"); // set default text
//this would include the map option
//scheduler.Views.Add(new MapView());
//var agendaView = new AgendaView();
//agendaView.SetTimeFrame(TimeUnits.Day, 1); //today only?
//scheduler.Views.Add(agendaView);
}
}
When I view the page I get the following error:
Error: TypeError: scheduler.init is not a function
The error is caused by the line “scheduler.init(‘scheduler_here’);” which can be found int the following source of the page:
<meta charset="utf-8" />
<title>MobileIndex - My Drive Time</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" href="/Content/jquery.mobile-1.3.1.min.css" />
<script src="/Scripts/jquery-1.9.1.min.js"></script>
<script src="/Scripts/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="/Content/jquery.mobile.alphascroll.css" />
<link rel="stylesheet" type="text/css" href="/Content/css/style.phone.css" />
<div class="container">
<section>
</div><script>
scheduler.config.serverLists = {};
scheduler.config.details_on_create = true;
scheduler.config.details_on_dblclick = true;
scheduler.config.prevent_cache = true;
scheduler.config.xml_date = '%d %M %Y %H:%i';
scheduler.config.scroll_hour = 7;
scheduler.config.time_step = 15;
scheduler.config.icons_select = [];
scheduler.init('scheduler_here');
scheduler.attachEvent('onEventCreated', function(event_id){
if(!event_id){return;}var ev = scheduler.getEvent(event_id);if(!ev)return;
ev.text = 'New lesson';
});
dp = scheduler.dataProcessor = new dataProcessor("/InstructorPortal/Diary/Save");
dp.init(scheduler);
dp.setTransactionMode("POST", false);
dp.attachEvent('onAfterUpdate', function (s_id, action, t_id, node) {
if(action == 'inserted' || action == 'updated'){
var ev = scheduler.getEvent(t_id);
for(var i = 0; i < node.attributes.length; i++){
var attr_name = node.attributes[i].name;
if(attr_name.indexOf('dhx_') != 0)
continue;
var property_name = attr_name.replace('dhx_', '');
if(ev[property_name] instanceof Date || property_name == 'start_date' || property_name == 'end_date'){
ev[property_name] = scheduler.templates.xml_date(node.attributes[i].value);
}else{
ev[property_name] = node.attributes[i].value;
}
}
scheduler.updateEvent(t_id);
}
});
scheduler.load("/InstructorPortal/Diary/Data", "json");</script>
</section>
</div>
<div data-role="panel" data-animate="true" id="right-panel" data-display="overlay" data-position="right" data-theme="a">
<ul data-role="listview" data-theme="d" data-icon="false">
<li data-icon="delete"><a href="#" data-rel="close">Close</a></li>
<li data-role="list-divider">Share this page</li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Google +</a></li>
<li><a href="#">Mail</a></li>
</ul>
</div>
<div data-role="panel" data-animate="true" id="right-panel-more" data-display="overlay" data-position="right" data-theme="a">
<ul data-role="listview" data-theme="d" data-icon="false">
<li data-icon="delete"><a href="#" data-rel="close">Close</a></li>
<li data-role="list-divider">Share this page</li>
<li><a href="#">Twitter2</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Google +</a></li>
<li><a href="#">Mail</a></li>
</ul>
</div>
<div data-role="footer" class="nav-glyphish-example" data-position="fixed" data-tap-toggle="false">
<div data-role="navbar" class="nav-glyphish-example" data-grid="d">
<ul>
<li><a data-icon="custom" data-transition="slidefade" href="/InstructorPortal/Student" id="students">Students</a></li>
<li><a data-icon="custom" href="/InstructorPortal/Diary" id="diary">Diary</a></li>
<li><a href="#" id="money" data-icon="custom">Money</a></li>
<li><a href="#" id="dashboard" data-icon="custom">Dash</a></li>
<li><a href="#right-panel-more" id="more" data-icon="custom">More</a></li>
</ul>
</div>
</div>
The dhtmlxscheduler .js file is the correct path. Maybe i’m missing something in the MobileDiaryViewModel class that in turn is causing me to miss a refernce in the source?
Any help would be greatly appreciated.
Thanks.
Hi,
Any update on this please? I’m desperate to get the mobile scheduler working this weekend so I can see it working and then purchase the full license. But I’m completely stuck and cannot get past the “scheduler.init() not a function” error. Please help so I can make some more progress on the mobile version. I’m clearly missing something in the source when trying to render the mobile calendar.
Thanks.
Hello,
mobile scheduler do not support server side configuration, you’ll have to use client-side API to initialize it
docs.dhtmlx.com/doku.php?id=dhtm … ialization
Although, helpers for data loading and update operations from dhtmlx.dll should be compatible with mobile version
Thanks for that. I have another question. At the moment the scheduler is being rendered at the top of the page. Due to having a persistent header using jquery mobile the top of the scheduler is being blocked. Is it possible to have a div tag with an id that can be used to render the scheduler in? So I can control exactly which section of the page the scheduler is displayed in? Failing that I guess I will have to offset where the scheduler begins vertically using CSS?
Thanks.
Hello,
if you create scheduler from a server configuration, you can render it inside needed container, e.g.[code]
It’s not being rendered server side. As per your earlier reply in this post it is being initialised using client side script as you said this was required for the mobile version? So it uses server side functionality for the load and save but is initialised client side. So how do you set the div location client side for the mobile version please?
Thanks
Sorry, I thought that previous question was related with a desktop scheduler.
You can set location with ‘container’ property of mobile scheduler configuration objectdhx.ui({
view:" scheduler",
container: "divId",//<- here it is
id:"scheduler
})