Is it possible? I just want to directly get the data from the database using ajax http post and plot it as json format.
eg i’m using angularjs http post, then the return is json format:
$http.post("schedule/get", {}).success(function(data) {
$scope.event_data = data;
});
.....
scheduler.parse($scope.event_data,"json");The problem with this code, $scope.event_data is always undefined. Probably the data came after the scheduler being rendered. Any idea? Thanks.
Try to change the logic like next
$http.post("schedule/get", {}).success(function(data) {
$scope.event_data = data;
scheduler.parse($scope.event_data,"json");
});
Thanks for the reply. Can you help me with this code please:
var eventData = [], techs=[];
$http.post($scope.getUrl, {}).success(function(data) {
$.each (data, function (obj) {
var item = {}, tech={};
item["id"]=data[obj].id;
item["text"]=data[obj].scheduleTitle;
item["section_id"]=data[obj].userId.id;
item["rec_type"]=data[obj].recurringType;
item["rec_pattern"]=data[obj].recurringPattern;
item["start_date"]=$scope.timeConverter(data[obj].startDate);
item["end_date"]=$scope.timeConverter(data[obj].endDate);
eventData.push(item);
//check if its the same user id
if(tech["key"] != data[obj].userId.id){
tech["key"]=data[obj].userId.id;
tech["label"]=data[obj].userId.profile.lastname;
techs.push(tech);
}
});
$scope.units = JSON.stringify(techs);
//OUTPUT of $scope.units: [{"key":1,"label":"Admin"},{"key":3,"label":"Tech"}]
scheduler.createUnitsView({
name:"unit",
property:"section_id",
list:$scope.units
});
if($scope.mode == 'unit'){
scheduler.config.multi_day = true;
scheduler.locale.labels.unit_tab = "Technicians";
scheduler.locale.labels.section_custom="Technicians";
scheduler.config.lightbox.sections= $scope.lightbox_config;
scheduler.attachEvent("onTemplatesReady", function(){
var html = [];
//generate all colors at once, bind class name to section id instead of color value
for(var i = 0; i < $scope.units.length; i++) {
var color = $scope.getRandomColor(); //get the random color for each unit
html.push('.dhx_cal_event.section_'+$scope.units[i].key+' div{background-color:#'+color+'; }');
html.push('.dhx_cal_event_line.section_'+$scope.units[i].key+'{background-color:#'+color+'; }');
html.push('span.section_'+$scope.units[i].key+' {color:#'+color+'; }');
}
$scope.updateStyleNode(html.join("\n")); //call a function to join styles
return true;
});
scheduler.templates.unit_scale_text=function(key, label, option){
var temp = "<span class='section_" + key + "'>" + label + "</span>";
return temp;
};
scheduler.templates.event_class = function(start,end,ev){
return 'section_' + ev.section_id;
};
}
scheduler.config.details_on_create=true;
scheduler.config.details_on_dblclick=true;
scheduler.config.xml_date="%Y-%m-%d %H:%i";
scheduler.init('calendar',new Date(),$scope.mode);
$scope.events = JSON.stringify(eventData);
scheduler.parse($scope.events,"json");
}).error(function(data, status, headers, config) {
console.log("Failed Search");
});
//other functions
timeConverter: function(UNIX_timestamp){
var d = new Date(UNIX_timestamp);
var deyt = d.getUTCFullYear() +"-"+ d.getUTCMonth() +"-"+d.getUTCDate()+ " " + d.getUTCHours() +":"+d.getUTCMinutes() +":"+d.getUTCSeconds();
return deyt;
},
getRandomColor: function() {
var letters = '0123456789ABCDEFGHIJK'.split('');
var color = '';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.round(Math.random() * 15)];
}
return color;
},
updateStyleNode: function(css){
var style = document.getElementById("event_colors") || document.createElement('style');
style.id = "event_colors";
style.type = 'text/css';
style.innerHTML = css;
if(!style.parentNode){
document.getElementsByTagName('head')[0].appendChild(style);
}
}No error msg comes up, the data is populating correctly, BUT the lightbox is not showing up, the unit view get’s weird (please see attached)
Thanks
$scope.units = JSON.stringify(techs);this line must be changed as
$scope.units = techs;Thank you!
Another issue is when loading repeating events.
This is the part where i get the data from my db using $http.post of angularjs.
$.each (data, function (obj) {
var item = {}, tech={};
item["id"]=data[obj].id;
item["text"]=data[obj].scheduleTitle;
item["section_id"]=data[obj].userId.id;
item["rec_type"]=data[obj].recurringType;
item["rec_pattern"]=data[obj].recurringPattern;
item["start_date"]=$scope.timeConverter(data[obj].startDate);
item["end_date"]=$scope.timeConverter(data[obj].endDate);
eventData.push(item);
});
$scope.events = JSON.stringify(eventData);
scheduler.parse($scope.events,"json");Basically if the event is repeatuing event it’s not rendering to scheduler. BTW i’ve mixed the repeating and the normal event from db. kindly check my table (attached). Thanks
Is data loading doesn’t work for recurring events only ?
recurring events must have one more mandatory field - event_length
docs.dhtmlx.com/scheduler/recurr … ntegration
yes, only the first day, let say i assigned recurrsing event daily, only the first day will rendered in a calendar using month view or other views.
When saving the recurrsing event there’s no such event_length that been posted as a field. How to measure the event_length?
I tried to experiment by puting fixed value on event_length and event_pid, but still the same.
$.each (data, function (obj) {
var item = {}, tech={};
item["id"]=data[obj].id;
item["text"]=data[obj].scheduleTitle;
item["section_id"]=data[obj].userId.id;
item["rec_type"]=data[obj].recurringType;
item["rec_pattern"]=data[obj].recurringPattern;
item["start_date"]=$scope.timeConverter(data[obj].startDate);
item["end_date"]=$scope.timeConverter(data[obj].endDate);
//for testing i added fixed value
item["event_pid"]="0";
item["event_lenght"]="7200";
eventData.push(item);
});thanks.
correction: item[“event_length”]=“7200”
Please be sure that dhtmlxscheduler_recurring.js is included on the page
As for event length - if you are creating event through lightbox, and set it as recurring, then the result event object will have event_length property. ( it is length of single event in second, end_date point not to the end of a single event, but to end of serie of events )
Hi,
Can you check what’s wrong with this data. I don’t understand why its not repeating in the calendar.
This is the data that are not repeating.
var data = [
{event_id:55,start_date:new Date(2014,3,31,0,0), end_date:new Date(2014,3,31,2,0),text:"New event 2",rec_type:"day_1___#no",event_length:2*60*60},
{event_id:54,start_date:new Date(2014,3,31,0,0), end_date:new Date(2014,3,31,2,0),text:"New event",rec_type:"day_1___#no",event_length:2*60*60},
{event_id:56,start_date:new Date(2014,3,11,8,0), end_date:new Date(2014,3,11,10,0),text:"Test Repeat",rec_type:"day_1___#no",event_length:2*60*60}
]; compare to this data. This data is repeating.
var data = [
{event_id:1,start_date: new Date(2014,2,17,2,0), end_date:new Date(2014,4,17,2,0),text:"test",rec_type:"day_1___#no",event_length: 2*60*60,test:{id:1,test:'testa'}},
{event_id:2,start_date: new Date(2014,5,17,2,0), end_date:new Date(2014,6,17,2,0),text:"testw",rec_type:"day_1___#no",event_length: 2*60*60,test:{id:2,test:'testb'}},
{event_id:3,start_date: new Date(2014,2,10,2,0), end_date:new Date(2014,2,10,4,0),text:"test non-recurring",rec_type:null,event_length: null, test:{id:3,test:'testc'}}
];I used this to render the data in the calendar. the first data are not working while the second data is working fine. What’s wrong with the first one?
for (var key in data) {
if (data.hasOwnProperty(key)) {
var val = data[key];
scheduler.addEvent({
event_id:val.event_id,
start_date: val.start_date,//start date of the series
end_date: val.end_date,//end date of the series
text: val.text,
rec_type: val.rec_type,
event_length: val.event_length,//duration of the single event, is seconds
event_pid: val.event_pid
});
}
}Thanks
For recurring event end_date points to the end of the series, not the end of the single event.
If you have event without end date it must have end date sent to some distant future.
{event_id:55,start_date:new Date(2014,3,31,0,0), end_date:new Date(2900,1,1,0,0),text:"New event 2",rec_type:"day_1___#no",event_length:2*60*60}