Search code examples
angularjskendo-uikendo-schedulerkendo-datepicker

How to change view date dynamically (which is filter event by date time)


I Want to filter event by date but date is pass by normal input type="text" not kendo default datepicker.And display passing date in kendo schduler header But cant not change view date.This is my code.........

 $scope.searchEventByDate = function (item) {
    var scheduler = $("#scheduler").data("kendoScheduler");
    scheduler.view().startDate(item.StartDate);
    scheduler.view().endDate(item.EndDate);
    scheduler.view(("day"));
    $scope.scheduler.dataSource.read();       
};

This is my filter param

 parameterMap: function (options, operation) {
                var popupheight = $(window).height() - 180 + 'px';
                $scope.popupWraperForTryout = popupheight;
                var scheduler = $("#scheduler").data("kendoScheduler");
                if (searchCount != 0) {
                    if (operation === "read") {
                        return {
                            filterByPersonalEvent: $scope._filterParamObj.filterBypersonal,
                            filterBySignUpRequired: $scope._filterParamObj.filterBySingupRequired,
                            filterByPaidOrFree: $scope._filterParamObj.filterByPaid,
                            filterByEventStatus: $scope._filterParamObj.eventStatusId,
                            filterByEventType: $scope._filterParamObj.eventTypeId,
                            selectedTeam: $scope._filterParamObj.seasonTeamId,
                            filterByStartDate: scheduler.view().startDate(),
                            filterByEndDate: scheduler.view().endDate(),
                            OrgId: _orgId,
                            UserTimezone: global.userTimezoneOffset
                        }
                    }
                }
            },

I am so tired.This code is not change in view date.Please help me


Solution

  • Several issues here - the day view shows just one day; you can't set startDate and endDate - just date.

    $scope.searchEventByDate = function (item) {
      var scheduler = $("#scheduler").data("kendoScheduler");
      //scheduler.view().startDate(item.StartDate);
      //scheduler.view().endDate(item.EndDate);
      scheduler.view("day");
      // item.StartDate should be Date object - like scheduler.date(new Date("2013/6/6"));
      scheduler.date(item.StartDate);
      $scope.scheduler.dataSource.read();       
    };
    

    If you need to set some explicit date range to filter - you can do it, but still you can't show more than just one day in day view.

    $scope.searchEventByDate = function (item) {
      var scheduler = $("#scheduler").data("kendoScheduler");
      scheduler._myFilterStartDate = item.StartDate;
      scheduler._myFilterEndDate = item.EndDate;
      scheduler.view("day");
      scheduler.date(item.StartDate);
      $scope.scheduler.dataSource.read();       
    };      
    

    And in parameter map:

    ...
    return {
      filterByStartDate: scheduler.view().startDate(),
      filterByEndDate: scheduler.view().endDate(),
      myFilterStartDate: scheduler._myFilterStartDate,
      myFilterEndDate: scheduler._myFilterEndDate,
      OrgId: _orgId,
      UserTimezone: global.userTimezoneOffset
    };
    ...