Hi,
I am using dhtmlx-scheduler, It provides descent UI component with javascript UI library.
can we have webjar or npm for javascript UI library.

Case:
I want if user drag on empty date (create new event obj) redirect to another page.

Problem:
When user drag on a date, then when moving to the next date, this method already fired, even the drag is not yet done (the user still dragging).
So then the user redirected already and I can't get the correct 'end_date'.

How to achieve:
I click and hold on May 10, then I want to move my mouse to May 15, but when I pass May 11 'onEventCreated' fired.

Expected:
The user gets redirected after the drag is ended.

Scheduler Version: v.3.3.11
IE Version: 11.666 or Emulator IE11 windows 8.1 Update
Windows: 10
Jquery Version: 1.5
I'm trying to display lightbox when drag ends but it's not working on IE specific version but it works on all other browsers and other IE browser versions.
I tried binding with onDragEnd & onBeforeEventChanged, but both events are not getting triggered
But when I target IE browser to IE 9 everything works fine , don't know what is causing the issue

Code as follow :

scheduler.attachEvent("onDragEnd", function(id, mode, e){
    console.log(id);
    scheduler.showLightbox(id);
}); 

scheduler.attachEvent("onBeforeEventChanged", function (event_object, native_event, is_new, original) {
 scheduler.showLightbox(event_object.event_pid);
});

when i run this code block from console directly
scheduler.showLightbox(12235654);
lightbox gets dispalyed

I have on condition on save. So i am opening confirmation modal & want to save data on the confirmation.

But as modal popup opens i don't have control over edit modal. So on yes i want to close edit modal.

this.schedularSaveEvent = scheduler.attachEvent("onEventSave", (id, event) => {  
    const hours = Math.abs(event.end_date - event.start_date) / 36e5;
    if (hours > 24) {
        this.showModal24Hours = this.modalService.show(this.scheduler24Hourse);
    } else {
        return true;
    }
});

okModalClick() {
////hide schedular edit modal
}

Is there any method that allows to close edit modal?

Hi

Could someone tell me what is the best way to prevent and event from betting able to be dragged into another section (y axis).

i.e. I do not want a user to be able to drag "John" events into "Pieter" Events...

But i do want "John" to be able to move the times of his events via dragging.

Thanks

Please check the demo here: https://docs.dhtmlx.com/scheduler/samples/06_timeline/13_full_month_scale.html

This is what I see:

Windows 10.
Chrome 59.0.3071.115 64 bit
Only minor misalignment on IE 11.

Hi,

While loading scheduler events , I want to hide some of the events if rec_type=="none".

scheduler.parse([{"text":"Task1","id":"1458040356684","start_date":"2016-03-15 01:10:00.0","end_date":"2016-04-14 00:00:00.0","rec_type":"day_1___#","event_pid":"","event_length":"2587800","section_id":"4","event_status":null},{"text":"Task1","id":"1458103543817","start_date":"2016-03-16 01:10:00.0","end_date":"2016-04-15 00:00:00.0","rec_type":"none","event_pid":"1458040356684","event_length":"2587800","section_id":"4","event_status":"delete"}],"json");

how can I do this. I have used the filter as follows but it does not work for all events.

scheduler.filter_day = function(id, event){
console.log('inside filter_day'+id + (event.rec_type=="none"));

if(event.rec_type=="none")
{
//return false; // event will be filtered (not rendered)
}

return true; // event will be rendered

};

Please help.

I wanna use timeline mode in scheduler but i can't find files which used in the samples.
codebase/ext/dhtmlxscheduler_timeline.js and codebase/ext/dhtmlxscheduler_treetimeline.js

Hi! I have inserted an svg in an element in the scheduler. I get javascript-error when there's className.split(). Because for svg-elements, the className property isn't a string.

Example:
https://github.com/DHTMLX/scheduler/blob/master/codebase/sources/dhtmlxscheduler.js#L2551

A solution to this might be to go up until we find an HTMLElement before we use className like that.
E.g.
src = src || (e.target || e.srcElement); while (!(src instanceof HTMLElement)) { src = src.parentElement; } var classname = src.className && src.className.split(" ")[0];

Perhaps there are more elegant solutions to this?

