This is a migrated thread and some comments may be shown as answers.

Navigation Previous Button Doesn't Work

3 Answers 261 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
yolo
Top achievements
Rank 1
Veteran
yolo asked on 14 Jan 2021, 03:32 AM

Hi,

the "previous" navigation button does not work in week or workWeek view. It works for day, month and agenda.

the "next" navigation button is fine, whereby i can still view the next week's schedule, just that after i navigate to the next week, i can't go back to the previous week. I have followed this https://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler/events/navigate 

There is no error message in my case. Kindly assist me.

 

this is my code :

001.$("#scheduler").kendoScheduler({
002.        editable:{
003.            destroy: can_delete,
004.            update : can_update,
005.            create : can_create,
006.            template : $("#schedulerTemplate").html(),
007.        },
008.        date : new Date(dtFrom),
009.        startDate: new Date(dtFrom),
010.        startTime: new Date(new Date(dtFrom).getFullYear(), new Date(dtFrom).getMonth(),new Date(dtFrom).getDate(),7, 0, 0, 0),
011.        selectable:true,
012.        height: "max-height",       
013.        views: [
014.            {type : "day",
015.                selected:day_selected, allDaySlot:all_day_slot},
016.            {type : "workWeek",
017.                selected: week_selected,
018.                allDaySlot:all_day_slot,
019.                workDays: days_to_print, title: "Week"},
020.            {type : "month",
021.                selected : month_selected,
022.                adaptiveSlotHeight:true,
023.                eventSpacing: 5,
024.                eventsHeight: 55, },
025.            {type : "agenda",
026.                selected : agenda_selected},
027.                      
028.        ],
029.        toolbar: ["pdf","search"],
030.        pdf:{
031.            landscape: true,
032.        },       
033.        dataSource : {
034.  
035.            transport: {
036.                read : {
037.                    url: "/load_events_ajax_new/",
038.                    data: {
039.                        dtFrom: dtFrom,
040.                        dtUntil: dtUntil,
041.                        tz : G_timezone_offset,
042.                        timezone: $('#searchTimezone option:selected').val(),
043.                    },
044.                    dataType: "json",
045.                },
046.                update: {
047.                    url: "/update_events_ajax_new/",
048.                    dataType: "json",
049.                    complete : function(){
050.                        reload_data();
051.                    },
052.                },
053.                destroy: {
054.                    url: "/delete_events_ajax_new/",
055.                    dataType: "json",
056.                    complete : function(){
057.                        reload_data();
058.                    },
059.                },
060.                create : {
061.                    url : "/create_event_db/",
062.                    dataType : 'json',
063.                    complete : function(){
064.                        reload_data();
065.                    },
066.                },
067.                batch: true,
068.            },
069.             
070.            schema: {
071.                data: "events",
072.                model: {
073.                    id: "id",
074.                    fields: {
075.                        id: { from: "id",type:"number"},
076.                        title: { from: "title", validation: { required: true } },
077.                        start: { type: "date", from: "start" },
078.                        end: { type: "date", from: "end" },
079.                        description: { from: "description"},
080.                        location: {from: "location"},
081.                        creator: {from: "creator"},
082.                        isAllDay : {type : "boolean", from : "isAllDay"},
083.                        recurrenceId: { from: "recurrenceID" },
084.                        recurrenceRule: { from: "recurrenceRule" },
085.                        recurrenceException: { from: "recurrenceException" },
086.                        startTimezone: { from: "StartTimezone" },
087.                        ownerId: {from: "ownerId"},
088.                         
089.                    }
090.                }
091.            },
092.            filter: {
093.                logic: "or",
094.                filters: [
095.                ]
096.            }
097.        },
098.        navigate : function(e){
099.            reload_data();               
100.        },
101.        resources: [
102.            {
103.                field: "category_id",
104.                dataSource: category_datasource,
105.                multiple: false,
106.                title: "Category"
107.            }
108.        ],
109.    });

3 Answers, 1 is accepted

Sort by
0
yolo
Top achievements
Rank 1
Veteran
answered on 14 Jan 2021, 07:56 AM

i have to add something like this in order for the previous button to work.

$("button.k-button.k-button-icon.k-icon-button.k-nav-prev").click(()=>{
        let date = scheduler.date();
        date.setDate(date.getDate()-1);
        scheduler.date(date);
        console.log("success");
    })

 

but this will only fire the button upon clicking it twice.

0
yolo
Top achievements
Rank 1
Veteran
answered on 15 Jan 2021, 02:20 AM
also, after i have selected the button, the button is kept active, the button is being highlighted until i press at the side.
0
Petar
Telerik team
answered on 15 Jan 2021, 12:53 PM

Hi Yolo,

I've just tested this Overview demo project, trying to replicate the reported issue. I couldn't reproduce the reported behavior for the week and workWeek views. Can you compare the linked implementation to the implementation that you have in your application? Maybe you will notice something that is triggering the issue on your end. 

Another thing you could try is to comment on the call of the reload_data function in the navigation event. I don't know what is the implementation of this function but it could be the source of the issue.

If you don't manage to resolve the issue by comparing the projects or by removing the reload_data function, to be able to help you, I will need a runnable example in which the experience behavior can be replicated. Can you send a runnable example that we can test locally? Thus we will be able to provide more relevant feedback about your issue. 

You can also use this Dojo example as a basis to replicate the issue. Edit the Dojo and send the edited project back. 

Regards,
Petar
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Scheduler
Asked by
yolo
Top achievements
Rank 1
Veteran
Answers by
yolo
Top achievements
Rank 1
Veteran
Petar
Telerik team
Share this question
or