Angular 2 Scheduler Appointment Customization

[John Dui]

Hi

There are a few examples on the forum about customization of the Appointment window but none for Angular 2 component.

Can you please provide an example of how one could add/remove fields from the appointment window and then post those values? Also, how can one open the window grammatically(from an external button)?

Thank you and great job.

[Karthigeyan Krishnamurthi]

Hi John, 

 

Thank you for contacting Syncfusion support. 

 

We have prepared the custom window sample in Angular2 platform which can be download from the below location. 

https://www.syncfusion.com/downloads/support/forum/129172/ze/CustomWindow1408141437 

 

Kindly refer the below code example used in the sample. 

 

<Code> 

 

   <div id="customWindow" style="display: none"> 

        <form id="custom"> 

            <table width="100%" cellpadding="5"> 

                <tbody> 

                    <tr style="display: none"> 

                        <td>Id:</td> 

                        <td colspan="2"> 

                            <input id="customId" type="text" name="Id" /> 

                        </td> 

                    </tr> 

                    <tr> 

                        <td>Subject:</td> 

                        <td colspan="2"> 

                            <input id="subject" type="text" value="" name="Subject" onfocus="temp()" style="width: 100%" /> 

                        </td> 

                    </tr> 

                    <tr> 

                        <td>Description:</td> 

                        <td colspan="2"> 

                            <textarea id="customdescription" name="Description" rows="3" cols="50" style="width: 100%; resize: vertical"></textarea> 

                        </td> 

                    </tr> 

                    <tr> 

                        <td>StartTime:</td> 

                        <td> 

                            <input id="StartTime" type="text" value="" name="StartTime" /> 

                        </td> 

                    </tr> 

                    <tr> 

                        <td>EndTime:</td> 

                        <td> 

                            <input id="EndTime" type="text" value="" name="EndTime" /> 

                        </td> 

                    </tr> 

                    <tr> 

                        <td colspan="3"> 

                            <div class="customcheck">AllDay:</div> 

                            <div class="customcheck"> 

                                <input id="allday" type="checkbox" name="AllDay" onchange="alldayCheck()" /> 

                            </div> 

                            <div class="customcheck">Recurrence:</div> 

                            <div> 

                                <input id="recurrence" type="checkbox" name="Recurrence" onchange="recurCheck()" /> 

                            </div> 

                        </td> 

                    </tr> 

                    <tr class="recurrence" style="display: none"> 

                        <td>Type:</td> 

                        <td> 

                            <select id="rType" name="freq"> 

                                <option value="daily">Daily</option> 

                                <option value="weekly">Weekly</option> 

                                <option value="monthly">Monthly</option> 

                                <option value="yearly">Yearly</option> 

                            </select> 

                        </td> 

                    </tr> 

                </tbody> 

            </table> 

        </form> 

        <div> 

            <button type="submit" onclick="cancel()" id="btncancel" style="float:right;margin-right:20px;margin-bottom:10px;">Cancel</button> 

            <button type="submit" onclick="save()" id="btnsubmit" style="float:right;margin-right:20px;margin-bottom:10px;">Submit</button> 

        </div> 

    </div> 

<div id="scheduleControl" > 

<ej-schedule id="Schedule1" width="100%" height="525px" currentView="week" currentDate="5/4/2014" 

   (appointmentWindowOpen)="onAppointmentWindowOpen($event)" 

   (cellClick)="onClick($event)" 

   [appointmentSettings.dataSource]=scheduleEvents  

  [appointmentSettings.applyTimeOffset]=applyTimeOffset 

  appointmentSettings.id="Id" 

  appointmentSettings.subject="Subject"  

  appointmentSettings.startTime="StartTime"  

  appointmentSettings.endTime="EndTime" 

  appointmentSettings.allDay="AllDay" 

  appointmentSettings.recurrence="Recurrence" 

  appointmentSettings.recurrenceRule="RecurrenceRule" > 

</ej-schedule> 

</div> 

 

</Code> 

 

Regards, 

Karthigeyan 

[Navaseelan]

Hi,

i need to hide the month view and agenda .and also i want to disable the default popup to create appointment?

please help me on regard this.

thanks,

Navaseelan

[Karthigeyan Krishnamurthi]

Hi Navaseelan, 

 

Thank you for contacting Syncfusion support. 

 

If your requirement is to display the custom window (by preventing the default detailed window), we have provided the sample in our previous update, kindly refer it. If your requirement is to hide the quick window, showQuickWindow API can be used as shown below and we have prepared the sample to customize the views which can be download from the below location. 

https://www.syncfusion.com/downloads/support/forum/129172/ze/Sample-1631544288 

 

 

 

<Code> 

<ej-schedule id="Schedule1" width="100%" height="525px" currentView="customview" currentDate="5/4/2014" [views]=views 

  [showQuickWindow]=quickWindow 

  [appointmentSettings.dataSource]=scheduleEvents  

  [appointmentSettings.applyTimeOffset]=applyTimeOffset 

  appointmentSettings.id="Id" 

  appointmentSettings.subject="Subject"  

  appointmentSettings.startTime="StartTime"  

  appointmentSettings.endTime="EndTime" 

  appointmentSettings.allDay="AllDay" 

  appointmentSettings.recurrence="Recurrence" 

  appointmentSettings.recurrenceRule="RecurrenceRule" > 

</ej-schedule> 

export class ScheduleComponent { 

public views:any; 

    constructor(public northwindService: NorthwindService) { 

     this.applyTimeOffset = false; 

     this.quickWindow = false; 

     this.views=["Day", "Week", "WorkWeek"]; 

   } 

    public scheduleEvents=northwindService.getEvents();        

} 

</Code> 

Regards, 

Karthigeyan