Our pure JavaScript Scheduler component


Post by Srindt »

Thank you saki for your brief explanation.

1.scheduleMenuFeature : This works.I want to disable the right clicks.I did the below and it works.

    scheduleMenuFeature: {
        items: {
            addEvent: false
        }
    }

But it shows me a normal action menu when I right click as shown below.

right-click.png
right-click.png (36.08 KiB) Viewed 1496 times

I didn't face this in the trial version.Is there a way to not show this action menu?

2.headerMenuFeature

The example shown by you works but what I need is to have a couple of custom filters under filter tasks.

filter-tasks.png
filter-tasks.png (23.75 KiB) Viewed 1496 times

As shown in the above picture, I need to add a couple of my custom filters.

For eg:


Filter Tasks ->
By Name
By Age
By Contact

I have used contentMenu in trial version to achieve this .

I tried using cellMenu,headerMenu,timeAxisHeaderMenuFeature but I wasn't clear and can't get the desired output.How shall it be achieved?

3.End Date Issue:

I tried to dynamically set the startDate,endDate.After which the endDate in the filters didn't work properly as stated before.

So I kept start Date and end Date as starting,ending days of the week.

So say startDate = 20 Sep, and endDate is 26 Sep.

Now I click the left arrow of endDate in (rightClick -> Date Range ), but instead of going back by one day, It goes back by 2 days and the right arrow doesn't respond as well.

I have attached my prj.You can have a look at App.vue (line 98: beforeMount) , where I change the start,end dates.

4.One more unique thing I observed is , after I have set my start,end dates, I see more space after my end date.If you run my attached project, you shall be able to notice it.How shall the extra space be removed?

All of my changes are in the attached project.Kindly have a look.

drag-onto-tasks-demo.zip
(1.09 MiB) Downloaded 99 times

Post by saki »

Re 1:

scheduleMenu : {
    processItems : ({event}) => {
        event.preventDefault();
    },
    items : {
        addEvent : false
    }
},

Re 2: You can do it in processItems method. The simplest config would be:

timeAxisHeaderMenu : {
    processItems : ({items}) => {
        items.eventsFilter.menu.items.push({
            type : 'menuitem',
            text : 'Extra filter item',
            icon : 'b-fa b-fa-flag'
        })
    }
},

I'm checking the remaining questions.


Post by saki »

I cannot reproduce the Start/End buttons problem. Is there anything I'm doing different?

start-end-buttons.gif
start-end-buttons.gif (685.73 KiB) Viewed 1492 times

Post by saki »

Re 4: If you put workingTime into schedulerConfig and bind it in template to scheduler then it will work as expected.

It is actually a bug, the ticket is here: https://github.com/bryntum/support/issues/1572


Post by Srindt »

Thanks for the answers saki.

1,2 : They are working.

4: Got it.

3.Kindly use the arrow button (left,right) in the first two rows, not in the 3rd row (containing the today button)

Kindly refer the below pics.

First, when I see the date filters.

date-1.png
date-1.png (21.94 KiB) Viewed 1490 times

When I clicked the left arrow, then

date-2.png
date-2.png (19.28 KiB) Viewed 1490 times

5.I can't understand the working of these date filters.Will I be able to filter dates outside of the
startdate,enddate range that we have set in the beginning?

Consider, we have set startdate,enddate which are 20-sep and 26-sep.
But say I want to filter events between 20-sep and 30-sep , will I be able to do?
Because, the right arrow of enddate(2nd-row) is not responding.

6a.Say I want to get data from my api based on this date filter, which would be the best method to call my api and update?

I use the below:

            schedule.timeAxis.on({
            beforereconfigure : ({source,startDate,endDate}) => {
            console.log("beforereconfigure: ",startDate,endDate)
            //CALL ASYNC API
            });

6b.But if I go by 6a, and if my api fails, I need to reset the date filters.Is there a way to dynamically update the filters(start-date,endDate - 1st,2nd-row)?


Post by saki »

Re 3: I still cannot reproduce it with our example. Reason for that can be the different config or your scheduler or different data. Would you please try to reproduce the problem with our demo? Or, if that fails, post please a showcase (including the data) that would demonstrate the issue and that we can run/debug/fix locally.

end-date.gif
end-date.gif (1.17 MiB) Viewed 1484 times

I'm preparing the answers to your remaining questions.


Post by Srindt »

Could you kindly try with my project that I have attached before and let me know if you are able to reproduce.

Basically I have set the start,end dates dynamically in beforeMount() and I witnessed this issue.


Post by fabio.mazza »

Hi Srindt,

I am unable to install your project, looks like some references missing or different paths for some files. Could you please change our example as suggested by Saki? Then will be easier and fast to reproduce. Thank you!

Best regards,
Fabio


Post by Srindt »

Hey fabio, I have re-attached my prj.Kindly check with this.

In-case, you face any issues with this prj, then you can try drag-onto-tasks vue example and
set the start and end dates dynamically.

This is how, I do:

        beforeMount(){
            //DATE ISSUE:
            //Im setting the current week here
            //Now endDate in DateRange is not functioning properly.
            var curr = new Date; 
            var first = curr.getDate() - curr.getDay(); 
            var last = first + 6; 
            var firstday = new Date(curr.setDate(first))
            var lastday = new Date(curr.setDate(last))
            firstday.setHours(1);firstday.setMinutes(0);firstday.setSeconds(0)
            lastday.setHours(23);lastday.setMinutes(0);lastday.setSeconds(0)
            schedulerConfig.startDate = firstday;
            schedulerConfig.endDate = lastday;
        },

Now if you check the end date in the filter section,It might not work properly.

Attachments
drag-onto-tasks.zip
(1.09 MiB) Downloaded 103 times

Post by alex.l »

Hi Srindt,

In-case, you face any issues with this prj, then you can try drag-onto-tasks vue example and
set the start and end dates dynamically.

I just downloaded schedulerpro-1.0.2 from our Customer Zone and applied your changes (beforeMount method) to our drag-onto-tasks example. All works as expected.

Could you please try it yourself?

All best,
Alex

All the best,
Alex


Post Reply