Get next/previous week on next/previous date filter

[Cristina Pelivan]

Hi,

I want to overwrite the date navigation filter, in order to get on next, the next week and on previous the previous week. Is there any possibility to do this?

Until now I've found onNavigation event, but I don't know how to change the calendar date.

Also, I've noticed that views change when filtering by date. I have a calendar with 3 views: week, month, agenda (in this order). Default is Week view. If current view displayed is Agenda, and i click on calendar filter to change date, view changes to default one (week view). Is there something I am missing?

Best regards,

[Arulraj A]

Hi Cristina, 

 

Q1: I want to overwrite the date navigation filter, in order to get on next, the next week and on previous the previous week. Is there any possibility to do this? 

 

Yes, it is possible to overwrite the date navigation filter in order to click on next button of agenda view it went to the next week and previous button of agenda view it went to previous week by making use of the ‘Navigation’ event. We have prepared the sample with agenda view and the changes are highlighted below. Also, the sample can be downloaded from the following location. 

 

Sample link: https://www.syncfusion.com/downloads/support/forum/139881/ze/ScheduleSampleNavigation1571374543  

 

Index.chtml 

@{ 

    ViewBag.Title = "Home Page"; 

} 

 

@{List<string> views = new List<string>() { "Week", "Month", "Agenda" };} 

<div class="container-fluid"> 

 

    @(Html.EJ().Schedule("Schedule") 

          .Width("100%") 

          .Height("525px") 

          .Views(views) 

          .CurrentView(CurrentView.Agenda) 

          .CurrentDate(new DateTime(2018, 8, 20)) 

          .FirstDayOfWeek(DayOfWeek.Monday) 

          .IsResponsive(true) 

          .ContextMenuSettings(contextMenu => contextMenu.Enable(false)) 

          .ScheduleClientSideEvents(e=>e.Navigation("viewChange")) 

          .ShowWeekend(false) 

          .AppointmentSettings(fields => fields.Datasource(Model) 

              .Id("Id") 

              .Subject("Name") 

              .StartTime("StartDate") 

              .EndTime("EndDate") 

              .Description("Description") 

              .AllDay("IsAllDay") 

              .Recurrence("IsRecurrence") 

              .RecurrenceRule("RecurrenceRule")) 

    ) 

 

 

</div> 

<div class="scriptsection"> 

<script type="text/javascript"> 

 

    function viewChange(args) { 

        if (args.requestType == "dateNavigate" && args.currentView == 'agenda') { 

            var CurrentDate = new Date(args.currentDate); 

            if ($(args.target.target)[0].classList.contains('e-navigateprevious')) { 

           //if you click the previous button move it to previous week 

                CurrentDate = new Date(CurrentDate.setDate(CurrentDate.getDate() - 6)); 

            } else { 

            //if you click the next button move it to next week 

                CurrentDate = new Date(CurrentDate.setDate(CurrentDate.getDate() + 6)); 

            } 

            $("#Schedule").ejSchedule({ currentDate: CurrentDate }); 

        } 

    } 

</script> 

    </div> 

  

Q2: Views change when filtering by date? 

We have checked the reported issue on sample which can be provided in one of your previous incident and not able to reproduce the issue at our end. We suspect that the reason for the issue might be due to any of your sample customization change the view. Therefore, please provide us with your complete Scheduler related files of your project to run and check it. The information provided by you will be more helpful for us to analyze your reported scenario further and provide you the possible solution.  

Regards, 

Arulraj A 

[Cristina Pelivan]

Hello,

Thank you, that solved my issue.

You can download the code from the following link (couldn't attach it because size is over 30MB): 

https://drive.google.com/file/d/1doGWaA0cT3zum-EUCp4s14PEJj0WHpaI/view?usp=sharing

Steps to reproduce:

- default view is month. Click on agenda view

- click on next week (from date filter) => calendar goes to the first view (Week view), instead of remaining on current view

Thank you,

[Arulraj A]

Hi Cristina, 

 

Thanks for sharing the code.  

 

We have checked your shared project and found that the reason for the issue is  “e-datecommondiv” is overlapped with “e-viewstable” element which can be shown in the following screenshot-1. Due to this when you click the next week from the date filter it is considered as a view navigation click. 

 

Screenshot – 1: 

 

 

To overcome this issue, we suggest you to add the following CSS in your sample end. 

<style type="text/css"> 

    table.e-table.e-viewstable { 

        padding-left: 200px; 

    } 

</style> 

We have prepared a video demo for your reference with the above changes in your shared project which can be downloaded from the following location. 

 

Demo link: https://www.syncfusion.com/downloads/support/forum/139881/ze/video_demo-354135884  

 

Kindly try the above code and let us know, if you need any further assistance on this. 

 

Regards, 

Arulraj A 

[Cristina Pelivan]

Thank you,

The css change works just fine.

Regards,

Cristina

[Arulraj A]

Hi Cristina,

Thanks for the update.

We are glad to know that the reported problem has been solved at your end. Please let us know if you have any further queries on this. We are happy to help you.

Regards,
Arulraj A