1. Home
  2. Forum
  3. Angular - EJ 2
  4. How to include Schedule.

How to include Schedule.

I have tried out the working demo provide for Scheduling the events in the calendar control. I didn't the schedule  in the output. I have tried here is my code.

HTML:
<div>
<p>Events</p>
<div class="row">
<div class="col-lg-9">
<ejs-schedule #scheduleObj width='100%' height='550px' [selectedDate]="selectedDate" [eventSettings]="eventSettings" [currentView]="currentView"
(eventRendered)="oneventRendered($event)">
</ejs-schedule>
</div>
<div class="col-lg-3 property-section">
<div class="property-panel-section">
<div class="property-panel-header">Properties</div>
<div class="property-panel-content">
<div id="property" class="property-panel-table" title="Properties">
<table id="property" title="Properties" style="width: 100%">
<tbody>
<tr style="height: 50px">
<td>
<div>
<ejs-checkbox label="Enable Tooltip" [checked]="true" (change)="onChange($event)"></ejs-checkbox>
</div>
</td>
</tr>
<tr style="height: 50px">
<td>
<div>
<ejs-checkbox label="Enable Tooltip Template" [checked]="true" (change)="onTemplateChange($event)"></ejs-checkbox>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>


My Component.ts file code:

import { ChangeEventArgs } from '@syncfusion/ej2-buttons';
import { extend } from '@syncfusion/ej2-base';
import { EventSettingsModel, View, EventRenderedArgs, DayService, WeekService, WorkWeekService, MonthService, AgendaService, ScheduleComponent } from '@syncfusion/ej2-ng-schedule';
import { zooEventsData, eventsData, scheduleData } from '../../datasource/datasource';


providers: [DetailRowService, AdminService, AppointmentRequest,
DayService, WeekService, WorkWeekService, MonthService, AgendaService]

export class Appointments implements OnInit {
//scheduele declerations
public data: Object[];
public selectedDate: Date;
public eventSettings: EventSettingsModel;
public currentView: View;
@ViewChild('scheduleObj')
public scheduleObj: ScheduleComponent;
public temp: string = '<div class="tooltip-wrap">' +
'<div class="image ${EventType}"></div>' +
'<div class="content-area"><div class="name">${Subject}</></div>' +
'${if(City !== null && City !== undefined)}<div class="city">${City}</div>${/if}' +
'<div class="time">From&nbsp;:&nbsp;${StartTime.toLocaleString()} </div>' +
'<div class="time">To&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;${EndTime.toLocaleString()} </div></div></div>';

onChange(args: ChangeEventArgs): void {
debugger;
if (args.checked) {
this.scheduleObj.eventSettings.enableTooltip = true;
} else {
this.scheduleObj.eventSettings.enableTooltip = false;
}
this.scheduleObj.dataBind();
}

onTemplateChange(args: ChangeEventArgs): void {
if (args.checked) {
this.scheduleObj.eventSettings.tooltipTemplate = this.temp;
} else {
this.scheduleObj.eventSettings.tooltipTemplate = null;
}
this.scheduleObj.dataBind();
}

oneventRendered(args: EventRenderedArgs): void {
debugger;
let categoryColor: string = args.data.CategoryColor as string;
if (!args.element || !categoryColor) {
return;
}
if (this.scheduleObj.currentView === 'Agenda') {
(args.element.firstChild as HTMLElement).style.borderLeftColor = categoryColor;
} else {
args.element.style.backgroundColor = categoryColor;
}
}

}

How to show the schedule control.

7 Replies
AA Arulraj A Syncfusion Team August 14, 2018 12:46 PM UTC

Hi Saravanakumar, 

Thanks for contacting Syncfusion support. 

We have checked the shared code example and suspect the reason for the issue due to script errors thrown while running your application. The selectedDate value not defined properly in the component.ts file. Therefore, we request you to check your console tab whether any script errors are thrown and resolve those error to overcome the reported issue.  

Also, we have prepared the sample with shared code example with the required changes to render the Schedule control and it can be downloaded from the following location. 


Please refer to the code example changes done in the above sample to run the sample properly. 

app.component.ts file: 

import { ViewEncapsulation, Component, ViewChild, OnInit } from '../../node_modules/@angular/core'; 
import { ChangeEventArgs } from '@syncfusion/ej2-buttons'; 
import { EventSettingsModel, View, EventRenderedArgs, DayService, WeekService, WorkWeekService, MonthService, AgendaService, ScheduleComponent } from '@syncfusion/ej2-ng-schedule'; 
import { eventsData } from './datasource'; 
 
