We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Event change date

Hi, i have a question about if is there an event that triggers when a different date on a calendar is selected?. Below attached the image, e.x i want to choose november 15, is there any event that return that date? i have a mini database where there are appintmente so, i want to retrieve only appointments of this day. Thanks


Attachment: imagen_a05ab11a.rar

3 Replies

UD UdhayaKumar Duraisamy Syncfusion Team November 13, 2022 11:47 PM

You can use a calendar change event for your requirement, and that will be triggered when the calendar value is changed.


[app.component.html]

<div id="container">

      <ejs-calendar (change)="onValueChange($event)"></ejs-calendar>

      <span id="selected">Selected Value: </span>

    </div>


[app.component.ts]

onValueChange(argsany)void {

    /*Displays selected date in the label*/

    (<HTMLInputElement>document.getElementById('selected')).textContent =

      'Selected Value: ' + args.value;

  }


API Documentation : https://ej2.syncfusion.com/angular/documentation/api/calendar#change


Sample : https://stackblitz.com/edit/angular-dqmvzg?file=app.component.html,app.component.ts



RR ramiro redona November 14, 2022 09:19 AM

Thanks!, but is not working , and i'm suspecting is because i have <ejs-schedule> not <ejs-calendar>, because if i change in stackblitz what i'm mentioning it throws an error. this is my html 

<ejs-schedule #scheduleObj width="100%" height="550px" [selectedDate]="selectedDate" [views]="views"
                  [timeScale]="timeScale" (change)="onValueChange($event)" [eventSettings]="eventSettings"
                  [group]='group' (popupOpen)='onPopupOpen($event)' (popupClose)="onPopupClose($event)"
                  (actionBegin)="onActionBegin($event)" (eventRendered)="onEventRendered($event)"
                  (actionComplete)='onActionComplete($event)' (drag)="onItemDrag($event)"
                  (renderCell)="onRenderCell($event)">
                  <e-resources>
                    <e-resource field="OwnerId" title="Owner" name="Owners" [dataSource]="ownerDataSource"
                      [allowMultiple]="allowMultipleCategory" textField='OwnerText' idField='Id'
                      colorField='OwnerColor'>
                    </e-resource>
                  </e-resources>
                </ejs-schedule>


RV Ravikumar Venkatesan Syncfusion Team November 15, 2022 10:14 AM

You can get the selected date value from the navigating event of the Schedule, as shown in the below code snippet.

Sample: https://stackblitz.com/edit/ej2-angular-schedule-get-selected-date-on-date-nav?file=app.component.ts

API: https://ej2.syncfusion.com/angular/documentation/api/schedule/#navigating


[app.component.ts]

  public onNavigating(args) {

    if(args.action === 'date') {

      console.log('selected date: 'args.currentDate);

    }

  }


Loader.
Live Chat Icon For mobile
Up arrow icon