To reproduce: call _on_mouse_down() with an svg-element as src.

Inside the dhx_cal_prev_button and dhx_cal_next_button buttons, I've implemented custom SVG icons to match our theme. However, SVG className does not have a split() javascript method.

https://github.com/DHTMLX/scheduler/blob/master/codebase/sources/dhtmlxscheduler.js#L2551

This results in an error when clicking the icons, since the event bubbles up from the SVG as the event source. Adding a simple check to make sure the split() method exists would fix this.

var classname = src.className && src.className.split && src.className.split(" ")[0];

Thanks!

How can I pragmatically, in JavaScript, delete a recurring event. I have the id, however since it attaches id#morenumbers, for each recurring event I'm not sure how I'd go about deleting all instances of a recurring event. Can you please point me out to the respective docs, the only one I found was for server side and I cannot follow that.

Thanks!

Hi,

for some images like export_pdf.png or export_ical.png, the customs skins use images path from imgs folder instead of custom skin folder.
For exemple, the material skin dhtmlxscheduler_material.css use background-image: url('imgs/export_pdf.png') instead of background-image: url('imgs_dhx_material/export_pdf.png')

In basic/layout.less, thoses paths image are not set with dynamic var @... so the lessc run command never set the good paths.

Can you change it ?

Thanks

Hi team,
I have checked new release and happy that you have spent some time to mobile responsiveness https://dhtmlx.com/blog/dhtmlxscheduler-5-3-minor-update-rtl-support-improved-responsiveness/

Feedback on this: https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/13_touch_ui.html

1,2,3(from above image). the label should be aligned centre with the elements.
4,5. This should be (remove extra space in left side) padding-left: 0px on mobile devices.

• In the new version, I have found that calendar and other SVG files changed from white to blue.
  would be better if the user can able to change the colour of an icon or SVG.files
• It would be great if scrolling colour or theme like black added to the dhx_cal_data class instead of the default. It would look awesome when the user does not use the full width.

This is the only feedback from my point of view for New mobile responsiveness.
Thanks

If you’re a bit fast when you start dragging after clicking to create an event (i.e. if you act normally and don’t intentionally wait after clicking before you start dragging), the event does not start where you clicked but later.