@Component({ 
  selector: 'app-root', 
  templateUrl: './app.component.html', 
  styleUrls: ['./app.component.css'], 
  providers: [DayService, WeekService, WorkWeekService, MonthService, AgendaService], 
  encapsulation: ViewEncapsulation.None 
}) 
export class AppComponent implements OnInit { 
  public data: Object[] = eventsData; 
  public selectedDate: Date = new Date(2018, 1, 15); 
  public currentView: View = 'Week'; 
  @ViewChild('scheduleObj') 
  public scheduleObj: ScheduleComponent; 
  public temp: string = '<div class="tooltip-wrap">' + 
    '<div class="image ${EventType}"></div>' + 
    '<div class="content-area"><div class="name">${Subject}</></div>' + 
    '${if(City !== null && City !== undefined)}<div class="city">${City}</div>${/if}' + 
    '<div class="time">From&nbsp;:&nbsp;${StartTime.toLocaleString()} </div>' + 
    '<div class="time">To&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;${EndTime.toLocaleString()} </div></div></div>'; 
  public eventSettings: EventSettingsModel = { dataSource: this.data, enableTooltip: true, tooltipTemplate: this.temp }; 
  ngOnInit(): void { 
 
  } 
  ----------------- 
  ----------------- 
  ----------------- 
} 
 


Note: Removed the unused import modules like DetailRowService, AdminService from the above application, which is mentioned in your shared code example. 

Also, we suggest you to refer to our below UG and online sample links to know more about the Schedule control. 


Kindly try with the above sample and UG links and let us know if you need any further assistance on this. 
Regards, 
Arulraj A 


SP Saravanakumar Pandi August 14, 2018 05:50 PM UTC

Thanks for the response. I would like to more brief about the issue what i facing. we have a model which hold a list of value. how to show that all values in the schedule. 

