Hi, Being new to dhtmlx scheduler I’ve spent the last two days going nuts trying to grasp how to actually add an event (appointment i my case) to a collection and then save it to the backend. Every example I’ve seen so far involves hardcoded events added directly into the events-collection and no examples seems to show how to actually add (and intercept) a new event from the lightbox. Thing is I’m trying to wrap the scheduler in a angular-directive so I can’t rely on out-of-the-box functionality (I’m using tupescript btw):
[code]export class DhtmlxSchedulerDirective implements ng.IDirective {
restrict = “A”;
scope = {
schedulerModel: “=”
};
transclude = true;
template = “<div class=“dhx_cal_navline” ng-transclude ><div class=“dhx_cal_header”><div class = “dhx_cal_data” >< / div>”;
link: (scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes) => void;
constructor() {
this.link = this.linkImpl;
}
linkImpl(scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes): void {
if (!scope["schedulerModel"]) {
scope["schedulerModel"] = {
mode: scope["schedulerModel"].mode || "month",
date: scope["schedulerModel"].date || new Date()
};
}
scheduler.config.xml_date = scope["schedulerModel"].config.xmlDate;
scheduler.config.details_on_dblclick = true;
scheduler.config.details_on_create = true;
scheduler.config.first_hour = 7;
scheduler.config.last_hour = 20;
scheduler.locale.labels.resourceTab = "Resurser";
scheduler.createUnitsView({
name: "resurs",
property: "resourceId",
list: [
{ key:1, label:"Resurs 1" },
{ key:2, label:"Resurs 2" }
]
});
//scheduler.templates.event_class = (start, end, event) => {
// if (event.inProgress)
// return "event_in_progress";
// return "";
//};
// Watch data collection, reload on changes
scope.$watchCollection("schedulerModel.appointments", (newValue, oldValue) => {
var addedItems = newValue === oldValue ? newValue : _.difference(newValue, oldValue);
console.log("Added items", addedItems);
_.forEach(addedItems, item => {
item["start_date"] = item["startTime"];
item["end_date"] = item["endTime"];
item["text"] = item["text"];
scheduler.addEvent(item);
});
var removedItems = _.difference(oldValue, newValue);
console.log("Removed items", removedItems);
_.forEach(removedItems, item => {
scheduler.deleteEvent(item["id"]);
});
});
// Watch mode and date
scope.$watch(() => (scope["schedulerModel"].mode + " " + scope["schedulerModel"].date.toString()), (nv, ov) => {
var state = scheduler.getState();
if (nv.date !== state.date || nv.mode !== state.mode) {
scheduler.setCurrentView(scope["schedulerModel"].date, scope["schedulerModel"].mode);
}
});
// Watch size of scheduler
scope.$watch(() => (element[0].offsetWidth + "." + element[0].offsetHeight), () => {
scheduler.setCurrentView();
});
if (scope["schedulerModel"].onAppointmentSave) {
scheduler.attachEvent("onEventSave", (ev, isNew) => {
return scope["schedulerModel"].onAppointmentSave(ev, isNew);
});
}
if (scope["schedulerModel"].onAppointmentMoved) {
scheduler.attachEvent("onBeforeEventChanged", (ev, e, isNew, original) => {
return scope["schedulerModel"].onAppointmentMoved(ev, original, isNew);
});
}
element.addClass("dhx_cal_container");
scheduler.init(element[0], scope["schedulerModel"].date, scope["schedulerModel"].mode);
}
static create(): ng.IDirective {
return new DhtmlxSchedulerDirective();
}
}[/code]
Could someone please point me in the right direction on how to go about solving this? I’d appreciate any help. /Regards Kris