That’s because in scheduler._on_mouse_move, you calculate the start date from the position of the mouse move event instead of the position of the mouse down event (https://github.com/DHTMLX/scheduler/blob/master/codebase/sources/dhtmlxscheduler.js#L2377):

// position of the mouse moved event
var pos=this._mouse_coords(e);
// ...
// replace the position of the start of the drag by the position of the first mouse moved event
this._drag_pos=pos;
this._drag_pos.has_moved = true;
// ...
// calculate the start date from the replaced position
start = this._get_date_from_pos(pos).valueOf();

I think that this._drag_pos=pos is unnecessary, and that the start date should be calculated from the original drag position (mouse down position):

var pos=this._mouse_coords(e);
// ...
// don’t change the position of the start of the drag
this._drag_pos.has_moved = true;
// ...
// calculate the start date from the mouse down position
start = this._get_date_from_pos(this._drag_pos).valueOf();

As the title says, the "Check the live demo" link is wrong

What is the best way to reinitialize scheduler.

I have app which supports multi-language. When language localization data doesn't apply to light-box action buttons until scheduler's init method called again.

If i do that then in mobile devices on double tap with details_on_create, it created multiple entries. Like if scheduler is initialize twice then it creates double entries on double tap.

scheduler.skin = "material";
scheduler.config.responsive_lightbox = true;
scheduler.config.touch = true;
scheduler.config.first_hour = 4;
scheduler.config.details_on_create = true;
scheduler.config.lightbox.sections = [
    { name: "description", height: 43, map_to: "text", type: "textarea", focus: true },
    { name: "time", height: 72, type: "time", map_to: "auto" }
];
this.translationToolsData.currentTransToolsObj.subscribe(translationObj => {
    this.translationObj = translationObj;
    if (this.translationObj) {
        scheduler.locale = {
          labels: {
                dhx_cal_today_button: this.translationObj.dhx_cal_today_button,
                day_tab:this.translationObj.schedulerday,
                week_tab:this.translationObj.schedulerweek
             }
        }
        scheduler.init(this.schedulerContainer.nativeElement, new Date(), "week");
        scheduler.setCurrentView();
    }
}); 

There is a problem with the behaviour of the series of events that have one instance (except the first) starting in the DST shift.
I am in EET, so for 2016, the DST shift will take place at 03:00, that is after 02:59, the clock will jump to 04:00. The first problem is that browser interpret the shift differently, so Chrome and IE will interpret new Date(2016,2,27,3,0) as Sun Mar 27 2016 04:00:00 GMT+0300 (EEST), whereas FF or Safari will take it as Sun Mar 27 2016 02:00:00 GMT+0200. According to specs, I would assume Chrome is doing it correctly but this is not the main point of the issue.

Start by creating a daily series from March 26, 2016, from 03:00 to 07:00. Since you are probably in a different timezone, please change the start time to the one for your location. The outcome is that the first instance is correctly assigned from 3 to 7, the second is shifted from 4 to 8 on Chrome/IE or 2 to 6 on FF/Safari and all subsequent instances are shifted. Of course, if the start time does not fall in the shift interval, the start/end times are respected with the exception that is the end time falls in the DST shift, the instance for Mar 27 will be extended in Chrome/IE or shortened in FF/Safari.

Consistency for Mar 27, 2016 is hard to achieve due to the browser differences but I assume that:

• even on Mar 27, the end time should not be affected
• from Mar 28 on, the events should respect the start/end times of the series.

I want to use dhtmlx scheduler but my requirement is that, I want Month slot to be display on header like January, February,etc and Year to be display on header. When I change year then again data from Month and year should be bind.

Also, I want 4 months to be display at a time. So I want to know that is it possible to achieve with dhtmlx scheduler? Also, my future requirement is to have 4 timeline in a month. So that task can be assign as per quarter in months. Review the attachment and let me know if it is possible or not? Please do needful asap.

Hello ,
we are currently using scheduler v4.3.17 commercial licence.

and our clients started complaining about an issue where the events are created in the wrong section.
for example i click section "b" it get created in "c" or "d".
i found out that the event during it's creation doesnt have the section id so to fix it i added this line to the function scheduler.addEventNow
base.id = this._drag_id = this.uid();
var pr = this._props[this._mode];
if(pr && e){ base[this._props[this._mode].map_to] = this.getActionData(e).section ; }

now the event is created where it should . but there's a new issue , if we create a view unit that has 7 days 7 units , the event is created in wrong section , i think there's is a problem with the way how it's calculated ,
i tracked the issue to the function scheduler["mouse_"+ name] = function(pos){ //mouse_coord handler in dhtmlxscheduler_units.js.

var section_ind = pos.x % pr.options.length;
var unit_ind = Math.min(section_ind+pr.position,pr.options.length-1);
pos.section = (pr.options[unit_ind]||{}).key;
pos.x = Math.floor(pos.x / pr.options.length);

Thank you.

Looks really weird in mobile devices

Any plan to provide responsive support?

Has no access to the event? This is on time-line

if i use the minical extension, i get a javascript error when i click on the minical icon
the error: "ReferenceError: getOffset is not defined"

I got some problems with an custom lightbox.
Maybe someone could help me with it.

while creating an new event, if the server reports an error, and i click close, the Event is not removed from the Scheduler, it keeps existing.

next problem:
If i check the custom lightbox with an input check:

dp.attachEvent("onBeforeUpdate", function(id, state, data){

            if(data.activiteit === "" || data.project === "") {
                alert('Fill all fields!');
                scheduler.startLightbox(id, null);
                scheduler.hideCover(scheduler.getLightbox());
                return false;
            }


            return true;
        });

It checks with succes, but if i save the event again, it reports ev not defined.

function save_form() {
        console.log(scheduler.getState());
        const ev = scheduler.getEvent(scheduler.getState().lightbox_id);
        ev.project = html("project").value;
        ev.activiteit = html("activiteit").value;
        ev.explanation = html("toelichting").value;
scheduler.endLightbox(true, null);

When i check the state after onBeforeUpdate, it shows that lightbox_id is NULL.

i fixed the first problem with an global var... not the best way

Still got no good solution for problem 2

scheduler.addEventNow() contains this if test:

In newer browsers this test also passes when the start argument for addEventNow() contains just a Date object. This is because constructor.toString() no longer just returns the signature but the entire function body. For Date() this happens to contain an occurence of 'object', which makes the if test pass.

EDIT: upon further investigation it is not newer browsers which alter the toString() return value but the core-js module we use in our (meteor) project, which seems to override the toString method of functions. See reply for more details.

When this happens just a Date object gets assigned to base which now has no start_date field.

This in turn results in start always being assigned the output of _currentDate() on line 2729, even though we did have a start argument:

This results in events added by double click always ending up at the current time instead of the clicked time.

We ran into the issue because in the build in double click handler addEventNow() gets called with just a Date object:

Perhaps a solution could be calling addEventNow() with a wrapper object argument (as per the documentation) instead of a raw Date object.

It's probably not the right place to post this, but I think the Forum page is down for DHTMLX or did it move somewhere else?!?!

https://forum.dhtmlx.com/

the on-click event is fired... This is on Time-line

Hi, is blocking and marking dates implemented, the dhtmlx_limits.JS files is imported into the package, but compiled JS throws an not Implemented error

Set cover height doesn’t set the variable thats defined in the function, thus not calculating the correct height with the lightbox. This issue did not exist in V5.0

Issue
dhtmlx Scheduler Version - 5.3.6
Located - dhtmlxscheduler.js file
Line - 7718

Tue Jan 06 2015 00:00:00 GMT+0800 (RTZ 7 (зима))
new Date(2015, 0, 7);
Wed Jan 07 2015 01:00:00 GMT+0900 (RTZ 7 (лето))
new Date(2015, 0, 8);
Thu Jan 08 2015 00:00:00 GMT+0900 (RTZ 7 (лето))

This causes problems in date.add function

z = new Date(2015,0,6)
Tue Jan 06 2015 00:00:00 GMT+0800 (RTZ 7 (зима))
z  = scheduler.date.add(z,1,'day')
Thu Jan 08 2015 00:00:00 GMT+0900 (RTZ 7 (лето))

timezone comparation will fix it

!date.getHours() && ndate.getHours()
&& date.getTimezoneOffset()==ndate.getTimezoneOffset()

Hi , I tried to integrate dhtmlxscheduler.js with lwc, the rendering is well (only the resize event wasn't supported).
But there is no interraction : ie. No creation on click , no drag and drop......

I use XHTML for testing and this breaks under XHTML, fortunately it isn't too hard of a fix. XHTML is case sensitive and only defines a few named entities so createElement() should be given a lowercase string and characters should be escaped using code points (  vs   and – vs –). There are also a few places where an entity was missing a semicolon, which is also invalid.

I believe this commit has all the changes necessary for scheduler to not break in XHTML mode, so it can be used for reference if needed: chinoto@c7428b9

scheduler.templates.event_class

and setting background overrides the background image

would be nice if there was a default way of setting an icon for an event eg a lock... to illiterate that it cannot be moved.

scheduler.createDataProcessor({
        event: {
            create: function (data) {
                console.log(data);
                return new scheduler.Promise(function (resolve, reject) {
                    $.post(
                        "api.php",
                        { action: "test", data: data },
                        function (result) {
                            return resolve({
                                action: result.action,
                                tid: result.tid,
                                data: result.task,
                            });
                        },
                        "json"
                    );
                });
            },
            update: function (data, id) {
                console.log(data);
                console.log(id);
                return new scheduler.Promise(function (resolve, reject) {
                    $.post(
                        "api.php",
                        { action: "test", data: data },
                        function (result) {
                            return resolve({ action: result.action });
                        },
                        "json"
                    );
                });
            },
            delete: function (id) {
                console.log(id);
                return new scheduler.Promise(function (resolve, reject) {
                    $.post(
                        "api.php",
                        { action: "test", data: id },
                        function (result) {
                            return resolve({ action: result.action });
                        },
                        "json"
                    );
                });
            },
        },
        mode: "JSON",
    });

Upper code not working as intentended because is shows a console error

ajax.js:219          POST http://localhost/calendar/undefined 404 (Not Found)

Yii2 is not supported.

Here is a proposal to use this solution.

I've used the dhtmlx scheduler v 4.3.1 in my web application. I've found a UI related issue with the scheduler calendar wherein the left boundary/border (vertical bar) of the calendar is clearly missing or not rendering.

I've reduced the size of scheduler div to occupy the center portion of the page as seen in the attached screenshot unlike the online demo of scheduler where the scheduler covers the entire page making the outer-edges invisible.

There is some issue in the container_autoresize extension, which breaks drag-and-drop event creation in mobile view.
You can replicate this issue on the example page using device toolbar of Chrome browser
https://docs.dhtmlx.com/scheduler/samples/03_extensions/28_container_autoresize.html

Any plan to release the DHTMLX source code on GitHub?

Kendo is at https://github.com/telerik/kendo-ui-core

Webix is at https://github.com/webix-hub/tracker

Hi i need to modify this scheduler to show different timings for different days something like

please help me

When i try to use schedular in typescript (Angular 8).

I use these

import "dhtmlx-scheduler";
import {} from "@types/dhtmlxscheduler";

First import works fine. But second line gives me an error.

error TS6137: Cannot import type declaration files. Consider importing 'dhtmlxscheduler' instead of '@types/dhtmlxscheduler'.

What am i missing here? I have followed this guide.

Any guides or support for REACTJS?

I am very satisfied with Scheduler and I would like to use it on mobile device too. Scheduler for mobile devices is pretty old (4 years). Is it maintained or is it dead product? What do you suggest for mobile devices? Thanks

I'd like to add this event to my calendar

let eventID = scheduler.addEvent({
                        start_date: "2018-03-03 10:00:00",
                        end_date: "2018-03-10 11:00:00",
                        text: "words",
                        details: "",
                        rec_type: "week_1___1,2",
                    });

However, when I run through that part of my code I get an error in dhtmlxscheduler.js
Cannot read property 'valueOf' of undefined. What's the proper way to add an event as recurring. I've added the dependency js file for recurring events and specified the following in my init

    scheduler.config.details_on_create=true;
    scheduler.config.details_on_dblclick=true;
    scheduler.config.include_end_by = true;
    scheduler.config.repeat_precise = true;        
    var today = new Date();	
    scheduler.init('scheduler_here',today, "week");	

Sometimes single day events are displayed as lasting two days.

For instance: the following json shows up on both Friday and Saturday.

{
  "categories": null,
  "color": "",
  "description": "Visit https://calendarlabs.com/holidays/us/good-friday.php to know more about Good Friday. \n\n Like us on Facebook: http://fb.com/calendarlabs to get updates",
  "end_date": "2023-04-08 00:00",
  "end_date_iso": "2023-04-08",
  "end_date_iso_0": "2023-04-08",
  "geo": null,
  "ical": "BEGIN:VEVENT\r\nSUMMARY:Good Friday\r\nDTSTART;VALUE=DATE:20230407\r\nDTEND;VALUE=DATE:20230407\r\nDTSTAMP:20221108T074931Z\r\nUID:[email protected]\r\nSEQUENCE:0\r\nDESCRIPTION:Visit https://calendarlabs.com/holidays/us/good-friday.php to \r\n know more about Good Friday. \\n\\n Like us on Facebook: http://fb.com/calen\r\n darlabs to get updates\r\nLOCATION:India\r\nSTATUS:CONFIRMED\r\nTRANSP:TRANSPARENT\r\nEND:VEVENT\r\n",
  "id": [
    "[email protected]",
    "2023-04-07 00:00"
  ],
  "location": "India",
  "recurrence": null,
  "sequence": "0",
  "start_date": "2023-04-07 00:00",
  "start_date_iso": "2023-04-07",
  "start_date_iso_0": "2023-04-07",
  "text": "Good Friday",
  "type": "event",
  "uid": "[email protected]",
  "url": null
}

In the attached screenshot Good Friday, Easter Sunday and Easter Monday are all shown as lasting two days:

I used https://github.com/niccokunzmann/open-web-calendar with the provided ICS url (https://www.calendarlabs.com/ical-calendar/ics/46/Germany_Holidays.ics) to generate these screenshots. When I tried with https://www.calendarlabs.com/ical-calendar/ics/33/India_Holidays.ics I noticed that Holi (2023-03-08) was displayed correctly, but Ram Navami (2023-03-30) was not. See the attached screenshot.

Steps to reproduce the issue

1. Create a repeating event
2. Modify an occurrence of the series and click Save
3. Edit again the modified occurrence. Note the toggle button for "Repeat events" is disabled. Click on it once, then save.

It will wrongly create a series out of the modified occurrence, with event_pid still pointing at the first series.

Resolution
This is caused by a bug in dhtmlxscheduler_recurring.js, method scheduler._toggle_block:
Even if cont.blocked, cont.open is toggled.

I manually switch calendars ，table data no refresh

On touch-devices, when I double-tap.

Look at line 5876: https://github.com/DHTMLX/scheduler/blob/master/codebase/sources/dhtmlxscheduler.js#L5876

If I've set config.dblclick_create = false, I don't expect that scheduler._click.dhx_cal_data() to be called because that might potentially trigger the lightbox to show.

You can not hook into both... without some custom js code. this is on the time-line

dhtmlxscheduler.txt
dhtmlxlist.txt

Hi,
we have defined a layout of pattern: 2U , in the left panel we have attached listbox and rightpanel scheduler has been attached.
Our requirement is to use drag and drop feature to drag an element from list and drop it to scheduler. I used the following method after include "dhtmlxscheduler_outerdrag.js" source : -

scheduler.attachEvent("onExternalDragIn", function(id, source, e) {
var listItem = list.get(source.parentObject.id);
scheduler.getEvent(id).text = listItem.Package + " " + listItem.Version;
return true;
});

the above functionality did not work, then I used "onBeforDragIn" event of list and override "scheduler._on_mouse_up" function of scheduler as follows : -

myList.attachEvent("onBeforeDragIn", function (context, ev){
// your code here
console.log('hello 1');
dragIn = 1;
listText = context.from.get(context.source[0]).Maintainer;

            var node = document.getElementById('1');
            //var node = document.getElementById('data_container');
            console.log('node is::::::::'+node);
            (new dhtmlDragAndDropObject()).addDraggableItem(node,{
                _createDragNode:function(node){
                    var dragSpan=node.cloneNode(true);
                    dragSpan.style.position="absolute";
                    dragSpan.style.zIndex=12;
                    return dragSpan;
                }, 
            });
            node.dragLanding=false;


            return true;
        });

(function(){
//inject custom mouseup handler
var old = scheduler._on_mouse_up;
scheduler._on_mouse_up = function(e){

            if (dragIn==1){ //debugger;
                var pos=this._mouse_coords(e);
                console.log('pos.x,pos.y'+pos.x + ' , ' + pos.y + '--------- ' + this._table_view);

                start=this._min_date.valueOf()+(pos.y*this.config.time_step+(this._table_view?0:pos.x)*24*60)*60000;

                start = this._correct_shift(start);
                mode = scheduler.getState().mode;
                console.log('mode inside onMouseUp is ::::: ' + mode);
                console.log(start);
                window.setTimeout(function(){   //timeout is necessary to prevent infinity loop

                scheduler.locale.labels.new_event = listText;

                if(mode=="unit"){

                    scheduler.addEventNow({
                    start_date: scheduler._get_date_from_pos(pos),
                    end_date:   scheduler._get_date_from_pos(pos),
                    text:   listText,
                    section_id: pos.section
                });

                }else
                    scheduler.addEventNow(start);

                scheduler.locale.labels.new_event = "New Event";

                },1)
                dragIn = 0;

            } else
                old.apply(this,arguments);
        }


    })();

the above code is working but It is required to change source code of dhtmlxscheduler.js for unit view and drag from list and drop to scheduler at particular position. It was also required to change in dhtmlxlist.js to make it workable in the current scenario.

To use the unit view we took the file from javaplanner(sample application) , it did not work, then we picked it up from "http://docs.dhtmlx.com/scheduler/codebase/ext/dhtmlxscheduler_units.js".

can we have source code for dhtmlxscheduler_units.js ?

For your kind concern, we have attached js files. please review it and let us know.

Thanks in advance....

I've implemented a new scheduler with a mongo db database however when I try to use it in safari the events do not show up. However works fine in the other browsers