For eg, my example model list will be like 
appointmentdata[
  • Language:"Tamil"
  • Title:"Ohio Clinic"
  • id:"1"},

  • Language:"Spanish"
  • Title:"Ohio Court"
  • id:"2"},


  • Language:"Spanish"
  • Title:"School"
  • id:"3"},
    •   ]

    This is my sample data, i have tried , but not able to place this data in the schedule.


    AA Arulraj A Syncfusion Team August 15, 2018 08:15 AM UTC

    Hi Saravanakumar,  
     
    We have checked the shared data and suspect the reason for the issue due to invalid field mapping. Therefore, we request you to map the custom field names for appointments as below.  
    we have prepared the sample with shared code example with the required changes to render the data and it can be downloaded from the following location.  
     
     
    Also, we suggest you to refer to our below UG to know more details about the field mapping and supported date format.  
     
    UG links: 
     
    Please refer to the code example changes done in the above sample to run the sample properly.  
     
    app.component.ts file:  
     
    import { ViewEncapsulation, Component, ViewChild, OnInit } from '../../node_modules/@angular/core'; 
    import { ChangeEventArgs } from '@syncfusion/ej2-buttons'; 
    import { 
      EventSettingsModel, View, EventRenderedArgs, DayService, 
      WeekService, WorkWeekService, MonthService, AgendaService, ScheduleComponent 
    } from '@syncfusion/ej2-ng-schedule'; 
     
    @Component({ 
      selector: 'app-root', 
      templateUrl: './app.component.html', 
      styleUrls: ['./app.component.css'], 
      providers: [DayService, WeekService, WorkWeekService, MonthService, AgendaService], 
      encapsulation: ViewEncapsulation.None 
    }) 
    export class AppComponent implements OnInit { 
    // Following object defines the datasource for the schedule 
      public data: Object[] = [ 
        { 
          EndTime: new Date(2018, 8, 12, 13, 0), 
          Language: 'Tamil', 
          StartTime: new Date(2018, 8, 12, 10, 0), 
          Title: 'Ohio Clinic', 
          id: '1', 
        }, 
     
        { 
          EndTime: new Date(2018, 8, 16, 13, 0), 
          Language: 'Spanish', 
          StartTime: new Date(2018, 8, 16, 10, 0), 
          Title: 'Ohio Court', 
          id: '2' 
        }, 
     
        { 
          EndTime: new Date(2018, 8, 20, 13, 0), 
          Language: 'Spanish', 
          StartTime: new Date(2018, 8, 20, 10, 0), 
          Title: 'School', 
          id: '3' 
        } 
      ]; 
      public selectedDate: Date = new Date(2018, 8, 16); 
      public currentView: View = 'Week'; 
      @ViewChild('scheduleObj') 
      public scheduleObj: ScheduleComponent; 
      public temp: string = '<div class="tooltip-wrap">' + 
      '<div class="image ${EventType}"></div>' + 
      '<div class="content-area"><div class="name">${Title}</></div>' + 
      '${if(City !== null && City !== undefined)}<div class="city">${City}</div>${/if}' + 
      '<div class="time">From&nbsp;:&nbsp;${StartTime.toLocaleString()} </div>' + 
      '<div class="time">To&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;${EndTime.toLocaleString()} </div></div></div>'; 
      public eventSettings: EventSettingsModel = { 
        dataSource: this.data, 
        enableTooltip: true, 
        tooltipTemplate: this.temp, 
      // Following code is used for custom field mapping 
        fields: { 
          id: 'id', 
          subject: { name: 'Title' }, 
          description: { title: 'Language', name: 'Language' }, 
          startTime: { name: 'StartTime' }, 
          endTime: { name: 'EndTime' }, 
        } 
      }; 
      ngOnInit(): void { 
     
      } 
      onChange(args: ChangeEventArgs): void { 
        if (args.checked) { 
          this.scheduleObj.eventSettings.enableTooltip = true; 
        } else { 
          this.scheduleObj.eventSettings.enableTooltip = false; 
        } 
        this.scheduleObj.dataBind(); 
      } 
     
      onTemplateChange(args: ChangeEventArgs): void { 
        if (args.checked) { 
          this.scheduleObj.eventSettings.tooltipTemplate = this.temp; 
        } else { 
          this.scheduleObj.eventSettings.tooltipTemplate = null; 
        } 
        this.scheduleObj.dataBind(); 
      } 
     
      oneventRendered(args: EventRenderedArgs): void { 
        let categoryColor: string = args.data.CategoryColor as string; 
        if (!args.element || !categoryColor) { 
          return; 
        } 
        if (this.scheduleObj.currentView === 'Agenda') { 
          (args.element.firstChild as HTMLElement).style.borderLeftColor = categoryColor; 
        } else { 
          args.element.style.backgroundColor = categoryColor; 
        } 
      } 
    } 
     
           
    Kindly try with the above sample and UG links and let us know if you need any further assistance on this. 
     
    Regards,  
    Arulraj A 


    SP Saravanakumar Pandi August 17, 2018 10:08 AM UTC

    Hi, 

    I have gone through the sample and now its working fine. Thanks. 
    How to get the cell value where the appointment display. instead of a pop-up, I need to get the appointment data.


    AA Arulraj A Syncfusion Team August 17, 2018 01:13 PM UTC

    Hi Saravanakumar, 

    You can get the cell details within the cellClick event while clicking on the cell and the same you can get the appointment details within the eventClick event while clicking on the appointment. Also, you can get the cell and event details by using our getCellDetails and getEventDetails method respectively by passing the cell or event element. Please refer below UG link to know about the schedule events and method details. 



    Please refer to the following code example to get the cell and appointment details. 

    app.compontnet.html page: 

    <ejs-schedule #scheduleObj width='100%' height='550px' [selectedDate]="selectedDate" [showQuickInfo]="showQuickInfo" [eventSettings]="eventSettings" (cellClick)="onCellClick($event)" (eventClick)="onEventClick($event)"> 
    </ejs-schedule> 
     

    app.component.ts page: 

    onCellClick(args: CellClickEventArgs) { 
        console.log("Cell Details By Click"); 
        console.log(args); // Here displaying the cell details coming in the cellClick event args  
        console.log("Cell Details By Method"); 
        let cellElement: Element = args.element as Element; 
        console.log(this.scheduleObj.getCellDetails(cellElement)); // Here displaying the cell details using the method by passing the clicked cell element 
      } 
    onEventClick(args: EventClickArgs) { 
        console.log("Event Details By Click"); 
        console.log(args); // Here displaying the event details coming in the eventClick event args  
        console.log("Event Details By Method"); 
        let eventElement: Element = args.element as Element; 
        console.log(this.scheduleObj.getEventDetails(eventElement)); // Here displaying the event details using the method by passing the clicked event element 
      } 
     

    Details Display in Console: 

    Cell Click: 

     

    Event Click 
     


    Kindly try with the above code example and UG links and let us know if you need any further assistance on this. Else, revert back to us with some more information about your requirement if we misunderstood your requirement. 

    Arulraj A 


    SP Saravanakumar Pandi August 20, 2018 06:16 AM UTC

    Thanks a for your support. its working fine 

    AA Arulraj A Syncfusion Team August 20, 2018 07:27 AM UTC

    Hi Saravanakumar, 

    We are glad to know that the reported problem has been resolved. Please let us know if you need any further assistance on this. 

    We are happy to help you. 

    Arulraj A 


    Loader.
    Up arrow icon